Loading multiple series into a chart

Question

I want to have many LineSeries in one of my ExtJS4 charts.

I have a store that looks like this:

Ext.define('DayStatistics', {
    extend:'Ext.data.ArrayStore',
    fields:[ 'date', 'count_impressions', 'count_clicks', 'count_conversions' ]
});

And depending on a how many entries I select in my grid view, I want to draw the three lines ('count_impressions', 'count_clicks', 'count_conversions') for each entry, meaning each entry in the grid view, would have a couple entries in the store.

At the moment I have the following function that gets called with every selectionchange:

loadChart: function (Model, records) {
    var removeChart = function (chart) {
        var series = chart.series.items, surface = chart.surface,
            length = series.length, len = surface.groups.keys.length,
            array = [];
        for (var i = 0; i < length; i++)
            array = Ext.Array.merge(array, series[i].group.keys);
        chart.series.clear();
        for (var j = 0; j < array.length; j++)
            surface.items.getByKey(array[j]).destroy();
        for (var t = 0; t < len; t++)
            surface.groups.items[t].destroy();
    };

    var chart = Ext.getCmp('advertiserstatisticlist.advertiserChart');
    removeChart(chart);

    for (var record in records) {
        chart.series.add({
            type:'line',
            xField:'date',
            yField:'count_impressions'
        });
        chart.store.loadData(records[record].data.days, true);
        chart.refresh();
    }
}

With that I can change which entry in the grid view to graph. But thats not what I would like to have. How can I show "multiple stores"?

I thought about one solution, which I have to try: "Linearizing" the store, by doing something like this { date : 'impressions_1', 'impressions_2', ... }. But that solution would just shift the complexity of the hack from charting to the store.

Answer 1

The first half of the question makes sense but this paragraph throws it off:

With that I can change which entry in the grid view to graph. But thats not what I would like to have. How can I show "multiple stores"?

I assume you mean multiple series.

It's should be pretty simple to do that using the selectionchange handler you included in the question:

loadChart: function (selModel, records) {

    var chart = Ext.getCmp('advertiserstatisticlist.advertiserChart');

    chart.series.clear();

    for (var record in records) {
        chart.series.add({
            type:'line',
            xField:'date',
            yField: record.get(/*[whatever you named the "series name" field in the grid store]*/)
        });
    }
    chart.redraw();
}