By using the mouseout
event you can easily make a chart where the tooltips are hidden when the mouse is moved away from the
canvas. The line chart here shows it in action and the code is below. It's a simple matter of adding the mouseout
event
listener after the chart has been created.
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script>
window.onload = function ()
{
var line = new RGraph.Line({
id: 'cvs',
data: [84,86,15,56,53,68,98],
options: {
xaxisLabels: ['Kim','Hoolio','Jack','Jim','Louise','Ringo','John'],
tooltips: ['Kim','Hoolio','Jack','Jim','Louise','Ringo','John'],
textSize: 14
}
}).draw()
/**
* This is the event listener that handles the hiding of the tooltip.
*/
line.canvas.onmouseout = function (e)
{
// Hide the tooltip
RGraph.hideTooltip();
// Redraw the canvas so that any highlighting is gone
RGraph.redraw();
}
}
</script>