1. #1
    Sencha User alessandro.rossini's Avatar
    Join Date
    Oct 2012
    Location
    Oslo, Norway
    Posts
    2
    Vote Rating
    0
    alessandro.rossini is on a distinguished road

      0  

    Default Unanswered: Sencha Touch 2.1: line charts and derived fields

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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So you want to grab data from one store and put it on another store?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User alessandro.rossini's Avatar
    Join Date
    Oct 2012
    Location
    Oslo, Norway
    Posts
    2
    Vote Rating
    0
    alessandro.rossini is on a distinguished road

      0  

    Default


    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.