HOWTO: Display DateTime values

• Supported Date/Time formats
• Update August 2020: Inclusion of Moment.js
• Update June 2022: Alternative to Moment - Day.js
• Update August 2025: The PHP-style date and time functions
• Related links

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 this by using the Scatter chart - and if required you can also specify a line to be drawn as well to connect the marks.

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 time values are omitted they will 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:

• 2012/05/12 15:51:55
• 2012-05-12 15:51:55
• 2012/05/12 21:45
• 2012-05-12
• April 15 2012
• 15 Nov 2012
• 15:51:55 (today's date is used)

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.

Update June 2022: Alternative to Moment - Day.js

The Moment.js project has, for some time, been put into a "maintenance-only" status. You can find out about it on the Moment.js website This means that whilst you can happily still use the Moment.js library that's bundled with RGraph or that you get from the Moment.js website, you can also consider using an alternative such as Day.js.

The Day.js library can be found on cdnjs.com and there's a link below to the libraries and the chart shown here is using the Day.js library.

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.1/dayjs.min.js"><script>

<script src="/libraries/RGraph.common.core.js" ></script>
<script src="/libraries/RGraph.common.dynamic.js" ></script>
<script src="/libraries/RGraph.scatter.js" ></script>

new RGraph.Scatter({
    id: 'cvs',
    data:[
        ['2012/01/15 11:59:59', 1,'red'],
        ['2012/02/15 11:59:59',6,'red'],
        ['March 15 2012',12,'red'],
        ['15 April 2012', 16,'red'],
        ['2012-05-15',15,'red'],
        ['2012-06-15T11:59:59',9,'red'],
        ['2012-07-15T11:59:59',17,'red'],
        ['2012-08-15T11:59:59',6,'red'],
        ['2012-09-15T11:59:59',12,'red'],
        ['2012-10-15T11:59:59',3,'red'],
        ['2012-11-15T11:59:59',7,'red'],
        ['2012-12-15T11:59:59',7,'red'],
    ],

    options: {

        // Set the start value to be the beginning of the year. If they're omitted time values default to 00:00:00
        xaxisScaleMin: dayjs('2012/01/01'),

        // Set the end value to the end of the year
        xaxisScaleMax: dayjs('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,
        colorsDefault: ['red'],
        lineColors: ['red'],
        lineLinewidth:2,
        tickmarksColor: 'red',
        tickmarksStyle: 'circle',
        tickmarksSize: 10,
        textSize: 14,
        responsive: [
            {maxWidth: null, width:600,height: 250,options:{textSize: 14}},
            {maxWidth: 900, width:400,height: 200,options:{textSize: 10}}
        ]
    }
}).draw();

Related links

• The API documentation for the RGraph.PHP.time() function
• The API documentation for the RGraph.PHP.date() function
• https://developer.mozilla.org/...
• The Moment.js website
• The Day.js homepage
• Day.js on cdnjs.com

Update August 2025: The PHP-style date and time functions

There are now some PHP-style date and time functions that are included in the core RGraph library that make handling dates and times much easier. These, naturally, mimic the PHP date and time functions and are much easier to use than the JavaScript variants. These functions are part of the RGraph core library so no external code is necessary. You can see information on these functions and examples of how to use them in the API documentation. Together with the RGraph.parseDate function these make handling dates and times in RGraph a very simple affair.

• The RGraph.PHP.time function
• The RGraph.PHP.date function
• The RGraph.parseDate function