PDA

View Full Version : Chart axis labels



svenna
19 Nov 2010, 2:34 AM
Hi,

I'm trying to create a chart of claims pr month. I want to include 13 months in the chart (current month and last twelve).

I'm getting the data from a json-store where I have the fields:
yearmonth (data: 200911, 200912, 201001,....201011)
month (data: 11,12,01,...11)
count (data: 3,3,6,0,...3)

Now to the issue. I want month to be displayed on the X-axis. yearmonth is included as the true unique id pr month, but the labels should be without the year.

When scaling this down to week you really see the problem, it's not enough room for year in every label. The data is also redundant since the user always know what year we are looking at.

I've also tried just using the month field as the x-axis, but even though the json data have to distinct entries the chart seem to overwrite the data from 200911 with the data from 201011 and include it in the position of 200911.

I've tried playing around with xField as config param on linechart and series, but the on in series just overwrites the on in linechart. I feel like it's missing a xLabel and yLabel config parameter in linechart.

sample code:

{
xtype: 'linechart',
store: store,
url: '<?php print $pageconfig['RelPath'].'js/'.$Settings['Js']['Libs']['ExtJs']; ?>/resources/charts.swf',
xLabel: 'yearmonth',
xField: 'month',
yField: 'count',
yAxis: new Ext.chart.NumericAxis({
displayName: 'claims',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
series: [{
type: 'line',
displayName: 'Antall',
yField: 'antall',
xField: 'yearmonth'
},{
type: 'line',
displayName: 'Reparasjon',
xField: 'yearmonth',
yField: 'rep'
},{
type: 'line',
displayName: 'Deler',
xField: 'yearmonth',
yField: 'deler'
}]
}

svenna
19 Nov 2010, 3:21 AM
This particular sample can be solved with, since I know that year is always 4 digits (until the year AD 10000 bug ;) )


xAxis: new Ext.chart.CategoryAxis({
labelRenderer:function(value){
return Ext.util.Format.substr(value,4,2);
}
})


However, I hope ExtJs/Sencha have a better approach for solving the problem