PDA

View Full Version : Null values in Chart



gspyrka
19 Feb 2013, 6:22 AM
I have problem with null values in store which I give to the chart. I want to break series when the value is null and continue line when values come back to numbers. I did it in extJs3.DataPoint:




Ext.define('DataPoint', {
extend: 'Ext.data.Model',
fields: [
{name: 'time', type: 'date', dateFormat: 'Y-m-d H:i'},
{name: 'val',mapping:'value', type: 'float', useNull:true, convert: function(v, record){ if(v == null){return undefined}return parseInt(v)}}, ],
idProperty: 'time',
persistenceProperty: 'data'
});


Store:






store = Ext.create('Ext.data.Store', {
model: 'DataPoint',
proxy:{
type: 'ajax',
url: linePanel.url,
reader: {
type: 'json',
root: 'data'
}
},
sorters: [{
property: 'time'
}],
format: 'json',
idProperty: 'time',
root: 'data'
});


Chart:






Ext.create('Ext.chart.Chart', {
renderTo: linePanel.columnChart.body.dom,
store: store,
axes: [
{
type: 'Category',
position: 'bottom',
fields: ['time'],
},
{
title: linePanel.unit,
type: 'Numeric',
position: 'left',
minimum: 0,
maximum: 100,
majorTickSteps: 1

}
],
series: [
{ xField: 'time',
yField: 'val',
type: 'line',
highlight : true,
smooth: true,
style: {
stroke: '#00b300',
'stroke-width': 5,
color: '#00b300',
},
markerConfig: {
type: 'circle',
stroke: '#00b300',
color: '#00b300'
}

}
]
});

scottmartin
19 Feb 2013, 11:09 AM
Have a look at the following: (uses false)
http://jsfiddle.net/tqdJ8/

Scott.

gspyrka
19 Feb 2013, 11:38 PM
Works great, thanks!