1

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;
    }
});};

Current Implementation

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!

2 Answers 2

3

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>

2
  • Thanks for the reply! It works fine for me but I want to ask if I can get the category name not only the value from the plot? Also the color of each category if possible.
    – Lenonskie
    Jul 13, 2018 at 4:08
  • @Mr.Hans I'm sure you can. You could probably grab the information from the series object. This should give you a good start.
    – mechenbier
    Jul 13, 2018 at 4:13
0

$("#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

  }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.