Results 1 to 5 of 5

Thread: Chart example in documentation does not work

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    38
    Vote Rating
    1
      0  

    Default Answered: Chart example in documentation does not work

    I am so far beyond frustrated with this framework it's not even funny, what am I missing? I took this from the documentation entry and the series does not show. Can anyone suggest any good sites with 4.x tutorials, trying to learn from the documentation had been tedious at best.

    Code:
    Ext.onReady(function () {
        Ext.define('WeatherPoint', {
            extend: 'Ext.data.Model',
            fields: ['temperature', 'date']
        });
    
    
        var store = Ext.create('Ext.data.Store', {
            model: 'WeatherPoint',
            data: [
                { temperature: 58, date: new Date(2011, 1, 1, 8) },
                { temperature: 63, date: new Date(2011, 1, 1, 9) },
                { temperature: 73, date: new Date(2011, 1, 1, 10) },
                { temperature: 78, date: new Date(2011, 1, 1, 11) },
                { temperature: 81, date: new Date(2011, 1, 1, 12) }
            ]
        });
    
    
        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 400,
            height: 300,
            store: store,
            axes: [
                {
                    title: 'Temperature',
                    type: 'Numeric',
                    position: 'left',
                    fields: ['temperature'],
                    minimum: 0,
                    maximum: 100
                },
                {
                    title: 'Time',
                    type: 'Time',
                    position: 'bottom',
                    fields: ['date'],
                    dateFormat: 'ga'
                }
            ],
            series: [
                {
                    type: 'line',
                    xField: 'date',
                    yField: 'temperature'
                }
            ]
        });
    });

  2. To be honest, I have always had problems with the time axis. Switch it to Category and it will display but the axis labels aren't correct. To get around that:

    Code:
    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 400,
        height: 300,
        store: store,
        axes: [
            {
                title: 'Temperature',
                type: 'Numeric',
                position: 'left',
                fields: ['temperature'],
                minimum: 0,
                maximum: 100
            },
            {
                title: 'Time',
                type: 'Category',
                position: 'bottom',
                fields: ['date'],
                label : {
                    renderer : Ext.util.Format.dateRenderer('ga')
                }
            }
        ],
        series: [
            {
                type: 'line',
                xField: 'date',
                yField: 'temperature'
            }
        ]
    });

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,382
    Answers
    3997
    Vote Rating
    1535
      0  

    Default

    To be honest, I have always had problems with the time axis. Switch it to Category and it will display but the axis labels aren't correct. To get around that:

    Code:
    Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 400,
        height: 300,
        store: store,
        axes: [
            {
                title: 'Temperature',
                type: 'Numeric',
                position: 'left',
                fields: ['temperature'],
                minimum: 0,
                maximum: 100
            },
            {
                title: 'Time',
                type: 'Category',
                position: 'bottom',
                fields: ['date'],
                label : {
                    renderer : Ext.util.Format.dateRenderer('ga')
                }
            }
        ],
        series: [
            {
                type: 'line',
                xField: 'date',
                yField: 'temperature'
            }
        ]
    });
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    38
    Vote Rating
    1
      0  

    Default

    Could someone update the doc so the next poor noob does not lose their mind?

  5. #4
    Sencha User
    Join Date
    Jan 2008
    Posts
    26
    Answers
    1
    Vote Rating
    2
      0  

    Default

    The time axis seems to work when you give it field name, not an array:
    fields: 'date' instead of fields: ['tdate']


    Please disregard this as incorrect.

  6. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default

    There is a problem that this mothod does not really work correct but gives the right result. But if you change 12 in the example to 17 you'll see that the chart will not really change. X-axis will not really be the time axis...

Posting Permissions

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