How to display DateTime values

A guide for displaying date/time values on a Scatter chart. The Line chart has no X-axis scale and that's why the Scatter chart is used instead.

[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 the Scatter chart - and if required you can also specify a line to be drawn as well. The example here shows you how a line can be drawn.


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

        scatter = new RGraph.Scatter({
            id: 'cvs',
                ['2012/02/12 15:51:55', 5],
                ['2012/04/01 21:45',10],
                ['April 15 2012',20],
                ['15 Nov 2012', 13],
            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

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

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