Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    27
    Vote Rating
    0
    andreat is on a distinguished road

      0  

    Default Is it possible to have the labels on a Time Axis align to minute/hour/etc boundaries?

    Is it possible to have the labels on a Time Axis align to minute/hour/etc boundaries?


    Is there any way to configure the chart to show the labels on a Time Axis on even boundaries? For example, if I'm showing a chart with 5 minutes of data, and I set the steps to every 1 minute, I want the labels to show at 10:00:00, 10:01:00, 10:02:00, etc. regardless of what the first timestamp is in the graph. If the first timestamp is 10:00:20, I get points at (10:00:20, 10:01:20, 10:02:20, etc.).

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    377
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Did you try to set majorTickSteps?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    27
    Vote Rating
    0
    andreat is on a distinguished road

      0  

    Default


    I'm not sure how majorTickSteps is supposed to help, but I did just try setting it to 5 and it didn't make any difference - the documentation applies that you have to set a min and max in order for this to apply, but I'm using a Time Axis so I'm using fromDate and toDate. I did go ahead and try setting min & max to the same values I'm using for from/toDate, but then I only get a label on the beginning and the end of the axis and the graph goes blank...

    type: 'Time',
    position: 'bottom',
    fields: ['date'],
    dateFormat: dateFormat,
    fromDate: this.startIntervalDate,
    toDate: this.endIntervalDate,
    //step: [ dateStepUnit, dateStepCount.valueOf() ],
    minimum: this.startIntervalDate,
    maximum: this.endIntervalDate,
    majorTickSteps: 5,
    minorTickSteps: 1

  4. #4
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    27
    Vote Rating
    0
    andreat is on a distinguished road

      0  

    Default


    Also, another related problem is the labels aren't even 1 minute apart. With this setting:
    step: ['m', 1]
    and 5 minutes of data, I get labels about every 50 seconds.


    With:
    step: ['s', 30]
    and 5 minutes of data, I get labels about every 27 seconds.

    Am I doing something wrong, or is this broken?

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    377
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    From what you say I'm prone to believe that it is a bug - step should be correct. Can you prepare a simple showcase? I would then move this thread to bugs.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    27
    Vote Rating
    0
    andreat is on a distinguished road

      0  

    Default Code Example to reproduce problem...

    Code Example to reproduce problem...


    Here is an example where the steps show every 50 seconds instead of every 1 minute. For some reason the chart was showing up blank when I set the toDate and fromDate, so I had to reconfigure it after it was initially drawn. Not sure if that's another bug or what...

    Code:
    Ext.Loader.setConfig({enabled:true});
    Ext.require(['*']);
    Ext.onReady(function(){
     
    
    /**
     * @class Test3
     *
     * One stacked area chart Test with time data
     *
     */
    Ext.define('Test3', {
        extend:'Ext.container.Container',
        alias:"widget.test3",
        padding:'0 0 0 0',
        autoScroll:true,
        layout:{type:'fit', align:'stretch'},
    
        initComponent:function () {
            Ext.define('TestTime', {
                extend:'Ext.data.Model',
                fields:[
                    {name:'time', type:'date', dateFormat:'d-m-Y H:i:s'},
                    'value',
                    'value1'
                ]
            });
            var testTimeStore1 = Ext.create('Ext.data.Store', {
                model:'TestTime',
                data:[
                    {time:"07-04-2012 08:00:20", value:2, value1:12},
                    {time:"07-04-2012 08:00:40", value:1, value1:6},
                    {time:"07-04-2012 08:01:00", value:7, value1:5},
                    {time:"07-04-2012 08:01:20", value:6, value1:6},
                    {time:"07-04-2012 08:01:40", value:1, value1:1},
                    {time:"07-04-2012 08:02:00", value:6, value1:4},
                    {time:"07-04-2012 08:02:20", value:1, value1:1},
                    {time:"07-04-2012 08:02:40", value:5, value1:1},
                    {time:"07-04-2012 08:03:00", value:12, value1:2},
                    {time:"07-04-2012 08:03:20", value:1, value1:12},
                    {time:"07-04-2012 08:03:40", value:3, value1:4},
                    {time:"07-04-2012 08:04:00", value:2, value1:9},
                    {time:"07-04-2012 08:04:20", value:4, value1:3},
                    {time:"07-04-2012 08:04:40", value:7, value1:4},
                    {time:"07-04-2012 08:05:00", value:1, value1:6},
                    {time:"07-04-2012 08:05:20", value:3, value1:7}
                ]
            });
    
            var chart1 = Ext.create("Ext.chart.Chart", {
                id:"chart1",
                flex:1,
                height:500,
                shadow:true,
                store:testTimeStore1,
                legend:{
                    position:'right'
                },
                animate:false,
                mask:'horizontal',
                axes:[
                    {
                        type:'Numeric',
                        minimum:0,
                        maximum:14,
                        position:'left',
                        fields:['value', 'value1'],
                        title:'Y something'
                    },
                    {
                        type:'Time',
                        position:'bottom',
                        fields:['time'],
                        title:'Minutes',
                        dateFormat:"H:i:s",
                        constrain: true,
                        //Not working - Another bug?   
                        //fromDate: new Date(1341414020000),
                        //toDate:   new Date(1341414300000),
                        step:[Ext.Date.MINUTE, 1]
                    }
                ],
                series:[
                    {
                        //fake series which just shows the fill..
                        type:'area',
                        stacked: true,
                        axis:['left', 'bottom'],
                        fill:true,
                        xField:'time',
                        yField:['value', 'value1']
                    }
                ]
            });
            Ext.apply(this, {
                items:[
                  chart1
                ]
            });
            this.callParent(arguments);
        }
    });
    
    
    Ext.application({
        name:'',
        autoCreateViewport:false,
    
        launch:function () {
            var me = this,
            viewport = Ext.create('Ext.container.Viewport'),
            mainView = Ext.create("Ext.Container", {
                        items:[
                           { xtype: 'test3' }
                        ]
            });
            viewport.add(mainView);
            viewport.show();
    
          // If I try to set fromDate and toDate before I draw the chart, the chart is blank (???), so doing it here instead 
          mainView.items.items[0].items.items[0].axes.items[1].fromDate = new Date(1341414020000);
          mainView.items.items[0].items.items[0].axes.items[1].toDate = new Date(1341414320000);
          mainView.items.items[0].items.items[0].redraw();
        }
    
      })
    
    });

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    377
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Thank you. Moving the thread to Bugs.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


Thread Participants: 1