1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    7
    Vote Rating
    0
    chaya is on a distinguished road

      0  

    Default Time axes not working for Ext.chart.Chart

    Time axes not working for Ext.chart.Chart


    Hi everybody,

    I encouter somes troubles to do a chart with Time axes, When i set type of the bottom axes to 'Time', line does not appear, if i set it to 'Category' that's work, but i want this to Time type for scaling data because my X value does not have the same step.

    Anyone have an idea ?

    The code below can be run in a single html page.

    Thank for reading,

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
        <head>
            <title>test</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta http-equiv="expires" content="0"/>
            <meta http-equiv="pragma" content="no-cache"/>
            <meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
            <link rel="stylesheet" type="text/css" href="http://docs.sencha.com/ext-js/4-0/resources/css/app.css">
            <script type="text/javascript" src="http://docs.sencha.com/ext-js/4-0/extjs/ext-all.js"></script>
        </head>
        <body>
            <script type="text/javascript">
                //Modèle App/model/GraphTime.js
                Ext.define('App.model.GraphTime', {
                    extend: 'Ext.data.Model',
                    fields: [ 
                        {name: 'time', type: 'date', dateFormat: 'Y-m-d H:i:s'}, 
                        {name: 'data', type:'float'} 
                    ]
                });
                
                //Magasin App/store/GraphTime.js
                //Commented to test script in standalonemode
                /*Ext.define('App.store.GraphTime', {
                    extend: 'Ext.data.Store',
                    model: 'App.model.GraphTime',
                    autoLoad: false,
                    proxy: {
                        type: 'ajax',
                        url: 'data.json',
                        reader: {
                            type: 'json',
                            model: 'App.model.GraphTime'
                        }
                    }
                });*/
                
                //Magasin App/store/GraphTime.js
                Ext.define('App.store.GraphTime', {
                    extend: 'Ext.data.Store',
                    model: 'App.model.GraphTime',
                    data: [
                           { time: '2009-08-22 00:00:00', data: 10.0 }, 
                           { time: '2009-08-22 01:00:00', data: 10.2 }, 
                           { time: '2009-08-22 02:00:00', data: 10.6 }, 
                           { time: '2009-08-22 03:00:00', data: 10.7 }, 
                           { time: '2009-08-22 04:00:00', data: 10.8 }, 
                           { time: '2009-08-22 05:00:00', data: 10.6 }, 
                           { time: '2009-08-22 06:00:00', data: 10.9 }, 
                           { time: '2009-08-22 09:00:00', data: 10.6 }, 
                           { time: '2009-08-22 12:00:00', data: 11.2 }, 
                           { time: '2009-08-22 15:00:00', data: 11.5 }, 
                           { time: '2009-08-22 18:00:00', data: 11.7 }, 
                           { time: '2009-08-22 21:00:00', data: 11.9 }
                    ]
                });
                
                //Controlleur App/controller/GraphTime.js
                Ext.define('App.controller.GraphTime', {
                    extend: 'Ext.app.Controller',
                    init: function() {
                        this.control({
                            '.gridtime': { 
                                render: this.load 
                            },
                            '.graphtime': { 
                                render: this.load 
                            },
                        });
                    }, 
                    load: function(cmp, opts) {
                        //Temporary commented because ofr example data are local
                        //cmp.store.load();
                    }
                });
                
                //Vue App/view/GridTime.js
                Ext.define('App.view.GridTime', {
                    extend: 'Ext.grid.Panel',
                    alias : 'widget.gridtime',
                    store: Ext.create('App.store.GraphTime'),
                    columns: [
                        {header:'Temps', dataIndex: 'time', flex: 1, renderer: function(date) { return Ext.Date.format(date, 'd. H'); }},
                        {header: 'Données', dataIndex: 'data'}
                    ],
                    renderTo: Ext.getBody()
                });
                
                //Vue App/view/GridTime.js
                Ext.define('App.view.GraphTime', {
                    extend: 'Ext.chart.Chart',
                    alias : 'widget.graphtime',
                    height: 300,
                    width: 600,
                    store: Ext.create('App.store.GraphTime'),
                    renderTo: Ext.getBody(),
                    axes: [{
                        type: 'Numeric',
                        position: 'left',
                        fields: 'data',
                        title: 'Température'
                    }, {
                        type: 'Time',
                        position: 'bottom',
                        fields: 'time',
                        title: 'Heure',
                        dateFormat: 'H',
                        step: [Ext.Date.HOUR, 1],
                        fromDate: Ext.Date.parse('2009-08-22 00:00:00','Y-m-d H:i:s'),
                        toDate: Ext.Date.parse('2009-08-22 23:59:59','Y-m-d H:i:s')
                    }],
                    series: [{
                        type: 'line',
                        axis: 'left',
                        xField: 'time',
                        yField: 'data'
                    }]
                });
                
                //point d'entrée de l'appli app.js
                Ext.application({
                    name: 'App',
                    autoCreateViewport: false,
                    controllers: ['App.controller.GraphTime'],
                    models: ['App.model.GraphTime'],
                    stores: ['App.store.GraphTime'],
                    views: ['App.view.GraphTime'],
                    launch: function() {
                        Ext.create('App.view.GridTime');
                        Ext.create('App.view.GraphTime');
                    }
                });
            </script>
        </body>
    </html>

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,703
    Vote Rating
    749
    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


    There are reported bugs for the time axis.
    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.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar