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

[andreat]

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.).

[jsakalos]

Did you try to set majorTickSteps?

[andreat]

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

[andreat]

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?

[jsakalos]

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.

[andreat]

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...

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();
    }

  })

});

[jsakalos]

Thank you. Moving the thread to Bugs.