How to add links to your charts

  Read comments...

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.

Tooltips

Tooltips are regular HTML DIV tags and so can contain a wide variety of HTML - links, movies, pictures 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>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,6,3,5,4],
        options: {
            textAccessible: true,
            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>'
            ],
            labels: ['Google','Yahoo','Bing','BBC News','Facebook']
        }
    }).draw();
</script>

The new 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 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, bar)
    {
        var index = bar[5];

        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;
        }
    }

    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,6,3,5,4],
        options: {
            textAccessible: true,
            textSize: 14,
            eventsClick: myEventListener,
            eventsMousemove: function (e, bar) {return true;},
            labels: ['Google','Yahoo','Bing','BBC News','Facebook']
        }
    }).draw();
</script>
Note

As shown you can either assign a URL to location.href, or alternatively you can use the window.open method. The difference is largely immaterial however the window.open method 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), the size and the position of the window if you use the window.open method.

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, gutters included, and that there can be only 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 onclick 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 ObjectRegistry like this:
// Remove it from the ObjectRegistry so it isn't affected by other canvas tags
RGraph.ObjectRegistry.remove(myBar);
Share RGraph
X

Comments