HOWTO: Highlight a bar
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 values (ie for all intents and purposes -
empty) 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 code shown below shows this method:
<script>
//
// 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'],
colorsStroke: '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 do this:
// tooltips: '\0',
// You could also use this too:
// tooltips: ['\0','\0','\0','\0','\0','\0']
grouping: 'stacked',
title: 'A Bar chart with custom highlighting',
marginTop: 5,
textSize: 14
}
}).draw();
</script>
Custom events
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>
//
// Create the chart first
//
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'],
colorsStroke: 'rgba(0,0,0,0)',
textSize: 14,
marginTop: 5
}
}).draw().on('click', function (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__;
obj.path('b fs rgba(255,255,255,0.7) fr % % % % f',
shape.x,
shape.y,
shape.width,
shape.height
);
}).on('mousemove', function (e, shape)
{
return true;
});
</script>