How to show tool tip on hover on curves

[Ajit Soman]

I am using flot chart for first time . I am trying to create a timeline chart . I am taking reference from this example http://www.flotcharts.org/flot/examples/tracking/index.html

I want the legend that is shown in top right corner to be with the crosshair and the points on which the crosshair is pointing should be highlighted. Since i am not an expert in css. I can't align that legend with the crosshair. I was trying from last 4 hour but i did not succeed. So i am looking for help.  I have attached an attachment below.  

I am looking to implement like this in flot chart 

[Χρήστος Παππάς]

So do you want:

1. Cursor crosshair (see https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor)
2. Select in area of the chart (see https://www.flotcharts.org/flot/examples/selection/index.html)
3. Find all the points of all graphs in the selected area and then so the labels.

Is this what do you want?

--

---
You received this message because you are subscribed to the Google Groups "Flot graphs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flot-graphs...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ajit Soman]

Thanks for your reply . I followed the same approch said by you . i am stuck in a problem . if you can provide me some solution will be helpful

i have asked question in stackoverflow. Here is the stackoverflow link:

https://stackoverflow.com/q/52479302/5321729

[Χρήστος Παππάς]

Use placeholder.bind("plotselected", function (event, ranges) {});
and ranges.xaxis.from.toFixed(1) and ranges.xaxis.to.toFixed(1)

and then parse all the data series to check if it has any point beetween ranges.xaxis.from.toFixed(1) and ranges.xaxis.to.toFixed(1).

Then display the labels.

Hope that helps.

[Ced]

The stackoverflow post seems to be asking a completely different question.  Your question is unclear but I think you are trying to show a tooltip with the value of each series.

The tooltip and the legend are different things.  The legend is created when the plot is drawn.  You should not use it as a tooltip.  It is possible to hide the legend if you want.

Flot provides highlight() and unhighlight() functions.  So the only thing you need to do is identify the datapoints to pass into highlight().

It is possible to draw directly to flot's canvas but you should not use it to draw temporary items.  Highlight circles are drawn and removed frequently so doing this on flot's main canvas will cause the canvas to be redrawn frequently.  This is probably the cause for the flickering you mentioned.  To avoid this problem, Flot uses an transparent overlay canvas for highlighting and crosshairs.  This prevents redrawing the entire canvas every time you move the mouse.

Here is an example.