About
RGraph is a JavaScript charts library based on
HTML5 SVG and canvas. RGraph is mature (over 15 years
old) and has a wealth of features making it an ideal
choice to show charts on your website.
License
RGraph can be used for free under the GPL or if
that doesn't suit your situation there's an
inexpensive (£99) commercial license available.
Download
Get the latest version of RGraph (version 6.17) from
the download page. There's also older versions available,
minified files and links to cdnjs.com hosted libraries.
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>