ExtJS + ASP. NET custom Curve

ExtJS + ASP. NET custom Curve

Step 1: Create a Store data source

var myData = [];    myData.push({ 'name': '1', 'Oil_Production': '30', 'Water_Injection': '55', 'Gas_Production': '23' });    myData.push({ 'name': '2', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '3', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '4', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '5', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '6', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '7', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '8', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '9', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '10', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '11', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    myData.push({ 'name': '12', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });    store1 = Ext.create('Ext.data.Store', {        fields: ['name', 'Oil_Production', 'Water_Injection', 'Gas_Production'],        data: myData    });

Step 2: Create a curve

Ext. require ('ext. chart. * '); Ext. require (['ext. window ', 'Ext.fx.tar get. sprite ', 'ext. layout. container. fit ', 'ext. window. messagebox']); Ext. onReady (function () {// store1.loadData (generateData (8); var chart = Ext. create ('ext. chart. chart', {renderTo: Div3, width: 500, height: 300, style: 'background: # fff', animate: true, store: store1, shadow: true, // assign the theme: 'category1', legend: {position: 'right'}, axes: [{type: 'numeric ', minimum: 0, position: 'left', fields: ['oil _ Production ', 'Water _ Injection', 'Gas _ Production '], title: 'nissan oil', minorTickSteps: 0.1, grid: {odd: {opacity: 1, fill: '# ddd', stroke: '# bbb', 'stroke-width': 0.5 }}, {type: 'category ', position: 'bottom ', fields: ['name'], title: 'month'}], series: [{type: 'line', // It indicates the line chart highlight: {size: 7, radius: 7}, axis: 'left', xField: 'name', yField: 'oil _ Production ', markerConfig: {type: 'circle ', // key turning point types: size: 4, radius: 4, 'stroke-width': 0 },{ type: 'line', highlight: {size: 7, radius: 7}, axis: 'left', smooth: true, xField: 'name', yField: 'water _ Injection ', markerConfig: {type: 'circle', size: 4, radius: 4, 'stroke-width': 0 }}, {type: 'line', highlight: {size: 7, radius: 7}, axis: 'left ', smooth: true, xField: 'name', yField: 'Gas _ Production ', markerConfig: {type: 'circle', size: 4, radius: 4, 'stroke-width': 0 }}]}) ;});