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

      $('<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>

Answer 2

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 3

Here is a rough JSFiddle example that I whipped up. Not sure if it's functioning exactly how you like but might spark an idea...

[update]

you'll want to bind to the

$("#placeholder").bind("plotclick", function (event, pos, item) {/* code */});

event for clicking events

[update2] Updated Example

I've adjusted the example to use your test data and to work more with what you have described above. As for the item object it seems that it is generated on the fly so, from what I can tell, you can not add additional data to it. However, you can create an array to cache the item objects when clicked and add additional data to them and use them for the hover event.

This new example does just that, it shows the normal tooltip when nothing is clicked. but once clicked it determines if the point clicked was the first or second and adds an addition property to the item object called alternateText and stores it in an array called itemsClicked.

Now when a point is hovered over it checks to see if there is a cached item object within the array based on the same index of the current item object, which is obtained via item.dataIndex. If there is a matching index in the cache array itemsClicked it will grab the item object from it and use the alternateText property that was added during the click event earlier.

The first point's item object would look something like this:

item : {
    dataIndex: 0,
    datapoint: [
        1290802154,
        0.3
    ],
    pageX: 38,
    pageY: 82,
    series: {/* properties of the series that this point is in */},
    seriesIndex: 0
}

Once clicked it would then look like this and be stored in the itemsClicked array:

item : {
    alternateText: 'hello',
    dataIndex: 0,
    datapoint: [
        1290802154,
        0.3
    ],
    pageX: 38,
    pageY: 82,
    series: {/* properties of the series that this point is in */},
    seriesIndex: 0
}

Please let me know if any of this is helpful or not, if not I'll shut up and stop updating my answer :P