PDA

View Full Version : Grouped Bar Chart



renganathan
11 Mar 2013, 11:21 PM
Hi All,

I had gone through the example for group chart

http://docs.sencha.com/ext-js/4-1/extjs-build/examples/charts/GroupedBar.html


In this example, months are represented in Y axis and values are in X axis. I want to change months as X axis and values as Y axis.

can you guys help me to do this changes ?


42313






Ext.require('Ext.chart.*'); Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']); Ext.onReady(function () { var chart = Ext.create('Ext.chart.Chart', { style: 'background:#fff', animate: true, shadow: true, store: store1, legend: { position: 'right' }, axes: [{ type: 'Numeric', position: 'bottom', fields: ['data1', 'data2', 'data3'], minimum: 0, label: { renderer: Ext.util.Format.numberRenderer('0,0') }, grid: true, title: 'Number of Hits' }, { type: 'Category', position: 'left', fields: ['name'], title: 'Month of the Year' }], series: [{ type: 'bar', axis: 'bottom', xField: 'name', yField: ['data1', 'data2', 'data3'] }] }); var win = Ext.create('Ext.Window', { width: 800, height: 600, minHeight: 400, minWidth: 550, hidden: false, maximizable: true, title: 'Grouped Bar Chart', autoShow: true, layout: 'fit', tbar: [{ text: 'Save Chart', handler: function() { Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){ if(choice == 'yes'){ chart.save({ type: 'image/png' }); } }); } }, { text: 'Reload Data', handler: function() { // Add a short delay to prevent fast sequential clicks window.loadTask.delay(100, function() { store1.loadData(generateData()); }); } }, { enableToggle: true, pressed: true, text: 'Animate', toggleHandler: function(btn, pressed) { chart.animate = pressed ? { easing: 'ease', duration: 500 } : false; } }], items: chart }); });

mitchellsimoens
13 Mar 2013, 1:21 PM
Change position from bottom to left on numeric axis. Change position from left to bottom on category axis. Change series type to column. How does that look?

Also, when you post your code can you make sure it's legible? I had to spend time to edit your code locally just so I can read it. Here is what I came up with


var chart = Ext.create('Ext.chart.Chart', {
style : 'background:#fff',
animate : true,
shadow : true,
store : store1,
legend : {
position : 'right'
},
axes : [
{
type : 'Numeric',
position : 'left',
fields : ['data1', 'data2', 'data3'],
minimum : 0,
label : {
renderer : Ext.util.Format.numberRenderer('0,0')
},
grid : true,
title : 'Number of Hits'
},
{
type : 'Category',
position : 'bottom',
fields : ['name'],
title : 'Month of the Year'
}
],
series : [
{
type : 'column',
axis : 'bottom',
xField : 'name',
yField : ['data1', 'data2', 'data3']
}
]
});
var win = Ext.create('Ext.Window', {
width : 800,
height : 600,
minHeight : 400,
minWidth : 550,
hidden : false,
maximizable : true,
title : 'Grouped Bar Chart',
autoShow : true,
layout : 'fit',
tbar : [
{
text : 'Save Chart',
handler : function () {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
if (choice == 'yes') {
chart.save({
type : 'image/png'
});
}
});
}
},
{ text : 'Reload Data', handler : function () {
// Add a short delay to prevent fast sequential clicks
window.loadTask.delay(100, function () {
store1.loadData(generateData());
});
}
},
{
enableToggle : true,
pressed : true,
text : 'Animate',
toggleHandler : function (btn, pressed) {
chart.animate = pressed ? { easing : 'ease', duration : 500 } : false;
}
}
],
items : chart
});

See how it's better?

sharath1984
4 Jun 2017, 4:25 AM
Hi,
I want to add an image on top of each grouped bar in the above chart,for example one image for decemeber,one for november etc, is it possible.

Thanks,
Sharath