Stacked Bar Flot bar chart show values of every category in each series with tooltip

Question

Using this implementation below:

$.fn.UseStackBarTooltip = function (module) {
$(this).bind("plothover", function (event, pos, item) {
    if (item) {
        if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
            previousPoint = item.dataIndex;
            previousLabel = item.series.label;
            $("#tooltip").remove();

            var x = item.datapoint[0];
            var y = item.datapoint[1] - item.datapoint[2];
            var formated = y.toLocaleString();

            var color = item.series.color;

            showStackTooltip(item.pageX,
                item.pageY,
                color,
                "<strong>" + item.series.label + "</strong><br><strong>" + formated + "</strong>", module);
        }
    } else {
        $("#tooltip").remove();
        previousPoint = null;
    }
});};

I can show the value of selected category when I hover on the selected bar, what I want to do is I want to show all the values of every category on selected bar in a single hover only. Is it possible to do this? thanks!

Answer 1

You'll have to loop through the data values you have on the x-axis index to get the rest of the stacked values when you are in the hover event and have hovered over an item:

$("#graph").bind("plothover", function(event, pos, item) {

  // if we're hovering over an item
  if (item) {
    // get the data in the plot
    var plotData = plot.getData();
    var valueString = "";

    // loop through the data and grab each value in the same stack
    for (var i = 0; i < plotData.length; ++i) {
      var series = plotData[i];
      for (var j = 0; j < series.data.length; ++j) {
        // item.datapoint[0] contains the x axis value of the hovered over item
        // ensure we get the other values at the same x axis value.
        if (series.data[j][0] === item.datapoint[0]) {
          valueString += series.data[j][1] + " ";
        }
      }
    }

    // show the tool tip here - the valueString object has all the values in the stack

  }
});

The example below shows the values of a stack in a tooltip - you'll need to format the string to your needs.

 $(function() { var data = [{ data: [ [0, 21.51], [1, 32.50], [2, 47.14], [3, 10] ], stack: 0, label: 'Bottom' }, { data: [ [0, 37.77], [1, 24.65], [2, 7.67], [4, 15] ], stack: 0, label: 'Top' }]; var options = { series: { bars: { show: true, barWidth: .5, align: "center" }, points: { show: false } }, grid: { show: true, hoverable: true, } }; var plot = $.plot($('#graph'), data, options); $("#graph").bind("plothover", function(event, pos, item) { $("#tooltip").remove(); if (item) { var plotData = plot.getData(); var valueString = ""; for (var i = 0; i < plotData.length; ++i) { var series = plotData[i]; for (var j = 0; j < series.data.length; ++j) { if (series.data[j][0] === item.datapoint[0]) { valueString += series.data[j][1] + " "; } } } $("<div id='tooltip'>" + valueString + "</div>").css({ position: "absolute", display: "none", top: pos.pageY + 5, left: pos.pageX + 5, border: "1px solid #fdd", padding: "2px", "background-color": "#fee", opacity: 0.80 }).appendTo("body").fadeIn(200); } }); }); 

 #graph { width: 600px; height: 400px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script> <script src="https://rawgit.com/flot/flot/master/jquery.flot.stack.js"></script> <div id="graph"></div> 

Answer 2

 $("#graph").bind("plothover", function(event, pos, item) { // if we're hovering over an item if (item) { // get the data in the plot var plotData = plot.getData(); var valueString = plotData[item.seriesIndex].data[item.dataIndex][1]; // show the tool tip here - the valueString object has all the values in the stack } });