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 show charts on your website.

More »

 

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

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

A DateTime Scatter chart

[No canvas support]

This demo shows how you can use date/time values as x-axis values with the Scatter chart. Although it's a Scatter chart it can also show a line that connects the points, as you can see on the example to the right. The chart has two datasets, one of which is set to be drawn as being stepped.

The date/time format parsing in RGraph is done by the RGraph.parseDate function internally and this function is quite versatile in the formats that it accepts.

This means that you are free to use many different formats for the date/time values that you supply. Some of the different formats that are accepted are shown in the source code below.

For smaller screens, the text size is reduced and the css float is reduced.


This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.scatter.js"></script>
Put this where you want the chart to show up:
<div style="float: right">
    <canvas id="cvs" width="600" height="200">[No canvas support]</canvas>
</div>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):
<script>
    // The first dataset - the set of points that are drawn on
    // to the chart. Note the different formats of the date/time
    // values.
    data1 = [
        ['2012-02-12 15:51:55', 5],
        ['2012-03-01 21:45',10],
        [],
        [],
        ['August 15 2012',7],
        ['15 Nov 2012', 16]
    ];
    
    // The second set of points that are drawn on to the chart
    data2 = [
        ['5th January 2012 12:45', 6],
        ['2012 Mar 05 09:45',17],
        ['2012/05/05 12:48:45',13],
        ['2012/09/09 15:45:45',19],
        ['2012/12/31 23:59:59',2]
    ];

    new RGraph.Scatter({
        id: 'cvs',
        data: [data1, data2],
        options: {
            // Stipulate the start of year (ie the minimum value of the chart)
            xaxisScaleMin: '2012-01-01',
            
            // Stipulate the end of year (ie the maximum value of the chart)
            xaxisScaleMax: '2012-12-31 23:59:59',

            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            yaxis: false,
            line: true,
            lineLinewidth: 1,
            
            // The value can either be a boolean (ie true or false) or an
            // array of booleans - with one entry per dataset.
            lineStepped: [false, true],

            // Here are some more Line configuration properties
            lineShadowColor: '#999',
            lineShadowBlur: 15,
            lineShadowOffsetx: 0,
            lineShadowOffsety: 0,

            // Configure the background grid
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            
            tickmarksStyle: 'circle',
            tickmarksSize: 8,
            responsive: [
                {maxWidth: null,width:600,height:200,options:{textSize:12},parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth: 900,width:400,height:200,options:{textSize:10},parentCss:{'float':'none',textAlign:'center'}}
            ]
        }
    
    // Draw the chart and add some responsive capabilities so that it fits well on smaller
    // screens
    }).draw();
</script>