HOWTO: Use the dollar syntax for events
The dollar syntax in RGraph makes it a breeze for you to add event
listeners to your
charts. Previously you would add an event listener with the
on
function and then check the index and dataset
properties of the shape array to verify which shape had been
clicked
or hovered over. With the dollar syntax though, you can add event listeners to specific
shapes
(bars/points/segments etc) by using the syntax shown below. Keep
in mind though that, as with arrays, the numbering begins at zero.
The initial chart
Here is the plain Bar chart before the event listeners have been added:
<script>
bar = new RGraph.Bar({
id: 'cvs',
data: [13,12,16,15,12,11,21],
options: {
xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
textSize: 14
}
}).draw();
</script>
The chart with the click event added
Here is the Bar chart with the click event added. Note the mouse pointer
doesn't change as there hasn't been a
mousemove listener added yet.
<script>
bar = new RGraph.Bar({
id: 'cvs',
data: [13,12,16,15,12,11,21],
options: {
xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
}
}).draw();
bar.$3.onclick = function (e, shape)
{
alert('The second Bar charts event listener');
}
</script>
The chart with the mousemove event added
And here is the Bar chart with the mousemove event listener added. This
changes the cursor to the hand when the
relevant bar is hovered over. The pointer is automatically changed back
for you when the mouse is moved away from the bar.
<script>
bar = new RGraph.Bar({
id: 'cvs',
data: [13,12,16,15,12,11,21],
options: {
xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
textSize: 14
}
}).draw();
bar.$3.onclick = function (e, shape)
{
alert('In the third bar charts event listener');
}
bar.$3.onmousemove = function (e, shape)
{
return true;
}
</script>