PDA

View Full Version : the labelrenderer of the time axis



m4eclipse
30 Sep 2010, 1:43 AM
The following is my core code to make a Column chart to show the visitors and bytes of my website, however I found that I can not handle the label of the xAxis.




visitAndBytesStore = new Ext.data.JsonStore(
{
fields :
[
{
name : 'time',
type : 'string'
// dateFormat : 'Y-m-d H:i:s'
}, 'visits', 'bytes' ]
});


var visitAndBytesData =
[{"time" : "2010-09-17 16:24:06","visits" : "23","bytes" : "4545"},
{"time" : "2010-09-17 02:23:33","visits" : "3233","bytes" : "3232"},
{"time" : "2010-09-17 16:23:52","visits" : "456","bytes" : "3242342"},
{"time" : "2010-09-17 15:23:52","visits" : "6456","bytes" : "2314252"} ];


visitAndByteChart = new Ext.chart.ColumnChart(
{
store : visitAndBytesStore,
xField : 'time',
// xAxis : new Ext.chart.TimeAxis(
// {
// title : 'time',
// displayName : 'time',
// labelRenderer : function(dd)
// {
// // return dd.format("m-d")+"\n"+dd.format("H:i");
// return "";
// }
// }),
yAxis : new Ext.chart.NumericAxis(
{
displayName : 'Visits',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
series :
[
{
type : 'column',
displayName : 'Bytes',
yField : 'bytes',
style :
{
color : 0x99BBE8
}
},
{
type : 'line',
displayName : 'Visits',
yField : 'visits',
style :
{
mode : 'stretch',
color : 0x15428B
}
} ]
});

visitorAndBytesChartPanel = new Ext.Panel(
{
iconCls : 'chart',
title : '&nbsp',
frame : true,
renderTo : 'bytes',
autoWidth : true,
height : 300,
layout : 'fit',
items : visitAndByteChart

});

As shown above if I use the "string" format of the "time" field, I can not handle the format of the time label in the chart, their value are too long (2010-09-20 23:00:00 is too long),so they are displayed by Automaticly chosed.
This is the result:
http://awesomescreenshot.com/0e41vu0c0
I want all of them displayed.

So I set the "time" field to "date" (Just remove the comments in the above codes),
And now the last label in the chart can not displayed completely,so is the "dot" in the chart which trig the tip event.
This is the result:
http://awesomescreenshot.com/04c1vtq94

Is there any problems?

m4eclipse
30 Sep 2010, 3:26 AM
NoBody??

m4eclipse
2 Oct 2010, 4:40 AM
Guys, I wonder why there is not body getting interested in my question??? If there are some other reasons please let me know.

m4eclipse
7 Oct 2010, 3:44 AM
What's going on? Nobody can give me a reply?

troseberry
7 Oct 2010, 6:11 AM
Never used the chart component but perhaps you can try taking a look at the extraStyle config option and try setting some additional params on the axis and get it to display the way your looking for.

darthwes
7 Oct 2010, 9:31 AM
extraStyle: {
padding: 20
}

?

m4eclipse
8 Oct 2010, 1:42 AM
Thanks, it works. Even the squre of in the chart is also uncomplete, however the label is displayed completely.