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',
            events: {
                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
                    );
                }
            }
        }
    }).draw();
</script>