HOWTO: Add interactivity to your charts
- The chart without the event listeners
- The chart with the click event listener added
- The chart with the mousemove event listener added
- Standard DOM1 events
Starting from January 2012 adding events to your charts has become much easier.
You can now use the on
function to add click
, mousemove
,
mouseover
or mouseout
event listeners to your charts (or the RGraph
custom events).
This makes adding interactivity to your charts very easy. Here's a step-by-step example of using the events.
The chart without the event listeners
Here's the basic chart without any event listeners defined:
<script> new RGraph.Bar({ id: 'cvs', data: [4,6,5,3,8,9], options: { xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss','Luis'], textSize: 14 } }).draw(); </script>
The chart with the click event listener added
The first step would be to add the click event listener. This function is run when a bar is clicked. The function that you specify is passed two arguments - the (standard) event object, and a second shape object comprised of coordinates that describe the shape. This object also contains the RGraph chart object and the index of the shape. The shape object contains named properties that you can use like this:
shape.object
shape.index
shape.dataset
shape.sequentialIndex
<script> new RGraph.Bar({ id: 'cvs2', data: [4,6,5,3,8,9], options: { xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss', 'Jan'], textSize: 14 } }).draw().on('click', function (e, shape) { var index = shape.dataset; switch (index) { case 0: alert('The first bar was clicked'); break; case 1: alert('The second bar was clicked'); break; case 2: alert('The third bar was clicked'); break; case 3: alert('The fourth bar was clicked'); break; case 4: alert('The fifth bar was clicked'); break; case 5: alert('The sixth bar was clicked'); break; } }); </script>
The chart with the mousemove event listener added
The second step is to add the mousemove
event listener. By returning a
value that can cast to a positive value (eg true
or 1
) from the
handler function, this allows us to change the cursor to a
pointer
when the mouse is moved over a bar. Because this is
a common operation the pointer
is automatically changed back to the previous state when it is moved away
from the bar.
<script> new RGraph.Bar({ id: 'cvs', data: [4,6,5,3,8,9], options: { xaxisLabels: ['Kev','Louise','Pete','Gary','Fliss','Jan'], textSize: 14 } }).draw().on('click', function (e, shape) { var index = shape.dataset; switch (index) { case 0: alert('The first bar was clicked'); break; case 1: alert('The second bar was clicked'); break; case 2: alert('The third bar was clicked'); break; case 3: alert('The fourth bar was clicked'); break; case 4: alert('The fifth bar was clicked'); break; case 5: alert('The sixth bar was clicked'); break; } }).on('mousemove', function (e, shape) { return true; }); </script>
Standard DOM1 events
In October 2012 RGraph was reverted to dom2
events. This frees up the
dom1
events for you to use. You may find that these
are far easier and less verbose to use.
<script> window.onmousedown = function (e) { } window.onmouseup = function (e) { } obj.canvas.onmousedown = function (e) { } obj.canvas.onmouseup = function (e) { } obj.canvas.onclick = function (e) { } obj.canvas.onmousemove = function (e) { } </script>