About

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

New HTML datagrid

In the April 2025 release a new datagrid object was added. This makes it easy to add static or dynamic data tables to your pages. It can be used whether you use the canvas or SVG libraries or entirely standalone.

Download

Get the latest version of RGraph (version 6.22, 24th June 2025) 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.

A Line chart dashboard

Searches over time by query type

Search capacity by query type

Searches 260

Capacity usage by query

search capacity by user

This is a darker dashboard that shows multiple Line charts and also a Pie (which uses the donut option). Lots of code and css for this demo as it goes far beyond the normal single chart demos. It does show what you can achieve when you build several objects into one page though.

The stacked Lines are accompanied by a Pie chart, as already mentioned, using the donut option. There's a segment that also shows just some regular text.

You can combine any number of charts like this to create your own tailored dashboard that shows you whatever information you want to see. It's effectively just a webpage with many charts on it.

This goes in the documents header:

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.key.js"></script>
<script src="RGraph.svg.pie.js"></script>
<script src="RGraph.svg.line.js"></script>

Put this where you want the chart to show up:

<style>
    div#cc1,
    div#cc2 {
        width: 295px;
        height: 200px;
        background-color: black;
        float:left;
    }
    div#cc3 {
        width: 190px;
        height: 200px;
        background-color: black;
        float:left;
        position: relative;
    }

    div#cc3 span:nth-child(2) {
        display: inline-block;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        font-size: 40pt;
        color: #02BDD0;
    }
    
    div#cc4 {
        width: 195px;
        height: 200px;
        background-color: black;
        float:left;
    }
    
    div#cc5,
    div#cc6 {
        width: 490px;
        height: 200px;
        background-color: black;
        float:left;
    }
    
    div#cc1,
    div#cc2,
    div#cc3,
    div#cc4,
    div#cc5,
    div#cc6 {
        float: left;
    }
    
    div span:nth-child(1) {
        color: #ccc;
        font-size: 10pt;
        position: absolute;
        top: 0;
        left: 5px;
    }
</style>

<div style="position: relative; left: -10px; width: calc(100% + 20px); background-color: #181818">
    <div id="cc1">
        <span>Searches over time by query type</span>
    </div>
    <div id="cc2">
    <span>Search capacity by query type</span>
    </div>
    <div id="cc3">
        <span>Searches</span>
        <span>260</span>
    </div>
    <div id="cc4">
        <span>Capacity usage by query</span>
    </div>
    <div id="cc5">
        <span>Capacity usage by query</span>
    </div>
    <div id="cc6">
        <span>search capacity by user</span>
    </div>
    
    <div style="clear: both"></div>
</div>

This is the code that generates the chart - it should be placed AFTER the div tag:

