Date/Time Axes


Overview

You can use Date/Time values as input data for chart using Date Time Axes. In this tutorial we will show how to do this.

Declare

You can make both X and/or Y axis a DateTime axis, to do that, set scale type to DateTime:

    chart.yScale(anychart.scales.dateTime());

Sample Range Bar With Y DateTime Axis

Lets create a simple Range Bar chart with DateTime Y Axis. For the first we have to choose data to be shown:

Task Name Task Start Task End
Development 01/01/2000 02/15/2002
Internal Testing 06/01/2001 07/01/2003
Field Test 02/25/2002 07/01/2003
Licensing 07/01/2003 07/01/2004

Data is collected, now we adjust settings for ticks on the scale:

    chart.yScale(anychart.scales.dateTime());
    chart.yScale().ticks().interval(1);
    chart.yScale().minorTicks().interval(0, 2);

Now we need to create data for range bars. Here it is:

    chart.rangeBar([
        {x: 'Development', low: Date.UTC(2000, 01, 01), high: Date.UTC(2002, 02, 15)},
        {x: 'Internal Testing', low: Date.UTC(2001, 06, 01), high: Date.UTC(2003, 07, 01)},
        {x: 'Field Tests', low: Date.UTC(2002, 02, 25), high: Date.UTC(2003, 07, 01)},
        {x: 'Licensing', low: Date.UTC(2003, 07, 01), high: Date.UTC(2004, 07, 01)}
    ]);

Now we will create DateTime Y Axis and set it to show process in years (explained later):

chart.yScale(anychart.scales.dateTime());

That's it - all we have to add are axes and chart titles and put all we've done together:

    chart.title().text('X113 Destroyer Development Plan');          // set chart title
    chart.yScale(anychart.scales.dateTime());                       // set yScale type
    chart.yScale().ticks().interval(1);                             // set interval for major ticks equal to one year
    chart.yScale().minorTicks().interval(0, 2);                     // set interval for minor ticks equal to two months
    
    //set data
    chart.rangeBar([
        {x: 'Development', low: Date.UTC(2000, 01, 01), high: Date.UTC(2002, 02, 15)},
        {x: 'Internal Testing', low: Date.UTC(2001, 06, 01), high: Date.UTC(2003, 07, 01)},
        {x: 'Field Tests', low: Date.UTC(2002, 02, 25), high: Date.UTC(2003, 07, 01)},
        {x: 'Licensing', low: Date.UTC(2003, 07, 01), high: Date.UTC(2004, 07, 01)}
    ]);
    
    chart.yAxis()
        .orientation('top')                                         // set y axis position
        .title()
            .text('Time Plan');                                     // set y axis title
    chart.xAxis().title().text('Tasks');                            // set x axis title

That's it - chart with DateTime Y Axis is ready:

JsFiddle Playground

Major and Minor Interval Ticks

For datetime axes you can set Major and Minor Ticks using .ticks() and .minorTicks() methods of scale:

    chart.yScale().ticks().interval(1);
    chart.yScale().minorTicks().interval(0, 2);

Ticks can define years, months, days, hours, minutes and seconds. The order of defining ticks is: years interval, months interval, days interval, hours interval, minutes interval, seconds interval. The order is quite strict. You may not define following intervals of the one, you need, but you have to define previous ones as 0. If you want to define more, than one instance of intervals, just adjust the one, you need.

Sample Line Chart with Y DateTime Axis

In this sample we will create a Line Chart with DateTime X Axis and set major and minor interval ticks and intervals. Y Axis will be Logarithmic - to show small values in the first years and big values in last year.

JsFiddle Playground

You are looking at an outdated 7.3.0 version of this document. Switch to the 8.0.1 version to see the up to date information.