Note: This is a cross post at:extjsForum
since I got no answer there,so I ask here.
Anyone who decide to answer this post can see the forum first to make sure if the question has been answer. :)
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 : ' ',
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?