Draw line charts using Ajax data sources in extjs4

In the extjs 4 liveanimated.html example, a graph is dynamically drawn, which is very beautiful. In this example, the test data generated by the front-end Javascript is used for plotting. If Ajax is used to draw data from the background, the curve cannot be drawn (the coordinate axis has been drawn). The result is as follows:

The Code is as follows:

Ext. require ('ext. chart. * '); function content (NCID, IPaddress) {var nowtime = new date (); var intervalid =-1; var arraycount = 30; var step = 1; vaR storelength = ""; var generatedata = (function () {var DATA = [], I = 0, date = nowtime; min = math. min, max = math. max, random = math. random; return function () {Ext. ajax. request ({URL: 'getvmusedmemory. php', Params: {NCID: NCID, IPaddress: IPaddress}, success: function (response, options) {var jsondata = ext. decode (response. responsetext); // data = data. slice (); If (data. length = arraycount) {data. shift (); // remove the first data of array} data. push ({Date: new date (jsondata. date), usedmemory: parseint (jsondata. usedmemory/1024)}) ;}}); return data. slice () ;};}) (); var store = ext. create ('ext. data. jsonstore', {fields: ['date', 'usedmemory '], data: generatedata ()}); Ext. create ('ext. window ', {width: 800, height: 600, hidden: false, maximizable: True, Title: 'Live animated chart', renderto: ext. getbody (), layout: 'fit ', items: [{xtype: 'chart', style: 'background: # fff', ID: 'chartcmp', store: store, animate: True, axes: [{type: 'numeric ', grid: True, minimum: 0, maximum: 8192, position: 'left', fields: ['usedmemory'], title: 'memory of used (MB) ', grid: {odd: {fill:' # dedede', stroke: '# DDD', 'stroke-width ': 0.5 }}, {type: 'time', position: 'bottom ', fields: 'date', Title: 'day', step: [Ext. date. second, 1], dateformat: 'I: s', groupby: 'year, month, day, hour, minute, second', // aggresponop: 'sum', constrain: true, fromdate: ext. date. add (nowtime, ext. date. second, 1), todate: ext. date. add (nowtime, ext. date. second, 30), grid: true}], Series: [{type: 'line', axis: 'left', xfield: 'date', yfield: 'usedmemory ', label: {display: 'none', field: 'usedmemory ', Renderer: function (v) {return v> 0 ;}, 'text-anchor ': 'middle'}, markerconfig: {radius: 5, size: 5}], listeners: {afterrender: function () {var chart = ext. getcmp ('chartcmp '); var timeaxis = chart. axes. get (1); intervalid = setinterval (function () {var GS = generatedata (); var todate = timeaxis. todate, lastdate = GS [Gs. length-1]. date, markerindex = chart. markerindex | 0; If (+ todate <+ lastdate) {markerindex = 1; timeaxis. todate = lastdate; timeaxis. fromdate = ext. date. add (ext. date. clone (timeaxis. fromdate), ext. date. second, step); chart. markerindex = markerindex;} store. loaddata (GS); storelength + = store. data. items. length ;}, step * 1000) ;}, destroy: function () {clearinterval (intervalid) ;}}) ;}ext. onready (function () {var con = new content ("10.0.21.1 ");});

The code is analyzed and no defects are found, but the Curve cannot be drawn. Later, the code is tracked to Ext. chart. axis. time, the problem is found: ext first draws the time timeline when drawing the image. When you draw a timeline, you first create a substore for the chart object. It has the same structure as the store. first look at the code of the drawseries function (ext. Chart. Series. Line)

// Ext. Chart. Series. linedrawseries: function () {var me = This, chart = me. Chart, store = chart. substore | chart. Store ,......} 

The Code shows that the data source used by drawseries is chart. substore and chart. store "logic or", the logic or result is "the first is not empty, the first is empty, and the second is", and the substore is not null at this time, therefore, the data source that draws the curve is also substore, And the substore data exactly corresponds to the timeline scale, constraindates (ext. chart. axis. the time function generates the data of the substore. The following Code shows that the data source is related to the store.

VaR getrecordbydate = (function () {var Index = 0, L = store. getcount (); return function (date) {var rec, recdate; For (; index <L; index ++) {rec = store. getat (INDEX); recdate = rec. get (field); If (+ recdate> + date) {return false;} else if (+ recdate = + date) {return REC ;}} return false ;};})(); 

 

The timeline can be drawn, but the Curve cannot be drawn. After searching, we find that all usedmemory values in substore are false, which is the problem. The code above is to find the date field from the store. If two times are equal, the REC data is returned to the substore.

 

Pay attention to the else if part of the For Loop and find that there are no two equal time points. Therefore, the usedmemory value in the substore is all false. The data returned by Ajax is in the format of {"usedmemory": 163576, "date": "2011 05 31 22:11:02"}. The reason for the inequality is that nowtime contains microseconds, the Ajax return value has no microsecond value, so else if (+ recdate = + date) is never true. After finding the problem, it is very easy to solve and remove the microsecond value in nowtime, nowtime can be used. setmilliseconds (0 );

 

 

Experience: the comparison of time values can be as follows:

Date = new date ();

+ The date operation can directly convert the date value to the int value. For comparison between the two date types, be sure to pay attention to the accuracy (seconds, microseconds )!