PDA

View Full Version : Line series chart with time and numeric axis does not work



sarabjeetd
4 Mar 2012, 2:48 AM
I have a line chart with time as x-axis and numeric y-axis and line series. The store is a simple format with name, data1 and date fields. When the chart is drawn, both y and x axis are drawn but I dont see the line series.
Please help.


The code is shown below :

Chart Panel class


Ext.define('DiagApp.view.desktop.shared.ProbeBarChartPanel', {
extend: 'DiagApp.view.desktop.shared.BaseChartPanel',
alias: 'widget.Shared_ProbeBarChartPanel',
requires: [ 'DiagApp.store.ProbeChartStore', 'Ext.chart.*', 'Ext.Date'],
autoScroll: true,
layout: 'fit',
title: 'Bar Charts',
initComponent: function() {
console.log("BarChartPanel: initComponent()");
this.items =
[{ xtype: 'container',
layout: 'fit',
items:
[
{
xtype: 'chart',
animate: true,
insetPadding: 20,
store: 'DiagApp.store.ProbeChartStore',
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1'],
maximum: 20,
minimum: 0,
constrain: false,
label: {
renderer: Ext.util.Format.numberRenderer('0')
},
title: 'Values'

},
{
type: 'Time',
position: 'bottom',
fields: 'date',
title: 'Time',
grid: true,
dateFormat: 'm d',
fromDate: new Date('1/1/2011'),
toDate: new Date('1/4/2011'),
constrain: false,
step : [Ext.Date.DAY, 1]

}

]
,
series: [
{
type: 'line',
axis: 'left',
xField: ['date'],
yField: ['data1'],
showMarkers: true,
fill: true,
markerConfig: {
type: 'cross',
size: 8,
radius: 8,
'stroke-width': 4
}
}
]
}]
}];
this.callParent(arguments);
},

});




ProbeChartStore.js


Ext.define('DiagApp.store.ProbeChartStore', {
extend: 'Ext.data.Store',
autoLoad: true,
proxy : {
type: 'ajax',
url: 'app/data/ProbeStore.json',
reader : {
type: 'json',
root: 'success',
idProperty: 'name'
}
},
fields: [ 'name',
{ name: 'data1', type : 'int' },
{ name: 'date', type : 'date', dateFormat: 'YYYYmmdd' }
]

});





ProbeChart.json

{ "success" : "true" ,

"results" : [
{ "name": "latency", "data1": 5 , "date" : "20110102" },
{ "name": "latency", "data1": 15 , "date" : "20110103" }
]
}

mitchellsimoens
4 Mar 2012, 7:17 AM
I have moved this to the Ext JS 4 Q&A forum, please post in the appropriate forum.

steenole
15 Mar 2012, 4:40 AM
Try this in your series config:


axis: ['left','bottom']

For some reason, it seems to be necessary when dealing with a 'Time' axis...