HOWTO: Use the isPointInStroke() function to make your line clickable
- 1. The original Line chart
- 2. The Line chart with the draw event listener
- 3. The Line chart with the draw event listener and the click event listener
isPointInStroke()
function isn't supported by Microsoft
Internet Explorer so this HOWTO won't work in that browser.
Currently, you can use the drawing API Poly object to draw a shape around
your line and then use the Poly objects
tooltip or events to add interactivity. Now though, since the addition of
the isPointInStroke()
function,
the process is made much easier as the example below shows. It involves:
- Draw your Line chart as normal
- Add a draw event listener that draws a transparent line using the Line chart coordinates
-
Since this transparent line is the last path drawn on the canvas we can add a click event
and test using the
isPointInStroke()
function. - If the test is positive - the line has been clicked.
1. The original Line chart
Here is the original Line chart before the new path is created.
<script> line = new RGraph.Line({ id: 'cvs', data: [4,8,6,3,5,2,4], options: { marginInner: 15, linewidth: 5, xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'], backgroundGridVlinesCount: 6, textAccessible: false, textSize: 14 } }).draw(); </script>
2. The Line chart with the draw event listener
Now a draw
event listener is added that draws a line.
Since this is drawn after the line chart it will be
the last path that is drawn on the canvas. Normally you would make
this a transparent color - but so
that you can see it, it's been drawn in semi-opaque black.
<script>
line = new RGraph.Line({
id: 'cvs',
data: [4,8,6,3,5,2,4],
options: {
marginInner: 15,
linewidth: 5,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
backgroundGridVlinesCount: 6,
textAccessible: false,
textSize: 14
}
}).on('draw', function (obj)
{
var co = obj.context;
var coords = obj.coords
co.beginPath();
co.lineWidth = 7;
co.strokeStyle = 'rgba(0,0,0,0.25)';
co.moveTo(coords[0][0], coords[0][1]);
for (var i=1; i<coords.length; i+=1) {
co.lineTo(coords[i][0], coords[i][1]);
}
co.stroke();
}).draw();
</script>
3. The Line chart with the draw event listener and the click event listener
Now the click event is added to the canvas. Since the line that we drew using the Line chart
coordinates was the last path added to the canvas the isPointInStroke()
function can be used to see
if the path (ie the line) was clicked.
<script>
line = new RGraph.Line({
id: 'cvs',
data: [4,8,6,3,5,2,4],
options: {
marginInner: 15,
linewidth: 5,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
backgroundGridVlinesCount: 6,
textAccessible: false,
textSize: 14
}
}).on('draw', function (obj)
{
var co = obj.context;
var coords = obj.coords
co.beginPath();
co.lineWidth = 7;
co.strokeStyle = 'rgba(0,0,0,0.25)';
co.moveTo(coords[0][0], coords[0][1]);
for (var i=1; i<coords.length; i+=1) {
co.lineTo(coords[i][0], coords[i][1]);
}
co.stroke();
}).on('mousemove', function (e)
{
var mouseXY = RGraph.getMouseXY(e);
if (line.context.isPointInStroke(mouseXY[0], mouseXY[1])) {
e.target.style.cursor = 'pointer';
} else {
e.target.style.cursor = 'default';
}
}).on('click', function (e)
{
var mouseXY = RGraph.getMouseXY(e);
if (line.context.isPointInStroke(mouseXY[0], mouseXY[1])) {
alert('The line was clicked');
}
}).draw();
</script>