Sencha Touch 2.1: line charts and derived fields

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:

Code:

---

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

---

Code:

---

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:

Code:

---

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

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

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

Code:

---

{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:

Code:

---

{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.