PDA

View Full Version : Chart Samples - How to add a Dual Y axis...is it possible?



chrisrichardson
15 Sep 2010, 1:05 PM
I have a line chart using the chart samples as a guideline. Is it possible to add a second y-axis...or is anyone aware of an extension to achieve this?

The code below produces the attached graph, and I would like to display the pinload value on a right axis. Temperature is on the left axis.

Thanks,

Chris



Ext.onReady(function(){
var xstore = new Ext.data.JsonStore({
fields:['datetime', 'exttemp', 'inttemp', 'pinload'],
data: [
{datetime: '13/09/2010 00:00:00', exttemp: '17', inttemp: '15', pinload: '2.4'},
{datetime: '13/09/2010 01:00:00', exttemp: '15.9', inttemp: '14.5', pinload: '1.3'},
{datetime: '13/09/2010 02:00:00', exttemp: '15.4', inttemp: '13.5', pinload: '1.4'},
{datetime: '13/09/2010 03:00:00', exttemp: '14.7', inttemp: '13', pinload: '2.2'},
{datetime: '13/09/2010 04:00:00', exttemp: '14.1', inttemp: '13', pinload: '3.7'},
{datetime: '13/09/2010 05:00:00', exttemp: '13.6', inttemp: '12', pinload: '5.7'},
{datetime: '13/09/2010 06:00:00', exttemp: '13.8', inttemp: '12', pinload: '7.7'}

]
});

new Ext.Panel({
iconCls:'chart',
title: 'Pin Load vs Temp',
frame:true,
renderTo: 'extjschart',
//wid,
height:300,
layout:'fit',

items: {
xtype: 'columnchart',
store: xstore,
url:'/online/js/ext/resources/charts.swf',
xField: 'datetime',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Pin Load',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
tipRenderer : function(chart, record, index, series){
if(series.yField == 'inttemp'){
return record.data.datetime + ' Internal Temp: ' + Ext.util.Format.number(record.data.inttemp, '0,0') ;
}else{
return record.data.datetime + ' External Temp: ' + Ext.util.Format.number(record.data.exttemp, '0,0');
}
},
chartStyle: {
padding: 10,
animationEnabled: true,
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xeeeeee}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {color: 0x69aBc8, length: 4},
minorTicks: {color: 0x69aBc8, length: 2},
majorGridLines: {size: 1, color: 0xdfe8f6}
}
},
series: [{
type: 'line',
displayName: 'Internal Temp',
yField: 'inttemp',
style: {
//image:'bar.gif',
//mode: 'stretch',
color:0x99BBE8
}
},{
type:'line',
displayName: 'External Temp',
yField: 'exttemp',
style: {
color: 0x15428B
}
}]
}
});

})