MENU
.net Powerful JavaScript charts
About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.18, 1st June 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

Download »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

HOWTO: Display DateTime values

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:

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