I am using ext do draw charts in the browser,I meet a problem:
I want to draw two lines in one chart, so I use the ColumnChart, this is my data:
var store = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
data: [
{name:'Jul 07', visits: 245, views: 3000000},
{name:'Aug 07', visits: 240, views: 3500000},
{name:'Sep 07', visits: 355, views: 4000000},
{name:'Oct 07', visits: 375, views: 4200000},
{name:'Nov 07', visits: 490, views: 4500000},
{name:'Dec 07', visits: 495, views: 5800000},
{name:'Jan 08', visits: 520, views: 6000000},
{name:'Feb 08', visits: 620, views: 7500000}
]
});
Since the Visit data is much le开发者_Go百科ss than views.
So the line which respresent the visit is too close to the xaxis, is there any idea?
Thanks for your reply, I decide to make them the same scale. BTW, I have another question,hope you can give some suggesion:
To create yAxis with different scales in ExtJs4 you can use the left and right axis.
xtype: 'chart',
width: 400,
height: 300,
store: myStore,
axes: [
{
//title: 'Size',
type: 'Numeric',
position: 'left',
fields: ['sizeInBytes'],
minimum: 0
},{ /// NEW yAxis Scale ///
//title: 'Run Time',
type: 'Numeric',
position: 'right',
fields: ['runTimeMin'],
minimum: 0
},{
//title: 'Date',
type: 'Time',
position: 'bottom',
fields: ['startTime'],
dateFormat: 'm/d/y h:i A'
}
],
series: [
{
type: 'column',
axis: 'left',
xField: 'startTime',
yField: 'sizeInBytes'
},{ /// Specify the Axis and data field to use ///
type: 'line',
axis: 'right',// <----
xField: 'startTime',
yField: 'runTimeMin' // <----
}
]
As far as I can see there are two options: 1. Add a second Y axis, with a different scale 2. Scale the larger values down
ExtJS charts- to my knowledge- doesnt offer the ability to add a second axis, though there are work arounds (see http://www.sencha.com/forum/showthread.php?72557-Ext-JS-Charts-Second-Y-Axis-Scale)
Therefore the easiest way would be to simply divide the larger values by, say, 10,000 to bring the two scale's inline, then make a note that they are in thousands.
精彩评论