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 value, y value, label, etc., and I can't figure out how to create more customized tooltips.

Is there someplace I can attach custom data, that I can access when creating the tooltip?

For example, to simplify, let's suppose my code looks like:

var d = [ { label: "Fake!", data: [ [1290802154, 0.3], [1292502155, 0.1] ] } ];
var options = {
    xaxis: { mode: "time" },
    series: {
    lines: { show: true },
        points: { show: true }
    },
    grid: { hoverable: true, clickable: true }
};
$.plot($("#placeholder"), d, options);

Now, when clicking on the first datapoint, I want the tooltip to show "Hello", and when clicking on the second datapoint I want to show "Bye". How do I do this? When binding the plothover event

$(".placeholder").bind("plothover", function (event, pos, item) { /* etc. */ };

I'm not sure what "item" refers to, and how to attach data to it.

Answer 1

Also you can try following code:

function showTooltip(x, y, contents, z) {
  $('<div id="tooltip">' + contents + '</div>').css({
    position: 'absolute',
    display: 'none',
    top: y - 30,
    left: x - 110,
    'font-weight': 'bold',
    border: '1px solid rgb(255, 221, 221)',
    padding: '2px',
    'background-color': z,
    opacity: '0.8'
  }).appendTo("body").show();
};

$(document).ready(
  $(function() {
    var data = [{
        "label": "scott",
        "data": [
          [1317427200000 - 5000000 * 3, "17017"],
          [1317513600000 - 5000000 * 5, "77260"]
        ]
      },
      {
        "label": "martin",
        "data": [
          [1317427200000 - 5000000 * 2, "96113"],
          [1317513600000 - 5000000 * 4, "33407"]
        ]
      },
      {
        "label": "solonio",
        "data": [
          [1317427200000 - 5000000, "13041"],
          [1317513600000 - 5000000 * 3, "82943"]
        ]
      },
      {
        "label": "swarowsky",
        "data": [
          [1317427200000, "83479"],
          [1317513600000 - 5000000 * 2, "96357"],
          [1317600000000 - 5000000, "55431"]
        ]
      },
      {
        "label": "elvis",
        "data": [
          [1317427200000 + 5000000, "40114"],
          [1317513600000 - 5000000 * 1, "47065"]
        ]
      },
      {
        "label": "alan",
        "data": [
          [1317427200000 + 5000000 * 2, "82504"],
          [1317513600000, "46577"]
        ]
      },
      {
        "label": "tony",
        "data": [
          [1317513600000 + 5000000, "88967"]
        ]
      },
      {
        "label": "bill",
        "data": [
          [1317513600000 + 5000000 * 2, "60187"],
          [1317600000000, "39090"]
        ]
      },
      {
        "label": "tim",
        "data": [
          [1317513600000 + 5000000 * 3, "95382"],
          [1317600000000 + 5000000, "89699"]
        ]
      },
      {
        "label": "britney",
        "data": [
          [1317513600000 + 5000000 * 4, "76772"]
        ]
      },
      {
        "label": "logan",
        "data": [
          [1317513600000 + 5000000 * 5, "88674"]
        ]
      }
    ];

    var options = {
      series: {
        bars: {
          show: true,
          barWidth: 60 * 60 * 1000,
          align: 'center'
        }
      },
      points: {
        show: true
      },
      lines: {
        show: true
      },
      grid: {
        hoverable: true,
        clickable: true
      },
      yaxes: {
        min: 0
      },
      xaxis: {
        mode: 'time',
        timeformat: "%b %d",
        minTickSize: [1, "month"],
        tickSize: [1, "day"],
        autoscaleMargin: .10
      }
    };

    $(function() {
      $.plot($('#placeholder'), data, options);
    });
    $(function() {
      var previousPoint = null;
      $("#placeholder").bind("plothover", function(event, pos, item) {
        if (item) {
          if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0],
              y = item.datapoint[1] - item.datapoint[2];
            debugger;
            showTooltip(item.pageX, item.pageY, y + " " + item.series.label, item.series.color);
          }
        } else {
          $("#tooltip").remove();
          previousPoint = null;
        }
      })
    });
  })
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="content">
  <div class="demo-container">
    <div id="placeholder" class="demo-placeholder"  style="width:800px;height:600px;"></div>
  </div>
</div>

Answer 2

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];

      $('<div id="tooltip">' + tooltip + '</div>')
        .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);
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<div id="placeholder" style="width:600px;height:300px"></div>