sencha touch dynamic chart

Question

in Sencha Touch 2.1 how can I load the chart dynamically from json, also with dynamic fields store, chart axes, and chart series,

I know maybe this is too much, but I need to display many kind of data, If I create 1 chart component for each display means I have to create more than 15 chart component, I'm afraid it get bloated

Answer 1

I did not complete this dynamically, but I made it seem dynamic.

I first request a user to fill out a form.

I also have multiple panels that holds charts with empty stores, in the form of several different layouts.

Based on the user's form, I show and hide panels, or chart when they need to be displayed only after loading the store with the required data.

yes it is bulky, and they are static, but I found it slightly easier to handle than dynamically loading.

EDIT

After thinking,

have you tried a function like

function dynamiccharts(var1, var2, var3){

return Ext.chart.Chart({
 ....
})

}

variables would include things like data, url, store or etc.

Answer 2

This is my example creating a chart on controller inside a panel: axis, series, store fields, url are became parameters, PAR_FORM is global variable showing the difference between views, I'm using this code for another chart (Column, Pie)

Ext.define("Geis.controller.app", {
extend: "Ext.app.Controller",
config: {
    refs: {
        mainview: 'mainview',
        barchartview: 'barchartview',
        btnShowChartAnggaran: '#btnShowChartAnggaran'
    },
    control: {
        'btnShowChartAnggaran': {
            tap: 'onShowChartAnggaran'
        }
    }
}

createBarChart: function(fields, series_xfield, series_yfield, url) {
    this.getBarchartview().add(new Ext.chart.CartesianChart({
        id: 'barchartgenerateview',
        store: {
            fields: fields,
            proxy: {
                type: 'jsonp',
                url: url
            }
        },
        background: 'white',
        flipXY: true,
        colors: Geis.view.ColorPatterns.getBaseColors(),
        interactions: [
            {
                type: 'panzoom',
                axes: {
                    "left": {
                        allowPan: true,
                        allowZoom: true
                    },
                    "bottom": {
                        allowPan: true,
                        allowZoom: true
                    }
                }
            },
            'itemhighlight'
        ],
        series: [{
            type: 'bar',
            xField: series_xfield,
            yField: series_yfield,
            highlightCfg: {
                strokeStyle: 'red',
                lineWidth: 3
            },
            style: {
                stroke: 'rgb(40,40,40)',
                maxBarWidth: 30
            }
        }],
        axes: [{
            type: 'numeric',
            position: 'bottom',
            fields: series_yfield,
            grid: {
                odd: {
                    fill: '#e8e8e8'
                }
            },
            label: {
                rotate: {
                    degrees: -30
                }
            },
            maxZoom: 1
        },
        {
            type: 'category',
            position: 'left',
            fields: series_xfield,
            maxZoom: 4
        }]
    }));
    Ext.getCmp('barchartgenerateview').getStore().load();
},

onShowChartAnggaran: function() {
    this.getBarchartview().remove(Ext.getCmp('barchartgenerateview'), true);
    if (PAR_FORM == 'Dana Anggaran') {
        this.createBarChart(['kode', 'keterangan', 'nilai'], 'keterangan', 'nilai', 
            Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_dana_anggaran_json/');
    } else if (PAR_FORM == 'Alokasi Anggaran') {
        this.createBarChart(['kode', 'keterangan', 'belanja_pegawai', 'belanja_barang', 'belanja_modal'], 
            'keterangan', ['belanja_pegawai', 'belanja_barang', 'belanja_modal'], 
            Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_alokasi_json/');
    }

    this.getMainview().animateActiveItem(1, {type:'slide', direction:'left'});
}

});

base on my experiment if you want to activate the interactions features you need to set the chart id dynamically too, for example by creating Global Counter Variable