Results 1 to 3 of 3

Thread: Sencha Touch 2.1: line charts and derived fields

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

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    So you want to grab data from one store and put it on another store?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User alessandro.rossini's Avatar
    Join Date
    Oct 2012
    Location
    Oslo, Norway
    Posts
    2
    Vote Rating
    0
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •