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.
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> bar = new RGraph.Bar({ id: 'cvs', data: [4,6,3,5,4], options: { textSize: 14, textAccessible: false, 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_events', data: [4,6,3,5,4], options: { textSize: 14, textAccessible: false, 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.
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,
textAccessible: false,
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.
<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 theObjectRegistry
like this:
// Remove it from the ObjectRegistry so it isn't affected by other canvas tags
RGraph.ObjectRegistry.remove(myBar);
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 thetextAccessible
option - but this is the default now and has been for a few releases.