How to make your line clickable and then highlight the key

Share RGraph:   

Summary
A guide for making the whole line clickable with the Poly object - not just the points along that line

[No canvas support]

Here is 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 their respective key entry. A fair bit of custom coding is required to achieve this - as well as covering the Line chart with a poly object (that sits "on top" of the line).

The code for this is shown below.


<script>
    window.onload = (function ()
    {
        /**
        * This is the width of the transparent poly object
        */
        var polyWidth = 6;
    
    
    
    
        /**
        * Some configuration settings
        */
        var tooltips     = ['A tooltip!','Another tooltip!'];
        var color        = 'rgba(0,0,0,0)';
        var keyHighlight = 'rgba(255,0,0,0.25)';
    
    
    
    
        /**
        * Create the Line chart using a spline
        */
        var line = new RGraph.Line({
            id: 'cvs',
            data: [
                [1,2,1,4,8,6,3],
                [4,8,6,3,5,2,2]
            ],
            options: {
                spline: true,
                hmargin: 5,
                key: ['Fred','Lucifer'],
                tickmarks: 'endcircle',
                shadow: true,
                labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                backgroundGridAutofitNumvlines: 6,
                numxticks: 6
            }
        }).draw()
    
    
    
    
        /**
        * This bit makes the whole spline clickable by looping through the spline points
        * and creating poly objects with them - and putting the poly objects "over" the line.
        * The poly object then has the tooltip added to it
        */
        for (var dataset=0; dataset<line.coordsSpline.length; ++dataset) {
        
            var points = [];
    
            for (var i=0; i<line.coordsSpline[0].length; ++i) {
                points.push([
                     line.coordsSpline[dataset][i][0],
                     line.coordsSpline[dataset][i][1] + (polyWidth / 2)
                ]);
            }
            
            for (var i=line.coordsSpline[0].length - 1; i>=0; --i) {
                points.push([
                    line.coordsSpline[dataset][i][0],
                    line.coordsSpline[dataset][i][1] - (polyWidth / 2)
                ]);
            }
    
            /**
            * Now draw the poly that sits on top of the line. Remember that the loop that this code is
            * sitting in runs twice - once for each line
            */
            var poly = new RGraph.Drawing.Poly({
                id: 'cvs',
                coords: points,
                options: {
                    strokestyle: 'rgba(0,0,0,0)',
                    fillstyle: color,
                    tooltips: [ tooltips[dataset] ],
                    highlightFill: 'rgba(0,0,0,0)',
                    dataset: dataset
                }
            })
    
    
            /**
            * When the poly object is clicked we want to highligh the line using the Line chart method
            * and draw a semi-transparent rectangle over the relevant key entry
            */
            .on('click', function (e, shape)
            {
                // The poly object
                var obj = shape.object;
                
                /**
                * This is the custom property that we set on the poly object when we made it. 
                */
                var idx = shape.object.Get('dataset')
    
    
                /**
                * Highlight the line using the interactive key highlight method,
                * which as it happens, does exactly what is needed here
                */
                line.interactiveKeyHighlight(idx);
                
                /**
                * Highlight the key using a rectangle. 
                */
                var x = line.coords.key[idx][0];
                var y = line.coords.key[idx][1];
                var w = line.coords.key[idx][2];
                var h = line.coords.key[idx][3];
    
                line.context.fillStyle = keyHighlight;
                line.context.fillRect(x, y, w, h);
            })
        }
    })
</script>

Comments

Add a new comment...