JQuery / Flot: How do you get datapoint coordinates?

Question

I am currently looking at an example at http://people.iola.dk/olau/flot/examples/interacting.html , but I cannot figure out how to get the coordinates of the data point, I will not click on the plot, so I cannot use the plotclick event. Now my question is: is there another way to get the x and y coordinates for a datapoint without clicking? I will use the jQuery slider to highlight different points on the chart and would like to have a tooltip next to the data points.

Thanks in advance:)

Answer 1

A bit late, but I ran this function after plotting as a way to place labels under my plotted data points in a line plot.

$(document).ready(function(){ $(function(){ var data = [ {data: [[1, 5], [2, 10], [3, 15], [4, 15], [5, 10], [6, 5]], color: '#3a8df6'}, {data: [[1, 52], [2, 42], [3, 32], [4, 32], [5, 42], [6, 52]], color: '#ff0000'} ]; var options = { lines: {show: true}, yaxis: {tickDecimals: 0, min: 0, max: 100, autoscaleMargin: null} }; var graph = $.plot($('#graph'), data, options); var points = graph.getData(); var graphx = $('#graph').offset().left; graphx = graphx + 30; // replace with offset of canvas on graph var graphy = $('#graph').offset().top; graphy = graphy + 10; // how low you want the label to hang underneath the point for(var k = 0; k < points.length; k++){ for(var m = 0; m < points[k].data.length; m++){ showTooltip(graphx + points[k].xaxis.p2c(points[k].data[m][0]), graphy + points[k].yaxis.p2c(points[k].data[m][1]),points[k].data[m][1]) } } }); }); function showTooltip(x,y,contents){ $('<div id="tooltip">' + contents + '</div>').css( { position: 'absolute', display: 'none', top: y, left: x }).appendTo("body").fadeIn(200); } 

This is from the top of the head, but basically this function goes through all the data points and uses the p2c functions in the axes, and then adds this (with some addition) to the offset of the graph itself. Then it just uses the usual tooltip overlay.

Also, if you use this on a histogram, you can set the width of the tooltip, give it the alignment of the text in the center, and then, if you want all the labels in the line, just set only one number in the yaxis p2c function. Then use the graphics pad to place it where you want.

Hope this helps someone in the future :)

Answer 2

From the fleet API :

Various things are filled inside an axial object, for example. you can use getAxes (). xaxis.ticks to find out what ticks are for xaxis. Two other useful attributes are p2c and c2p, functions for converting data from space space to canvas space and back. Both return values ​​that are offset with the offset of the graph.

In combination with plot.offset() (offset of the grid area relative to the document) you should have all the tools necessary to find out the rest. plot.pointOffset() also useful. It returns the position of the point relative to the containing div.

Answer 3

Theoretically, getting the x, y coordinates inside the container is as follows:

 $(function () { $('#container').mousemove(function (e) { $('.xPos').text(e.clientX - $('#container').offset().left); $('.yPos').text(e.clientY - $('#container').offset().top); }); });