HOWTO: Make your line clickable
Here's an example of a Line chart
with a key - but instead of the key
itself being interactive you can click on the lines to then
highlight them and the relevant key entry.
Previously a fair amount of custom code was used to add the
highlight but that code has now been
incorporated into the Line chart
library so you now just have to
add a single configuration property to your code.
There's a demo page included in
the download archive
that demonstrates this to the full called
line-tooltips-dataset.html
The code for the chart is shown below.
<script src="/libraries/RGraph.common.dynamic.js"></script> <script src="/libraries/RGraph.common.key.js"></script> <script src="/libraries/RGraph.line.js"></script> <script src="/libraries/RGraph.common.tooltips.js"></script>
<canvas id="cvs" width="700" height="300">[No canvas support]</canvas>
<script> new RGraph.Line({ id:'cvs', data: [ [4,5,8,7,6,4,3], [7,1,6,9,4,6,5], [8,4,6,5,9,9,8] ], options: { // Some custom properties that are used in the // tooltips values: [58.3,42.5,62.7], names: ['Bob','David','Gary'], tooltipsDataset: '<span style="font-style: italic">Results for <b>%{property:names[%{dataset}]}</b>:</span><br /><span style="font-size: 30pt">%{property:values[%{dataset}]}%</span>', backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false, xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'], marginBottom: 35, linewidth: 2, shadow: true, title: 'A Line chart with dataset tooltips', titleBold: true, titleSize: 16, spline: true, tickmarksStyle: 'endcircle', tickmarksSize: 5, key: ['Bob','David','Gary'], keyBackground: 'white' } }).draw().on('tooltip', function (obj) { // You can get the dataset index and the coordinates // of the key entry by using these properties. This // also fetches the appropriate color from the RGraph // object properties (using the index). // // If you're not bothered about highlighting the key // then you can omit this entire ontooltip event var index = obj.tooltipsDatasetIndex; var coords = obj.coords.key[index]; var color = obj.get('colors')[index]; // Draw a semi-opaque rectangle around the // relevant key entry obj.path( 'ga 0.25 b r % % % % f % ga 1', coords[0], coords[1], coords[2], coords[3], color ); }); </script>