HOWTO: Add links to your charts

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.

1. 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 - OfficeExcel_tooltip). For example:

<script>
    var bar = new OfficeExcel.Bar('cvs', [4,6,3,5,4]);
    bar.Set('chart.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>']);
    bar.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
    bar.Draw();
</script>

2. 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.

<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 OfficeExcel.Bar('cvs', [4,6,3,5,4]);
    bar.Set('chart.events.click', myEventListener);
    bar.Set('chart.events.mousemove', function (e, bar) {e.target.style.cursor = 'pointer';});
    bar.Set('chart.labels', ['Google','Yahoo','Bing','BBC News','Facebook']);
    bar.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.

3. 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.

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