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>