Extjs 4.2 grouped bar chart with dynamic data

Question

I´m triying to generate a chart with dynamic data.

MODEL

Ext.define('App.mdlGraficaDE', {
    extend: 'Ext.data.Model',
    fields: [
    ]   
});

STORE

Ext.define('App.strGraficaDE', {
    extend: 'Ext.data.Store',
    model:  'App.mdlGraficaDE',
    autoLoad: false,
    proxy: {
        type: 'ajax', 
        api: {
            read: './data/php/Tmc_GraficaDE.php'
        },
        reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'total'
        }
    }
});

CHART OBJECT IN VIEW

var almacenGraficaDE = Ext.create('App.strGraficaDE');
var graficaDE = Ext.create('Ext.chart.Chart',{
    style: 'background:#fff',
    itemId:'graficaDE',
    margin:'10 10 10 10',
    animate: true,
    shadow: true,
    store: almacenGraficaDE,
    legend: {
        position: 'right'
    },
    axes:[
          {
              type:'Category',
              position:'bottom',
              fields:['Referencia'],
              title: 'Referencia'
          },
          {
              type:'Numeric',
              position:'left',
              fields:[],
              minimum:0,
              grid:true,
              title:'Precio Unitario'
          }
    ],
    series:[
            {
                type: 'column',
                axis: 'bottom',
                xField:'',
                yfield:[]
            }
    ]
});

I want to obtain something like the next image:

But I don´t know in what way I must return the data from the php, and if I need to do some configuration in callback section of store.load action to configure the axys and series of the chart with the received data.

Answer 1

The grouped chart as shown in the image cant be made but instead Extjs provides the stacked bar charts which i think fulfils your requirement
For datas in php just fetch the datas as shoin in the fiddle below and manage the axes and store fiels
Try this fiddle