Sencha Touch 2.1: line charts and derived fields

[alessandro.rossini]

Dear all,

I am developing a sample application with Sencha Touch 2.1. The application stores generic items, each having a name and a date, and shows the count of items per year in a line chart.

I have defined the model and the store as follows:

Ext.define('App.model.Item', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'name', type: 'string'},
            {name: 'date', type: 'date'}
        ]
    }
});

Ext.define('App.store.Items', {
    extend: 'Ext.data.Store',
    config: {
        model: 'App.model.Item',
        data: [
            {name: 'First item', date: '2010-01-01'},
            {name: 'Second item', date: '2010-06-01'},
            {name: 'Third item', date: '2011-01-01'},
            {name: 'Fourth item', date: '2011-03-01'},
            {name: 'Fifth item', date: '2011-06-01'},
            {name: 'Sixth item', date: '2011-09-01'}
        ]
    }
});

I have also defined the line chart as follows:

Ext.define('App.view.ItemLineChart', {
    extend: 'Ext.chart.Chart',
    requires: [
        'Ext.chart.axis.Numeric',
        'Ext.chart.axis.Category',
        'Ext.chart.series.Line'
    ],
    config: {
        store: {
            fields: ['year', 'count'],
            data: [
                {year: 2010, count: 2},
                {year: 2011, count: 4}
            ]
        },
        axes: [
            {
                type: 'numeric',
                position: 'left'
            },
            {
                type: 'category',
                position: 'bottom'
            }
        ],
        series: [
            {
                type: 'line',
                xField: 'year',
                yField: 'count',
                style: {
                    stroke: 'black'
                }
            }
        ]
    }
});

In this sketch of definition, I have provided the data for the year and count fields manually. In the actual definition, I would like to derive the data for the same fields from the Items store.

How would you tackle this problem?

Best regards,
Alessandro Rossini

[mitchellsimoens]

So you want to grab data from one store and put it on another store?

[alessandro.rossini]

Not exactly. I have a store with the following data:

{name: 'First item', date: '2010-01-01'},
{name: 'Second item', date: '2010-06-01'},
{name: 'Third item', date: '2011-01-01'},
{name: 'Fourth item', date: '2011-03-01'},
{name: 'Fifth item', date: '2011-06-01'},
{name: 'Sixth item', date: '2011-09-01'}

and I would like to show the count of items per year in a line chart.

A possibility may be to query the store to derive the following data:

{year: 2010, count: 2},
{year: 2011, count: 4}

and use it in the line chart, but I am not sure what is the best way to do it.

Another possibility may be to define the line chart using a Time axis together with a segmenter, but this feature is not very well documented yet.