ExtJS5-DynamicChart

/*global Ext:false */
Ext.application({
    name: 'ChartExample',
    launch: function() {
        Ext.create('Ext.panel.Panel', {
            layout: 'fit',
            minWidth: 650,
            height: 500,
            items: [{
                xtype: 'cartesian',
                animate: true,
                legend : {
                    docked : 'bottom'
                },
                store: Ext.create('Ext.data.Store', {
                    autoLoad : true,
                    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                    proxy: {
                        type: 'ajax',
                        url: 'sample.json',
                        reader : {
                            type : 'json'
                        }
                    }
                }),
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    fields: ['data1'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                    grid: true,
                    minimum: 0
                }, {
                    type: 'category',
                    position: 'bottom',
                    fields: ['name'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    }
                }],

                initComponent : function() {
                    var me = this;

                    me.store.on('load', function(store, records, successful, eOpts) {
                        var fields = me.extractFields(records, ['id','name']);
                        me.setUpChart(fields);
                    });

                    me.callParent();
                },

                setUpChart : function(fields) {
                    var me = this;

                    var colors = ['#F00', '#0F0', '#00F', '#0FF', '#F0F', '#FF0'];

                    me.setSeries(fields.map(function(field, index) {
                        return me.createSeries({
                            xField: 'name',
                            yField: field,
                            title : [ me.camelToTitle(field) ],
                            colors : [ colors[index] ]
                        });
                    }));
                },

                extractFields : function(records, ignore, loop) {
                    ignore = ignore || [];
                    var fieldMap = {};
                    Ext.Array.every(records, function(record) {
                        var data = record.data || {};
                        for (var field in data) {
                            fieldMap[field] = true;
                        }
                        return loop;
                    });
                    return Object.keys(fieldMap).filter(function(field) {
                        return ignore.indexOf(field) == -1;
                    }).sort();
                },

                createSeries : function(config) {
                    return Ext.apply({
                        type: 'line',
                        highlight: {
                            size: 7,
                            radius: 7
                        }
                    }, config);
                },

                camelToTitle : function(str, delimiter) {
                    return str.replace(/([A-Z][a-z]+)/g, ' $1') // Words beginning with UC
                        .replace(/([A-Z][A-Z]+)/g, ' $1')       // "Words" of only UC
                        .replace(/([^A-Za-z ]+)/g, ' $1')       // "Words" of non-letters
                        .trim()                                 // Remove any leading/trailing spaces
                        .replace(/[ ]/g, delimiter || ' ');     // Replace all spaces with the delim
                }
            }],
            renderTo: Ext.getBody()
        });
    }
});

/** === Data ===
[{
    'name': 'metric one',
    'data1': 10,
    'data2': 12,
    'data3': 14,
    'data4': 8,
    'data5': 13
}, {
    'name': 'metric two',
    'data1': 7,
    'data2': 8,
    'data3': 16,
    'data4': 10,
    'data5': 3
}, {
    'name': 'metric three',
    'data1': 5,
    'data2': 2,
    'data3': 14,
    'data4': 12,
    'data5': 7
}, {
    'name': 'metric four',
    'data1': 2,
    'data2': 14,
    'data3': 6,
    'data4': 1,
    'data5': 23
}, {
    'name': 'metric five',
    'data1': 27,
    'data2': 38,
    'data3': 36,
    'data4': 13,
    'data5': 33
}]
*/