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 »

HOWTO: Get custom tickmarks on your Line or Scatter

Previously you could add tickmarks to your Line charts in RGraph by using the configuration options available to you (and you still can of course). Now though it has got much easier with the addition of the image drawing object. This is not specific to the Line chart but is a regular drawing api object which can be used to show images as tickmarks. The advantage over standard tickmarks is that these objects can be then assigned either tooltips or click/mousemove functions to provide extra interactivity.

The basic chart

Here is the chart before the image object has been added. It's just an average - quite simple - Line chart that doesn't do anything special. Next we can utilise the Line charts coordinates array in order to then use those coordinates to position the image object.

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [4,8,6,3,5,4,9,5,6,4,8,7],
        options: {
            marginInner: 15,
            shadow: true,
            linewidth: 2,
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            textSize: 14
        }
    }).draw();
</script>

The chart with the image drawing API object added

Here is the chart with the image drawing object added. It's positioned using the coordinates from the Line chart and because, by default, it's aligned to the top left, half of the width and height are removed to make it appear central. Two event listeners are then added - one to the click event so that when you click the image an alert appears - and one to the mousemove event so that the cursor changes to the hand when you move the mouse over it.

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [4,8,6,3,5,4,9,5,6,4,8,7],
        options: {
            marginInner: 15,
            shadow: true,
            linewidth: 2,
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
            textSize: 14
        }
    }).draw();

    x = line.coords[5][0] - 16
    y = line.coords[5][1] - 16
    
    // Now add the image
    img = new RGraph.Drawing.Image({
        id: 'cvs',
        x: x,
        y: y,
        src: '/images/star.png',
        options: {
        }
    }).draw().on('click', function (e, shape)
    {
        alert('This alert was triggered by the click listener');
    }).on('mousemove', function (e, shape)
    {
        return true;
    });
</script>

The Scatter chart using this technique

In the same way, the Scatter chart can be made to use this technique as shown in the example below. Here the images are drawn at the Scatter chart coordinates - thereby overwriting the normal tick marks.

<script>
    // First create the chart
    scatter = new RGraph.Scatter({
        id: 'cvs2',
        data: [[150,12],[168,34],[112,52],[23,26]],
        options: {
            xaxisScaleMax: 365,
            xaxisLabels: ['Q1','Q2','Q3','Q4'],
            textSize: 14
        }
    }).draw();



    for (i=0; i<scatter.coords[0].length; ++i) {
        
        x = scatter.coords[0][i][0] - 16
        y = scatter.coords[0][i][1] - 16
        //                 |  |  |    |
        //                 |  |  |    Remove half the width/height so the image appears centered
        //                 |  |  The X (0) and Y (1) coordinates
        //                 |  The point in the set of data
        //                 The set of data - the Scatter chart can accept more than one

        // Now add the image
        img = new RGraph.Drawing.Image({
            id: 'cvs2',
            x: x,
            y: y,
            src: i >= 2 ? '/images/star.png' : '/images/yellow_exclamation2.png',
        }).draw();
    }
</script>