How to display date/time values on a Scatter chart

[No canvas support]

Displaying date/time values can be done using the Scatter chart. This chart (not the Line chart) allows the X axis to be scaled and as a result you can specify a minimum date value, a maximum date value and then specify appropriate X values for your data. - You can see an example using Scatter chart - and if required you can also specify a line to be drawn as well. The example here shows how a line can be drawn.

Note

With Internet Explorer you must use the slash (/) as a date separator - not the hyphen (-)


<script>
        scatter = new RGraph.Scatter({
            id: 'cvs',
            data:[
                ['2012/02/12 15:51:55', 5],
                ['2012/04/01 21:45',10],
                ['April 15 2012',20],
                ['15 Nov 2012', 13],
                ['2012-12-01',20],
                ['2012-12-31T20:10:10',19]
            ],
            options: {

                // Set the start value to be the beginning of the year. If they're omitted time values default to 00:00:00
                xaxisScaleMin: '2012/01/01',
    
                // Set the end value to the end of the year
                xaxisScaleMax: '2012/12/31 23:59:59',
                
                xaxis: false,
                xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                yaxis: false,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                line: true,
                lineCcolors: 'gray',
                tickmarksStyle: 'circle',
                textSize: 14
            }
        }).trace();
    })
</script>

Supported Date/Time formats

The underlying date/time parsing uses Date.parse() so all formats that this function supports are usable. Examples of the different formats are:

The range of the Date.parse() function goes as far back as January 1 1970 00:00:00 UTC. You can read more about the Date.parse() function on the Mozilla developer website (link below).

Update August 2020: Inclusion of Moment.js

From the August 2020 release the Moment.js library is now included with RGraph to make date handling easier to do. The Moment.js library is a date/time handling library which makes parsing and manipulating dates and times much easier. This is an example of using the Moment.js library along with RGraph in order to give the start and end dates to a Scatter chart:

new RGraph.Scatter({
    id: 'cvs',
    data: data,
    options: {
        tickmarksSize: 10,
        xaxisTickmarksCount: 12,
        xaxisScaleMin: moment('2020-01-01'),
        xaxisScaleMax: moment('2020-01-01').add(1, 'year'),
        backgroundGridVlines: false
    }
}).draw();

To include the Moment.js library in your page you have to add the following HTML code to your page:

<script src="RGraph.common.moment.js"></script>

To get more information on Moment.js and read the documentation you can visit the Moment.js website .

Related links