PDA

View Full Version : Using Time axis for charts



sarabjeetd
5 Mar 2012, 9:14 AM
I am looking at the chart example at
http://docs.sencha.com/ext-js/4-0/#%21/example/charts/LiveUpdates.html

When I try it with the latest Ext 4.x library, it does not work.
Does anybody know which version of the Ext library this example is working with?

-Sarab

mitchellsimoens
5 Mar 2012, 9:16 AM
To be honest I personally haven't had much luck with the time axis working for me 100%.

sarabjeetd
5 Mar 2012, 9:31 AM
I have seen numerous threads on this issue with one suggestion to use Numeric axis instead of Time axis and use a renderer for the date labels.
When I use the Numeric axis instead of Time axis, I get the following error:

[09:26:20.404] me.labels[inflections.length - 1] is undefined @ http://localhost:8080/lwdiag/extjs/src/chart/axis/Axis.js?_dc=1330968378534:389

I am using Ext JS 4.1.0 Beta 2a.
Should I use a earlier version?
Here is the code :




Ext.define('DiagApp.view.desktop.shared.ProbeBarChartPanel', {
extend: 'DiagApp.view.desktop.shared.BaseChartPanel',
alias: 'widget.Shared_ProbeBarChartPanel',
requires: [ 'Ext.chart.*', 'Ext.Date'],
autoScroll: true,
layout: 'fit',
title: 'Bar Charts',


generateData :function() {
var data = [];

data.push({
date: 1311800196,
visits: 10
});
data.push({
date: 1311844196,
visits: 20
});
data.push({
date: 1311846214,
visits: 30
});
data.push({
date: 1311848214,
visits: 40
});

return data;

},

initComponent: function() {
console.log("BarChartPanel: initComponent()");
this.items =
[{ xtype: 'container',
layout: 'fit',
items:
[
{
xtype: 'chart',
renderTo: Ext.getBody(),
defaults:{hideMode: 'offsets', layout: 'fit'},
id: 'chartCmp',
animate: true,
insetPadding: 20,
store: '',
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['visits'],
maximum: 100,
minimum: 0,
roundToDecimal: false,
//constrain: true,
title: 'Values'

},
{
type: 'Numeric',
position: 'bottom',
fields: ['date'],
title: 'Time',
minimum: 1311800196, // Same as the first point
maximum: 1311848214, //Same as the last point
roundToDecimal: false,
grid: true,
label: {
renderer: function(value) {
var date = new Date(value * 1000);
return Ext.Date.format(date, "H:i") + "\n" + Ext.Date.format(date, "M j") ;
}
}
//aggregateOp: 'sum',
//dateFormat: 'y M d',
//fromDate: new Date(2011,0,1),
//toDate: new Date(2011,0,7),
//constrain: true,
//step : [Ext.Date.DAY, 1]

}

]
,
series: [
{
type: 'line',
axis: 'left',
xField: 'date',
yField: 'visits',
showMarkers: true,
tips: {
//width: "6em",
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('visits') + '@' + Ext.Date.format(new Date(storeItem.get('date')*1000), 'H:i'));
}
}
}
]
}]
}];

this.callParent(arguments);
},


refreshChart: function() {

var chart = this.items.get(0).items.get(0);

chart.store = Ext.create('Ext.data.JsonStore', {
fields: ['date', 'visits']
});

var dataList = this.generateData();
chart.store.loadData(dataList);
chart.redraw();

}



});