Sencha Charts using Store data - Sencha touch

Question

Here I have the following JSON data , using this I have to create the Chart View.

 Ext.data.JsonP.callback12({"totalCount":0,"success":true,"message":"Successfully retrieved data for report #1",
"content": {
"fields":["name","2014","2013","2012"],
"data":[{"name":"1","2012":208.95,"2013":229.92,"2014":0},
{"name":"2","2013":265.92,"2014":0,"2012":0},
{"name":"3","2012":227.98,"2013":558.13,"2014":0},
{"name":"4","2012":390,"2013":282.09,"2014":0},
{"name":"5","2013":461.1},
{"name":"6","2012":396.8,"2013":427.2,"2014":0},
{"name":"7","2012":305.48,"2013":110.76,"2014":0},
{"name":"8","2012":379.35,"2013":428.46,"2014":0},
{"name":"9","2012":206.5,"2013":535.35,"2014":0},
{"name":"10","2012":376,"2013":168.51,"2014":0},
{"name":"11","2012":275.28,"2013":231.93,"2014":0},
{"name":"12","2012":195.75,"2013":340.94,"2014":0}]}})

With the above JSON I am trying draw a chart, now the problem is,the chart works fine if I give rootProperty: 'content.data' in my store and add static fields (fields : [2014,2013,2012]) in my view. But I want my fields to be added dynamically from the store giving rootProperty: 'content', so that I can use both fields and data in charts(axes and series). I am adding my Chart View.Please help on how to add the above fields and data to my chart.

View

Ext.define('Sample.view.ChartsView', {
   extend: 'Ext.Panel',
   xtype: 'myreportsview',

  requires: ['Ext.chart.axis.Numeric', 'Ext.data.JsonStore', 'Ext.chart.CartesianChart'],
  config: {
    title: 'Reports',
    iconCls: 'icon-stats',
    layout: 'fit',
    fullscreen: true,
    items: [
        {
            xtype: 'chart',
            style: 'background:#fff',
            store: 'YearlyReports',
            animate: true,
            theme: 'category1',
            legend: {
                position: 'bottom'
            },
            axes: [
                {
                    type: 'numeric',
                    position: 'left',
                    fields: ['2012', '2013', '2014'], -- these fields should be added from store
                    title: 'Purchases',
                    minorTickSteps: 1,
                    grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                        }
                    },
                    style: {
                        axisLine: false,
                        estStepSize: 20,
                        stroke: '#ddd',
                        'stroke-width': 0.5
                    },

                }, 
                {
                    type: 'category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year',
                    style: {
                        estStepSize: 1,
                        stroke: '#999'
                    }
                }
            ],
            series: [
                {
                    type: 'line',
                    xField: 'name',
                    yField: '2012',
                    highlightCfg: {
                        scale: 7
                    },
                    axis: 'left',
                    style: {
                        smooth: true,
                        stroke: '#94ae0a',
                        lineWidth: 3,
                        shadowColor: 'rgba(0,0,0,0.7)',
                        shadowBlur: 10,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3
                    },
                    marker: {
                        type: 'circle',
                        stroke: '#94ae0a',
                        fill: '#94ae0a',
                        lineWidth: 2,
                        radius: 4,
                        shadowColor: 'rgba(0,0,0,0.7)',
                        shadowBlur: 10,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3,
                        fx: {
                            duration: 300
                        }
                    }
                }, 
                {
                    type: 'line',
                    smooth: true,
                    xField: 'name',
                    yField: '2013',
                    highlightCfg: {
                        scale: 7
                    },
                    axis: 'left',
                    style: {
                        stroke: '#a61120',
                        lineWidth: 3,
                        shadowColor: 'rgba(0,0,0,0.7)',
                        shadowBlur: 10,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3
                    },
                    marker: {
                        type: 'circle',
                        stroke: '#a61120',
                        fill: '#a61120',
                        lineWidth: 2,
                        radius: 4,
                        shadowColor: 'rgba(0,0,0,0.7)',
                        shadowBlur: 10,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3,
                        fx: {
                            duration: 300
                        }
                    }
                }, 
                {
                    type: 'line',
                    smooth: true,
                    xField: 'name',
                    yField: '2014',
                    highlightCfg: {
                        scale: 7
                    },
                    axis: 'left',
                    style: {
                        fill: "#115fa6",
                        stroke: "#115fa6",
                        fillOpacity: 0.6,
                        miterLimit: 3,
                        lineCap: 'miter',
                        lineWidth: 2
                    },
                    marker: {
                        type: 'circle',
                        stroke: '#0d1f96',
                        fill: '#115fa6',
                        lineWidth: 2,
                        radius: 4,
                        shadowColor: 'rgba(0,0,0,0.7)',
                        shadowBlur: 10,
                        shadowOffsetX: 3,
                        shadowOffsetY: 3,
                    }
                }
            ]
        }
    ]
}
});

Answer 1

This might be useful to those who want to add chart dynamically. created store ('YearlyReports') with above data.

chart in panel

           {
            xtype: 'chart',
            id: 'yearlyChart',
            style: 'background:#fff',
            store: {},
            animate: true,
            theme: 'category1',
            legend: {
                position: 'bottom'
            }

wrote following painted function in config-listeners

       listeners: {
        painted: function() {
            var store = Ext.getStore('YearlyReports').getAt(0).data,
                chart = Ext.getCmp('yearlyChart'),
                seriesArray = new Array(),
                axesArray = new Array(),
                fields = new Array(),
                lineColors = ['#115fa6','#94ae0a','#a61120'],
                markerColors = ['#94ae0a', '#a61120', '#115fa6'];

            for(var j=1;j<store.fields.length;j++) {

                fields.push(store.fields[j]);
                seriesArray.push(
                    new Ext.chart.series.Line({
                        type: 'line',
                        yField: [store.fields[j]],
                        xField: 'name',
                        stacked: false,
                        style: {
                            smooth: true,
                            stroke: lineColors[j-1],
                            lineWidth: 3,
                            shadowColor: 'rgba(0,0,0,0.7)',
                            shadowBlur: 10,
                            shadowOffsetX: 3,
                            shadowOffsetY: 3
                        },
                        marker: {
                            type: 'circle',
                            stroke: markerColors[j-1],
                            fill: markerColors[j-1],
                            lineWidth: 2,
                            radius: 4,
                            shadowColor: 'rgba(0,0,0,0.7)',
                            shadowBlur: 10,
                            shadowOffsetX: 3,
                            shadowOffsetY: 3,
                            fx: {
                                 duration: 300
                            }
                         }
                }));
            }
            axesArray.push(
                new Ext.chart.axis.Numeric({   
                    type: 'numeric',
                    position: 'left',
                    fields: fields,
                    title: 'Purchases',
                    minorTickSteps: 1,
                    grid: {
                        odd: {
                            opacity: 1,
                            fill: '#ddd',
                        }
                    },
                    style: {
                        axisLine: false,
                        estStepSize: 20,
                        stroke: '#ddd',
                        'stroke-width': 0.5
                    },
                })
            );

            axesArray.push(
                new Ext.chart.axis.Category({
                    type: 'category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year',
                    style: {
                        estStepSize: 1,
                        stroke: '#999'
                    }
                })
            );
            var data = {"data" : store.data};
            chart.setStore(data);
            chart.setAxes(axesArray);
            chart.setSeries(seriesArray);
        }
    },