jQuery flot associate text with plot points

I'm using Flot and would like to associate text with each individual plot point so that when I hover over the plot point the relevant data开发者_JAVA百科 is displayed.

I have used the following example

http://people.iola.dk/olau/flot/examples/interacting.html

which allows me to display a tooltip but I need to associate text with each plot point.

I am probably answering this too late. As I understand the question, you are trying to display some text about the point other than just the x,y coordinates at that point. I was able to solve it for myself and found the clue in the link you gave http://people.iola.dk/olau/flot/examples/interacting.html. If you look at the code, in the function bound to plotclick event, there is this variable item.dataIndex:

$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");

This variable is a sort of id for the point in the plot. Hence if I make an array with three params, the x coordinate, y coordinate and info, and pass the first two coordinates to the plot function in the following way:

var data = [];
for(i=0;i<len;i++)
  data.push([obj[i][1], obj[i][0]]);
//plotting the new array "data"
var plot = $.plot($("#placeholder"), [data], options);

where the obj array is:

{{12, 20, "info about point 1"},{26, 30, "info about point 2"}}

then the following statement inside the function for plothover event will do the job for us

showTooltip(item.pageX, item.pageY,obj[item.dataIndex][2]);

It worked me for me. Hope it helps. :)

Note:

You may also find it handy to reference the text directly rather than having to keep a reference to obj array:

var myLabel = this.plot.getData()[item.seriesIndex].data[item.dataIndex][2]
showTooltip(item.pageX, item.pageY, myLabel;

This particular code is showing the count for each point, plus the label, along with the x and y values (which happen to be year and salary amount, obviously change that to be whatever makes sense for your graph to be displaying).

        var previousPoint = null;
    jQuery("#placeholder").bind("plotclick", function (event, pos, item) {
            jQuery("#x").text(pos.x.toFixed(0));
                 jQuery("#y").text(pos.y.toFixed(0));

                 if (item) {
                     if (previousPoint != item.datapoint) {
                         previousPoint = item.datapoint;
                                   jQuery("#tooltip").remove();
                                   var x = item.datapoint[0].toFixed(0), y = item.datapoint[1].toFixed(0);
                                   var count = findCount(item.series.label,x);
                                   showTooltip(item.pageX, item.pageY, count + " " + item.series.label + " " + x + " = $" + y);
                          }
                 }
                 else {
                     jQuery("#tooltip").remove();
                     previousPoint = null;
                 }
    });

...that gives you the position of the point and passes it to the function which shows the tooltip, which you can define like this:

        function showTooltip(x, y, contents) {
        jQuery('<div id="tooltip">' + contents + '</div>').css( {
                position: 'absolute',
                display: 'none',
                top: y - 35,
                left: x + 5,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee'
        }).appendTo("body").fadeIn(200);
    }

I can't really tell you why the background color has to be in quotes, but I can tell you that it does. Obviously change the colors, padding, fadeIn value, etc. to match how you want things to look.

function redrawplot() {
   $('.tt1').remove();
   var points = plot.getData();
     var graphx = $('#placeholder').offset().left;
     graphx = graphx + 30; // replace with offset of canvas on graph
     var graphy = $('#placeholder').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 = 1; m < points[k].data.length-1; m++){
            if(points[k].data[m][0] != null && points[k].data[m][1] != null){
                  if ((points[k].data[m-1][1] < points[k].data[m][1] && points[k].data[m][1] > points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] < -50 || points[k].data[m][1] - points[k].data[m+1][1] > 50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 35,points[k].data[m][1], points[k].color);
              }
                              if ((points[k].data[m-1][1] > points[k].data[m][1] && points[k].data[m][1] < points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] > 50 || points[k].data[m][1] - points[k].data[m+1][1] < -50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 2,points[k].data[m][1], points[k].color);
                              }
                            }
        }
      }

 }

 function showTooltip1(x,y,contents, colour){
      $('<div class=tt1 id="value">' +  contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y,
            left: x,
            'border-style': 'solid',
            'border-width': '2px',
            'border-color': colour,
            'border-radius': '5px',
            'background-color': '#ffffff',
            color: '#262626',
            padding: '0px',
            opacity: '1'
      }).appendTo("body").fadeIn(200);
 }