How to display date/time values on a Scatter chart

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

Note

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


<script>
    window.onload = (function ()
    {
        var 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
                xmin: '2012/01/01',
    
                // Set the end value to the end of the year
                xmax: '2012/12/31 23:59:59',

                labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                line: true,
                lineColors: 'gray',
                tickmarks: 'circle',
                textAccessible: true,
                textSize: 14
            }
        }).draw()
    })
</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).

Related links

RGraph on social media