displaying custom tooltip when hovering over a point in flot

Question

From the example here, I kind of know how to create a Flot graph that shows tooltips when hovering. But the examples only show to how to display tooltips containing the x va

Answer 1

You can add data to the series simply by adding it to the data array.

Instead of

$.plot(element, [[1, 2], [2, 4]] ...)

You can

$.plot(element, [[1, 2, "label"], [2, 4, "another label"]] ...)

And then use that information to show a custom label.

See this fiddle for a full example: http://jsfiddle.net/UtcBK/328/

$(function() {
  var sin = [],
    cos = [];
  for (var i = 0; i < 14; i += 0.5) {
    sin.push([i, Math.sin(i), 'some custom label ' + i]);
    cos.push([i, Math.cos(i), 'another custom label ' + i]);
  }

  var plot = $.plot($("#placeholder"), [{
      data: sin,
      label: "sin(x)"
    },
    {
      data: cos,
      label: "cos(x)"
    }
  ], {
    series: {
      lines: {
        show: true
      },
      points: {
        show: true
      }
    },
    grid: {
      hoverable: true,
      clickable: true
    },
    yaxis: {
      min: -1.2,
      max: 1.2
    }
  });

  $("#placeholder").bind("plothover", function(event, pos, item) {
    $("#tooltip").remove();
    if (item) {
      var tooltip = item.series.data[item.dataIndex][2];

      $('
' + tooltip + '
')
        .css({
          position: 'absolute',
          display: 'none',
          top: item.pageY + 5,
          left: item.pageX + 5,
          border: '1px solid #fdd',
          padding: '2px',
          'background-color': '#fee',
          opacity: 0.80
        })
        .appendTo("body").fadeIn(200);


      showTooltip(item.pageX, item.pageY, tooltip);
    }
  });

});