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>