How to highlight a bar on your chart

Share RGraph:   

Summary
A guide for highlighting your chart. Highlighting your chart can be a useful tool when trying to illustrate something to you users.

A Bar chart with custom highlighting
[No canvas support]

Empty tooltips

When tooltips are used they do two things. First and foremost they show the tooltip, and secondly to give some sort of visual feedback to the user they highlight the shape that was clicked on. By using NULL (ie for all intents and purposes - empty) values the shape will be highlighted but, because it's empty, no tooltip will be shown. This provides an easy way to get highlighting without showing tooltips. The chart to the right shows this method and the code is:


<script>
    window.onload = (function ()
    {
        /**
        * Create the chart
        */
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [[2,3,4],[4,2,2],[2,6,1],[4,1,2],[3,3,3],[2,6,2],[1,4,2]],
            options: {
                colors: ['#00FABC', 'red', 'yellow'],
                strokestyle: 'rgba(0,0,0,0)',

                // Use NULL (\0) so that no tooltip is displayed - only the highlighting is applied
                tooltips: function () {return '\0';},
        
                // You could also use this:
                // tooltips: ['\0','\0','\0','\0','\0','\0']
                
                grouping: 'stacked',
                gutterTop: 5,
                textAccessible: true,
                textSize: 14
            }
        }).draw()
    })
</script>

Custom events

[No canvas support]

If the amount of code that you have on your page is important you may not want to include the tooltips library. So what you can do is use the custom events that RGraph supports. This is a little more involved, but you don't need to include the tooltips library - thus saving 40-50k on your page size.


<script>
    window.onload = (function ()
    {
        /**
        * Define the function that highlights the bar
        */
        function myFunc (e, shape)
        {
            // This line assumes that there's only one chart on the canvas. If there's multiple
            // you may need to use the ObjectRgistry methods to get the appropriate object.
            var obj = e.target.__object__;
            
            // Add the highlight
            obj.context.beginPath();
                obj.context.fillStyle = 'rgba(255,255,255,0.7)';
                obj.context.fillRect(shape['x'], shape['y'], shape['width'], shape['height']);
            obj.context.fill();
        }

        /**
        * Create the chart first
        */
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [[2,3,4],[4,2,2],[2,6,1],[4,1,2],[3,3,3],[2,6,2],[1,4,2]],
            colors: ['#00FABC', 'red', 'yellow'],
            strokestyle: 'rgba(0,0,0,0)',
            textAccessible: true,
            textSize: 14,
            gutterTop: 5,

            eventsClick: myFunc,
            eventsMousemove: function (e) {e.target.style.cursor = 'pointer';}
        }).draw();
    })
</script>

Comments

Add a new comment...