PDA

View Full Version : Two-column bar chart



JonathansCorner.com
23 Mar 2011, 11:45 AM
I would like to make a two-column bar chart proof of concept; a non-ExtJS example of a multi-column bar chart is at the top left example of http://www.highcharts.com/.

At present, from looking at the charts demo, I am able to get basically a blank, white-with-light-blue-border rectangular area on my page, but no data plotted into it. The JavaScript console doesn't show any errors.

How can I make a two-column bar chart?

Thanks,

JonathansCorner.com
24 Mar 2011, 6:47 AM
My code is:


<div id="os_container"></div>
<div id="vol_container"></div>
<script language="JavaScript" type="text/javascript"
src="/extjs/adapter/ext/ext-base.js">
</script>
<script language="JavaScript" type="text/javascript"
src="/extjs/ext-all.js">
</script>
<script language="JavaScript" type="text/javascript">
<!--
Ext.chart.Chart.CHART_URL = '/extjs/resources/charts.swf';
var os = new Ext.data.JsonStore({
"fields": ["month", "2010", "2011"],
"data": [
{"month": "Current", "2010": 1, "2011": 3},
{"month": "February", "2010": 2, "2011": 4},
{"month": "January", "2010": 1, "2011": 3},
{"month": "December", "2010": 2, "2011": 4},
{"month": "November", "2010": 1, "2011": 3},
{"month": "October", "2010": 2, "2011": 4}
]
});
var vol = new Ext.data.JsonStore({
"fields": ["month", "2010", "2011"],
"data": [
{"month": "Current", "2010": 1, "2011": 2},
{"month": "February", "2010": 3, "2011": 4},
{"month": "January", "2010": 1, "2011": 2},
{"month": "December", "2010": 3, "2011": 4},
{"month": "November", "2010": 1, "2011": 2},
{"month": "October", "2010": 3, "2011": 4}
]
});
new Ext.Panel({
iconCls: 'chart',
title: 'O/S for 2010 and 2011',
frame: true,
renderTo: 'os_container',
store: os,
width: 550,
height: 300,
layout: 'fit',
url: '/extjs/resources/charts.swf',
items: {
store: os,
xtype: 'stackedcolumnchart',
xField: 'month',
yField: '2011',
yAxis: new Ext.chart.NumericAxis({
displayName: 'Visits',
labelRenderer: Ext.util.Format.numberRenderer('0,0')
}),
series: [{type: 'line',
displayName: 'O/S 2010',
yField: '2010',
style: { color: 0x800000 }
}, {
type: 'line',
displayName: 'O/S 2011',
yField: '2011',
style: { color: 0x008000 }
}]}
});
// -->
</script>