PDA

View Full Version : Chart TimeAxis display problem



shivani
18 Jan 2010, 3:25 AM
In 3.1.0 release Reference: examples/charts/chart.js - I modified the sample code to have Feb 08 name information in the third row instead of last as follows:



var store = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
data: [
{name:'1 Jul 07', visits: 245000, views: 3000000},
{name:'1 Aug 07', visits: 240000, views: 3500000},
{name:'1 Feb 08', visits: 620000, views: 7500000},
{name:'1 Sep 07', visits: 355000, views: 4000000},
{name:'1 Oct 07', visits: 375000, views: 4200000},
{name:'1 Nov 07', visits: 490000, views: 4500000},
{name:'1 Dec 07', visits: 495000, views: 5800000},
{name:'1 Jan 08', visits: 520000, views: 6000000}
]
});


And then modified the extra simple (2nd chart's ) x axis to use the TimeAxis class as follows:


xAxis: new Ext.chart.TimeAxis({
displayName: 'Interval (month/year)',
labelRenderer: function(date){ return date.format("M Y"); }
})


However, when I do that, I do not see the data on x axis appearing according to the time?
Instead I see the following :

http://techzen.files.wordpress.com/2009/05/test.gif

I have seen a few other examples that are directly instantiating LineChart and then adding TimeAxis to the xAxis - but in this example it is being used as an xtype. ( xtype: 'linechart')

Please can someone give me a working example using this sample code so that I can understand the usage and the concepts.

Thanks!,
Shivani

shivani
1 Feb 2010, 2:25 AM
Anyone has any updates on this?

pouniok
8 Feb 2010, 5:40 AM
Got the same problem...

I'll try to specify that name is a date type in the fields definition and add a reader.

That's the only thing I could imagine to fix this.

pouniok
8 Feb 2010, 6:04 AM
Worked for me!


You need to specifiy the date format in the fields definition :



var fields = [ {name: 'name', type: 'date', dateFormat: 'M Y'}, ...];


Hope that it'll work for you!

mystix
11 Feb 2010, 9:18 AM
glad you discovered that in the end.

always remember:
all raw Store data are treated as js strings by default unless an appropriate type config is specified in the Record's data.Field.

neok_2010
18 Oct 2010, 11:21 AM
glad you discovered that in the end.

always remember:
all raw Store data are treated as js strings by default unless an appropriate type config is specified in the Record's data.Field.

i have the same problem but whit a stackedbarchart, the error is :
To use a BarSeries object, the horizontal axis of the chart it appears within must be an IOriginAxis.

mauriceb
1 Mar 2011, 7:52 AM
I tried even by supplying the dateFormat but still the same problem. Kindly check. Source code below. Thanks


Ext.onReady(function(){


var store = new Ext.data.JsonStore({

fields: [{name:'Resource',type:'string'},
{name:'Idle', type: 'date', dateFormat: 'Y m d'},
{name:'Active',type:'date', dateFormat: 'Y m d'},
{name:'Busy',type:'date', dateFormat: 'Y m d'},
{name:'Down',type:'date', dateFormat: 'Y m d'}],
data: [
{Resource: "ColorPrinter ", Idle: '2011 03 01', Active: '2011 03 05', Busy: '2011 03 15', Down: '2011 03 26'},
{Resource: "BW Printer ", Idle: '2011 03 03', Active: '2011 03 06', Busy: '2011 03 08', Down: '2011 03 31'},
{Resource: "Insertor ", Idle: '2011 03 02', Active: '2011 03 03', Busy: '2011 03 20', Down: '2011 03 22'},
{Resource: "Cuttor ", Idle: '2011 03 07', Active: '2011 03 08', Busy: '2011 03 25', Down: '2011 03 28'}
]
});


var start = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
end = start.add(Date.DAY, 30);


new Ext.Panel({
renderTo: 'container',
width: '100%',
height: 300,
items: {
xtype: 'stackedbarchart',
store: store,
width: '100%',
height: 300,
yField: 'Resource',


xAxis: new Ext.chart.TimeAxis(
{ labelRenderer: function(date) { return date.format('Y m d');}
}),



yAxis: new Ext.chart.CategoryAxis({
labelSpacing: 5

}),
series: [{
xField: 'Idle',
displayName: '[Hrs] Idle'
},{
xField: 'Active',
displayName: '[Hrs] Active'
},{
xField: 'Busy',
displayName: '[Hrs] Busy'
},{
xField: 'Down',
displayName: '[Hrs] Down'
}]
}
});
});

mauriceb
2 Mar 2011, 2:18 AM
Nice article, could you kindly give an example of stackedbarchart using TimeAxis? For me the stackedbarchart is working fine if I follow NumericAxis, CategoryAxis but when I try w/ TimeAxis w/ format, the chart is not being displayed. I have also given stackingEnable:true option. Appreciate your effort/reply. Thanks