<script>
    l1 = new RGraph.SVG.Line({
        id: 'cc1',
        data: [
            [0,8,0,0,8,0,2,8,0,0,8,1,0,6],
            [null,null,null,null,null,null,null,null,null,null,null,null,null,5],
            [15,13,12,15,13,13,15,12.5,13,14,13,12,16,17],
            [null,null,null,null,null,null,null,null,null,null,null,null,null,null]
        ],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            filled: true,
            linewidth: 2,
            colors: ['#C2BBCD','rgba(0,0,0,0)','#EFB875'],
            filledColors: ['#9894AD','red','#C8924C'],
            filledOpacity: 0.85,
            filledAccumulative: true,
            marginLeft: 25,
            marginRight: 5,
            marginTop: 35,
            marginBottom: 30,
            xaxis: false,
            yaxis: false,
            textColor: '#aaa',
            textSize: 8,
            key: ['searchapi','scheduled search','interactive search'],
            keyColors: ['#C2BBCD','red','#EFB875'],
            keyOffsety: 180,
            keyTextBackground: 'rgba(0,0,0,0)',
            keyTextColor: '#ccc',
            xaxisLabels: [
                '', '10:48',
                '', '10:50',
                '', '10:52',
                '', '10:54',
                '', '10:56',
                '', '10:58',
                ''
            ]
        }
    }).draw();



    l2 = new RGraph.SVG.Line({
        id: 'cc2',
        data: [
            [40,8,0,0,0,0,0,0,0,0,0,0,0,28],
            [4,8,1,1,5,0,1,5,0,0,5,0,0,4],
            [0,0,0,1,5,0,0,0,0,0,0,0,0,0]
        ],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            filled: true,
            linewidth: 2,
            colors: [],
            filledColors: ['#8DB26C','green','#CB6800'],
            filledOpacity: 0.85,
            filledAccumulative: true,
            marginLeft: 23,
            marginRight: 5,
            marginTop: 35,
            marginBottom: 30,
            xaxis: false,
            yaxis: false,
            textColor: '#aaa',
            textSize: 8,
            key: ['searchapi','scheduled search','interactive search'],
            keyColors: ['#8DB26C','green','#CB6800'],
            keyOffsety: 180,
            keyTextBackground: 'rgba(0,0,0,0)',
            keyTextColor: '#ccc',
            yaxisScaleUnitsPost: 'k',
            yaxisLabelsCount:3,
            xaxisLabels: [
                '', '10:48',
                '', '10:50',
                '', '10:52',
                '', '10:54',
                '', '10:56',
                '', '10:58',
                ''
            ]
        }
    }).draw();



    p1 = new RGraph.SVG.Pie({
        id: 'cc4',
        data: [70, 5,22,3],
        options: {
            colors: ['green','#a00','#CB6800','#00a'],
            donut: true,
            donutWidth: 20
        }
    }).draw();




    l5 = new RGraph.SVG.Line({
        id: 'cc5',
        data: [
            [0,9,0,0,8,0,2,8,0,0,8,1,0,6],
            [6,6,8,5,6,8,6,7,8,9,7,6,8,5],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [2,2,2,2,2,2,2,2,2,2,2,2,2,2],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [2,2,2,2,2,2,2,2,2,2,2,2,2,2],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1]
        ],
        options: {
            yaxisScaleMax: 25,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            filled: true,
            linewidth: 2,
            colors: ['#0a0','#aa0','#00a','transparent','transparent','transparent','transparent','transparent'],
            filledColors: ['#278419','#CA9B53','#A390AE','#B71700','#2D929E','#126293','#8AB269'],
            filledOpacity: 0.85,
            filledAccumulative: true,
            marginLeft: 25,
            marginRight: 5,
            marginTop: 35,
            marginBottom: 30,
            xaxis: false,
            yaxis: false,
            textColor: '#aaa',
            textSize: 8,
            key: ['searchapi','scheduled search','interactive search'],
            keyColors: ['#C2BBCD','red','#EFB875'],
            keyOffsety: 180,
            keyTextBackground: 'rgba(0,0,0,0)',
            keyTextColor: '#ccc',
            xaxisLabels: [
                '', '10:48',
                '', '10:50',
                '', '10:52',
                '', '10:54',
                '', '10:56',
                '', '10:58',
                ''
            ]
        }
    }).draw();




    l6 = new RGraph.SVG.Line({
        id: 'cc6',
        data: [
        
            [4,10,0,0,0,0,0,0,0,0,0,0,0,28],
            [40,8,1,1,5,0,1,5,0,0,5,0,0,4],
            [0,0,0,1,5,0,0,0,0,0,0,0,0,0]
        ],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            filled: true,
            linewidth: 2,
            colors: [],
            filledColors: ['#8DB26C','#5A3180','#CB6800'],
            filledOpacity: 0.85,
            filledAccumulative: true,
            marginLeft: 23,
            marginRight: 5,
            marginTop: 35,
            marginBottom: 30,
            xaxis: false,
            yaxis: false,
            textColor: '#aaa',
            textSize: 8,
            key: ['searchapi','scheduled search','interactive search'],
            keyColors: ['#8DB26C','green','#CB6800'],
            keyOffsety: 180,
            keyTextBackground: 'rgba(0,0,0,0)',
            keyTextColor: '#ccc',
            yaxisScaleUnitsPost: 'k',
            yaxisLabelsCount:3,
            xaxisLabels: [
                '', '10:48',
                '', '10:50',
                '', '10:52',
                '', '10:54',
                '', '10:56',
                '', '10:58',
                ''
            ]
        }
    }).draw();
</script>