How to add links to your charts

Summary: A guide for adding links to your charts. You can add links to your charts in a number of ways - though the most common is by using tooltips.

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:

[No canvas support] 
<script>
    bar = 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.

[No canvas support] 
<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_events',
        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

Now, in 2017, the modern way to add an event listener is to use the on() function - which can be chained (like methods in jQuery). This makes your code more readable and, I think, prettier! 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 is that the link will apply to the whole canvas, margins included, and that there can only be one URL.

[No canvas support] 
<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(myBar);

See also