PDA

View Full Version : Extra Data Points in Chart



jmayer
18 Nov 2011, 11:57 AM
On a chart, I have a line series that only displays the values 130 and 30 and I noticed when the data rises from 30 to 130 or drops from 130 to 30, an extra point is generated in between the rise or drop. I doubled checked the table which stores the values for the series and it only contains the values 130 and 30.

Does the chart create extra points on sudden rises or falls? Or, am I doing something wrong?

Here is how I'm generating the series in the controller:

var params = { Fnct: 'GetPensByChart', ChartId: dcrChart.chart.get('idDataChartRecorders') };
var store = new DCR.store.Pens();

sender.series.clear();
sender.axes.items[0].fields = new Array();

store.load({
callback: function(records, operation, success){
store.each(function(record) {
if (record.get('Visible') == 1){
sender.series.add({
type: 'line',
axis: 'left',
highlight: {
size: 7,
radius: 7,
},
markerConfig: {
type: 'circle',
fill: record.get('Color') != "" ? record.get('Color') : '#00ff00',
radius: record.get('Width'),
size: record.get('Width'),
'stroke-width': 0,
},
selectionTolerance: 2,
showInLegend: true,
showMarkers: true,
style: {
fill: record.get('Color') != "" ? record.get('Color') : '#00ff00',
stroke: record.get('Color') != "" ? record.get('Color') : '#00ff00',
'stroke-width': record.get('Width'),
},
tips: {
renderer: function(storeItem, item) {
this.setTitle(item.value[1]);
},
},
title: record.get('Name'),
xField: 'Timestamp',
yField: record.get('DataField'),
});

//index 0 is y-axis
sender.axes.items[0].fields.push(record.get('DataField'));
}
});
},
params: params,
});

mitchellsimoens
18 Nov 2011, 2:41 PM
Can you provide a locally runnable test case? Meaning your store not load externally but use the data config on the store.

jmayer
21 Nov 2011, 7:12 AM
I narrowed my project down so the chart isn't created dynamically and it only uses a local store. Well, I couldn't reproduce the original problem I stated but I stumbled into another one (see attached screenshot).

To generate the store I'm doing this:

chart_DataChartRecorder.store = new DCR.store.RawDatas();

var count = 0;
var timestamp = dcrChart.startRange.getTime() / 1000;
var records = new Array();

while (timestamp <= dcrChart.endRange.getTime() / 1000) {
var rawData = new DCR.model.RawData({ Timestamp: timestamp,
Value3: count % 1000 != 0 ? 130 : 30,
});

records.push(rawData);

count += 1;
timestamp += 10;
}

chart_DataChartRecorder.store.loadData(records);

As you can see in the code snippet I'm only generating the values 130 and 30. I've uploaded all the code for the test case I created.

jmayer
6 May 2013, 5:52 AM
I forgot to add an answer. Anyways sometime in 2012, I looked at the Ext.chart.series.Line class and in the drawSeries function a shrink function is called when the number of data points exceeds the width of the chart's bbox as seen here:

ln = xValues.length;
if (ln > bbox.width) {
coords = me.shrink(xValues, yValues, bbox.width);
xValues = coords.x;
yValues = coords.y;
}

so the extra point was really an average between 130 and 30 caused by the shrink function. To fix this, I commented out the shrink code.