CODEWITHSUNDEEP
javascriptjqueryflot
WojonsTech
WojonsTech

Reputation: 1277

Flot Charts Tool Tip Matching Y-axis

I am trying to add tooltips to my flotcharts area and line graphs that will display the results of all on that Y axis, Also that it will display the tooltip for the cloest Y axis the mouse does not need to be exactly overal the point. for example look at morris.js. Lastly I would like to be able to trigger this for more then one graph on the same page example

here is an example of my plot()

$.plot($("#placeholder"), data, {
                series: {
                    stack: true,
                    lines: { show: lines, fill: true, steps: steps },
                    bars: { show: bars, barWidth: 0.6 }
                }, yaxis: { min: 0}, xaxis: {mode: "time", timeformat: "%H:%M"},
                legend : { show: true, container : '#placeholder', noColumns: 9, margin: ['500px', 35]}
            });

Thank you in advance.

Upvotes: 1

Views: 660

Answers (1)

brokethebuildagain
brokethebuildagain

Reputation: 2191

You're asking 3 questions here:

Question 1:

I am trying to add tooltips to my flotcharts area and line graphs that will display the results of all on that Y axis

Question 2:

Also that it will display the tooltip for the cloest Y axis the mouse does not need to be exactly overal the point. for example look at morris.js.

Question 3:

Lastly I would like to be able to trigger this for more then one graph on the same page example

I'll answer Question 2, since the others will be fairly simple to figure out once you have Question 2 answered.

Basically, all you need to do to get the closest point is get the mouse position and compare it to all your data points' positions using flot's pointOffset function (See https://github.com/flot/flot/blob/master/API.md#plot-methods). If the distance between the mouse and the point is the shortest, use it in your tooltip. Here's an example: http://jsfiddle.net/RUKvk/54/

Question 1: You'll need to modify my function slightly to store a list of points in stead of just one. If the distance is within a certain range, add it to the list.

Question 3: Multiple graphs should be pretty easily accomplished by calling this function on the other graph. You'll have to modify the function a bit to get it to work, but the principle is the same.

Upvotes: 2

Related Questions