ExtJs4 to ExtJs5 Upgrade: GroupedColumn Chart is not working - extjs

Question

I am new to Extjs5. I am upgrading extJs4 to ExtJs 5. I am trying to implement a groupedColumn chart but no data shows up only the axises are visible. Even I am not getting any error.
My code is as follows:
Ext.define('Result', {
extend: 'Ext.data.Model',
fields: [
{ name: 'state', type: 'string', mapping:0 },
{ name: 'product', type: 'string', mapping:1 },
{ name: 'quantity', type: 'int', mapping:2 }
]
});
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Result',
groupField: 'state',
data: [
['MO','Product 1',50],
['MO','Product 2',75],
['MO','Product 3',25],
['MO','Product 4',125],
['CA','Product 1',50],
['CA','Product 2',100],
['WY','Product 1',250],
['WY','Product 2',25],
['WY','Product 3',125],
['WY','Product 4',175]
]
});
Ext.define('Ext.chart.series.AutoGroupedColumn', {
extend: 'Ext.chart.series.Bar',
type: 'autogroupedcolumn',
alias: 'series.autogroupedcolumn',
gField: null,
constructor: function( config ) {
this.callParent( arguments );
// apply any additional config supplied for this extender
Ext.apply( this, config );
var me = this,
store = me.chart.getStore(),
// get groups from store (make sure store is grouped)
groups = store.isGrouped() ? store.getGroups().items : [],
// collect all unique values for the new grouping field
groupers = store.collect( me.gField ),
// blank array to hold our new field definitions (based on groupers collected from store)
cmpFields = [];
// first off, we want the xField to be a part of our new Model definition, so add it first
cmpFields.push( {name: me.xField } );
// now loop over the groupers (unique values from our store which match the gField)
/* for( var i in groupers ) {
// for each value, add a field definition...this will give us the flat, in-record column for each group
cmpFields.push( { name: groupers[i], type: 'int' } );
}*/
for (var i = 0; i < groupers.length; i++) {
var name = groupers[i];
cmpFields.push({name:name,type:'number'});
}
// let's create a new Model definition, based on what we determined above
Ext.define('GroupedResult', {
extend: 'Ext.data.Model',
fields: cmpFields
});
// now create a new store using our new model
var newStore = Ext.create('Ext.data.Store', {
model: 'GroupedResult'
});
// now for the money-maker; loop over the current groups in our store
for( var i = 0; i < groups.length; i++ ) {
// get a sample model from the group
var curModel = groups[ i ].items[ 0 ];
// create a new instance of our new Model
var newModel = Ext.create('GroupedResult');
// set the property in the model that corresponds to our xField config
newModel.set( me.xField, curModel.get( me.xField ) );
// now loop over each of the records within the old store's current group
for( var x = 0; x < groups[ i ].items.length; x++) {
// get the record
var dataModel = groups[ i ].items[ x ];
// get the property and value that correspond to gField AND yField
var dataProperty = dataModel.get( me.gField );
var dataValue = dataModel.get( me.yField );
// update the value for the property in the Model instance
newModel.set( dataProperty, dataValue );
// add the Model instance to the new Store
newStore.add( newModel );
}
}
// now we have to fix the axes so they work
// for each axes...
me.chart.axes.every( function( item, index, len ) {
// if array of fields
if( typeof item.getFields()=='object' ) {
// loop over the axis' fields
for( var i in item.fields ) {
// if the field matches the yField config, remove the old field and replace with the grouping fields
if( item.getFields(i)==me.yField ) {
Ext.Array.erase( item.getFields(), i, 1 );
Ext.Array.insert( item.getFields(), i, groupers );
break;
}
}
}
// if simple string
else {
// if field matches the yField config, overwrite with grouping fields (string or array)
if( item.getFields()==me.yField ) {
item.setFields(groupers);
}
}
});
// set series fields and yField config to the new groupers
me.fields,me.yField = groupers;
// update chart's store config, and re-bind the store
me.chart.store = newStore;
me.chart.bindStore( me.chart.store, true );
// done!
}
})
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
legend: {
position: 'right'
},
axes: [
{
type: 'numeric',
position: 'left',
fields: ['quantity'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Quantity',
grid: true,
minimum: 0
},
{
type: 'category',
position: 'bottom',
fields: ['state'],
title: 'State'
}
],
series: [
{
type: 'autogroupedcolumn',
axis: 'left',
highlight: true,
xField: 'state',
yField: 'quantity',
gField: 'product'
}
]
});
I have used Ext.chart.series.Bar in place of Ext.chart.series.Column as Ext.chart.series.Column no more valid in ExtJs 5. I also have made other minor essential changes required to make my code compatible to ExtJs 5. You can also check this example on https://fiddle.sencha.com/#fiddle/hvk .
I have already spent 3 days on it. Please help!! Thanks in advance.

Answer 1

#Samir, If you want a Grouped Chart which is non-stacked use stacked: false property in series. Modify the code of #MonicaOlejniczak as:
legend :{
docked: right
}
series: {
.......
........
stacked: false,
}
This should solve your problem.