How do I create a dynamic Line chart with a mouseover crosshair?

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Schultz on 1st January 2016

Right now I have a dynamically updating line chart, that is taking in randomly generated data from a servlet. I've been trying to implement a feature that when the graph is paused and made static, that you can mouse over and have a tooltip pop up that displays the values. I have a pause function that stops the timer from calling the draw.

Posted by RGraph support on 16th July 2013
Hi there,

Then what you need to do is when the chart is stopped set the tooltips to the values that are currently displayed on the chart.

There are various demos of scrolling charts in the demos section that may be of use:

Posted by Schultz on 16th July 2013

I tried adding the crosshairs to the line chart, using your example on the crosshair.snap example; Just so I could get a basic thing working. However, when I pause the graph it doesn't show the crosshairs.

When I pause it clears the timer and stops calling the draw graph, essentially making the chart an image.

Do you have any suggestions?

Posted by RGraph support on 16th July 2013
Hi there,

You can't stop the chart redrawing completely - every time you move the mouse the chart is redrawn to update the positions of the crosshairs. Just cancel the timer that updates the chart data.

And you can't have tooltips in conjunction with crosshairs - you need to choose one or the other.

Richard, RGraph support
Posted by Schultz on 16th July 2013
I'm using the timer to call the function that sends the AJAX request to the servlet. My pause button sets the timer to 0 which stops the function that draws the graph from being called.

Is it possible to keep this in tact and add on a tooltip that displays the data being graphed when you mouse over it? Or does this take the same approach the crosshairs use and redraws the graph?

Also, I currently have a tooltip running that displays which selections were made to retrieve the data. Will this effect the new tooltips if I am able to include them?
Posted by RGraph support on 17th July 2013
Hi there,

Instead of setting it to 0 I think you may be better off using the clearTimeout() function:

You could use the canvas onmousemove function to write your own "tooltip":

myChart.canvas.onmousemove = function (e)
    // Create and show your own tooltip (a DIV tag) here

I don't know what you're referring to with the last part of your question - but only one tooltip can be shown at once - so you may need to go down the route of showing your own if there's two that you need onscreen at once.


Add a reply

« Back to message list