Dynamically generate axis and series in Extjs 4

Question

I want to generate Y axis dynamically based on json response. for example :

{
\"totalCount\":\"4\",
\"data\":[
    {\"asOfDate\":\"12-JAN-14\",\"eve         


        

Answer 1

I think it's a little late, but I have the answer to your question, go through the same and finally was able to find the solution.

This function works for me, send parameters:
chart: object chart-line
objective: it's reference to call the data in backend (you can omite)
xField: it's the data that I need to render in category axis

prepareChartLine: function(chart, objective, xField) {
    // the model and store structure it's only to prevent error at render       
    Ext.define('crm.model.' + objective, {
        extend: 'Ext.data.Model',
        fields: []
    });
    //you can config the store whatever you want 
    var store = Ext.create('Ext.data.Store',{
        extend      : 'Ext.data.Store',
        model       : 'crm.model.' + objective,
        proxy: {
            type: 'ajax',
            url: './php/Request.php',
            reader: {
                type: 'json',
                root: 'data'
            }
        },
        autoLoad: false
    });

    Ext.Ajax.request({
        url:'./php/Request.php',
        params:{
            instruction:'read',
            objective:objective
        },
        success: function(response){
            var data = Ext.decode(response.responseText);
            store.model.setFields(data.fields);

            //set array series
            var series = [];
            //clear series
            chart.series.clear();
            for(var field in data.fields){
                if(data.fields[field] !== xField){
                   chart.series.add({
                       type:'line',
                       xField:xField,
                       yField:data.fields[field]
                   });

                   series.push(data.fields[field]);
                }
            }

            var mAxes = chart.axes.items;
            for(var axis in mAxes){
                if(mAxes[axis].type === "Numeric"){
                    mAxes[axis].fields = series;
                    mAxes[axis].maximum = data.maximum;
                    mAxes[axis].minimum = data.minimum;
                }
            }
            chart.axes.items = [];
            chart.axes.items = mAxes;
           chart.bindStore(store);
           chart.redraw();
           chart.refresh();


           store.loadRawData(data.data, false);
        },
        failure: function(response){
            Ext.Msg.alert('GascardPay',response);
        }
    });

}

And you have to config a response JSON like this

{
    fields: [
        "Otro",
        "Otro2",
        "Otro N",
        "fecha"
    ],
    data: [
        {
            Otro: 12,
            Otro2: 2,
            Otro N: 30,
            fecha: "2015-01-03"
        },
        {
            Otro: 17,
            Otro2: 8,
            Otro N: 0,
            fecha: "2015-01-04"
        },
        {
            Otro: 32,
            Otro2: 21,
            Otro N: 3,
            fecha: "2015-01-05"
        },
        {
            Otro: 25,
            Otro2: 27,
            Otro N: 15,
            fecha: "2015-01-06"
        },
        {
            Otro: 21,
            Otro2: 6,
            Otro N: 40,
            fecha: "2015-01-07"
        }
    ],
    minimum: 0,
    maximum: 40
}