HOWTO: Add links to your charts

• Adding tooltips to your chart
• The pseudo-event listeners
• An anchor tag around the canvas
• See also

There are a few methods of adding links to your charts or redirecting to new pages when certain user actions are triggered. The different methods are listed below.

Adding tooltips to your charts

Tooltips are regular html div tags so can contain a wide variety of html - links, video, images etc. They can be formatted with css (and there's also a specific css class that you can use to make them all appear the same - RGraph_tooltip). For example:

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,6,3,5,4],
        options: {
            textSize: 14,
            tooltips: [
                'Link 1: <a href="http://www.google.com" target="_blank" >Google</a>',
                'Link 2: <a href="http://www.yahoo.com" target="_blank" >Yahoo</a>',
                'Link 3: <a href="http://www.bing.com" target="_blank" >Bing</a>',
                'Link 4: <a href="http://news.bbc.co.uk" target="_blank" >BBC News</a>',
                'Link 5: <a href="http://www.facebook.com" target="_blank" >Facebook</a>'
            ],
            xaxisLabels: ['Google','Yahoo','Bing','BBC News','Facebook']
        }
    }).draw();
</script>

The pseudo-event listeners

As of January 2012 new pseudo-event listeners have been added. This means that you can specify a javascript function to run when a bar is clicked. The same function is called for all bars so to determine which bar has been clicked you will have to check the index of the bar, as shown below.

<script>
    //
    // This is the function that is run when a bar is clicked (for the chart defined below)
    //
    function myEventListener (e, shape)
    {
        var index = shape.dataset;

        switch (index) {
            case 0: location.href = 'http://www.google.com'; break;
            case 1: location.href = 'http://www.yahoo.com'; break;
            case 2: location.href = 'http://www.bing.com'; break;
            case 3: window.open('http://news.bbc.co.uk', '_blank'); break;
            case 4: window.open(
                'http://www.facebook.com',
                '_blank',
                'top=50,left=50,width=900,height=600'
            );
            break;
        }
    }

    new RGraph.Bar({
        id: 'cvs',
        data: [4,6,3,5,4],
        options: {
            textSize: 14,
            xaxisLabels: ['Google','Yahoo','Bing','BBC News','Facebook']
        }
    }).draw().on('click', function (e,shape)
    {
        myEventListener(e, shape);
    }).on('mousemove', function (e,shape)
    {
        return true;
    });
</script>

Note

As shown you can either assign a URL to the location.href, or alternatively, you can use the window.open function. The difference is largely immaterial, however, the window.open function does mean you can open the link in a new window, which is something you can't do if you use location.href. You can also specify what browser controls are shown (eg the address bar/buttons etc) and the size and the position of the window if you use the window.open method.

Update 2017

As of 2017 the way to add an event listener is to use the on function - which can be chained (like methods in jquery). This makes your code flow better and more readable. Here's an example of this:

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [4,6,3,5,4],
        options: {
            textSize: 14,
            xaxisLabels: ['Google','Yahoo','Bing','BBC News','Facebook']
        }
    }).draw().on('click', function (e, shape)
    {
        var url;

        switch (shape.dataset) {
            case 0: url = 'https://www.google.com';    break;
            case 1: url = 'https://www.yahoo.com';     break;
            case 2: url = 'http://www.bing.com';       break;
            case 3: url = 'http://www.bbc.co.uk/news'; break;
            case 4: url = 'https://www.facebook.com';  break;
            break;
        }
        
        window.open(url, '_blank', 'top=50,left=50,width=900,height=600');

    }).on('mousemove', function (e, shape)
    {
        return true;
    });
</script>
    

An anchor tag around the canvas

This method is rather simple but is mentioned for completeness. You can of course link the whole of the canvas in your html page. The disadvantage with this (though you might not see it as a disadvantage) is that the link will apply to the whole canvas, margins included, and that there can only be one URL.

<a href="http://www.google.com" target="_blank">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
</a>

You could also use the canvas click event to trigger some javascript code and then redirect, like this:

<canvas
    id="cvs"
    width="600"
    height="250"
    onclick="alert('Redirecting...');location.href='http://www.google.com'"
>[No canvas support]</canvas>

Note

The canvas with the anchor tag may be affected by other charts on the page that change the pointer. To get around this you can remove the object from the ObjectRegistry like this:

// Remove it from the ObjectRegistry so it isn't affected by other canvas tags
RGraph.ObjectRegistry.remove(obj);

See also

• How to turn a label into a link
  This howto document shows you how to turn one of your labels into a working link. It relies on you using the textAccessible option - which previously was the default, but as of version 6.08 it no longer is so you will need to enable it.