CODEWITHSUNDEEP
javascriptjqueryflot
CadentOrange
CadentOrange

Reputation: 3343

Flot tooltips appear on line graph but not bar chart

I have an array of [Moment, integer] pairs that I'm plotting in a graph using flot. When I plot the data as a bar chart, the tooltips do not appear.

However if I display the points, or if I convert the chart into a line graph then the tooltips appear.

As the following snippet show, I'm practically using the flot example code. What could be causing the tooltips to fail to display when plotted as a bar chart? Editable JSFiddle is available here.

var people_count_data = [
  [moment("2015-05-26T09:15:00+00:00"), 0],
  [moment("2015-05-26T09:30:00+00:00"), 0],
  [moment("2015-05-26T09:45:00+00:00"), 0],
  [moment("2015-05-26T10:00:00+00:00"), 0],
  [moment("2015-05-26T10:15:00+00:00"), 0],
  [moment("2015-05-26T10:30:00+00:00"), 0],
  [moment("2015-05-26T10:45:00+00:00"), 0],
  [moment("2015-05-26T11:00:00+00:00"), 0],
  [moment("2015-05-26T11:15:00+00:00"), 0],
  [moment("2015-05-26T11:30:00+00:00"), 0],
  [moment("2015-05-26T11:45:00+00:00"), 2],
  [moment("2015-05-26T12:00:00+00:00"), 51],
  [moment("2015-05-26T12:15:00+00:00"), 59],
  [moment("2015-05-26T12:30:00+00:00"), 72],
  [moment("2015-05-26T12:45:00+00:00"), 23],
  [moment("2015-05-26T13:00:00+00:00"), 50],
  [moment("2015-05-26T13:15:00+00:00"), 55],
  [moment("2015-05-26T13:30:00+00:00"), 52],
  [moment("2015-05-26T13:45:00+00:00"), 53],
  [moment("2015-05-26T14:00:00+00:00"), 39],
  [moment("2015-05-26T14:15:00+00:00"), 50],
  [moment("2015-05-26T14:30:00+00:00"), 51],
  [moment("2015-05-26T14:45:00+00:00"), 55],
  [moment("2015-05-26T15:00:00+00:00"), 39],
  [moment("2015-05-26T15:15:00+00:00"), 12],
  [moment("2015-05-26T15:30:00+00:00"), 0],
  [moment("2015-05-26T15:45:00+00:00"), 0],
  [moment("2015-05-26T16:00:00+00:00"), 0],
  [moment("2015-05-26T16:15:00+00:00"), 0],
  [moment("2015-05-26T16:30:00+00:00"), 0],
  [moment("2015-05-26T16:45:00+00:00"), 0],
  [moment("2015-05-26T17:00:00+00:00"), 0],
  [moment("2015-05-26T17:15:00+00:00"), 0],
];

var plotOptions = {
  //Options go here
  xaxis: {
    mode: "time",
    reserveSpace: true,
    tickLength: 5,
    autoscaleMargin: 0.01
  },
  yaxis: {
    min: 0
  },
  grid: {
    hoverable: true,
    clickable: true
  },
  series: {
    // If I comment out bars and turn the chart into a line graph, tooltips work(!)
    bars: {
      show: true
    },
    // If I show the points on the bar graph, tooltips work(!)
    //    points: {
    //      show: true
    //    }
  },
};

var plot1 = $.plot(
  '#store-people-count-plot', [{
    label: "People Count",
    color: "#FC8200",
    data: people_count_data
  }], plotOptions);

function showTooltip(x, y, contents) {
  $("<div id='tooltip'>" + contents + "</div>").css({
    position: "absolute",
    display: "none",
    top: y + 5,
    left: x + 5,
    border: "1px solid #fdd",
    padding: "2px",
    "background-color": "#fee",
    opacity: 0.80
  }).appendTo("body").fadeIn(200);
}

var previousPoint = null;
var hoverCallback = function(event, pos, item) {
  if (item) {
    if (previousPoint != item.dataIndex) {
      previousPoint = item.dataIndex;
      var x_moment = moment(item.datapoint[0]);
      $("#tooltip").remove();
      var y = item.datapoint[1];
      var tooltipString = x_moment.format("HH:mm") + ", " + y;
      showTooltip(item.pageX, item.pageY,
        tooltipString);
    }
  } else {
    $("#tooltip").remove();
    previousPoint = null;
  }
};

$('#store-people-count-plot').on("plothover", hoverCallback);
#store-people-count-plot {
  width: 400px;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.3.1/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>

<div id="store-people-count-plot"></div>

Upvotes: 2

Views: 754

Answers (1)

mechenbier
mechenbier

Reputation: 3067

Your bars are too thin. If you zoom your browser window in and hover your cursor over a bar, the tooltip is displayed. Try widening your bars using the barwidth option:

"barWidth" is the width of the bars in units of the x axis (or the y axis if "horizontal" is true), contrary to most other measures that are specified in pixels. For instance, for time series the unit is milliseconds so 24 * 60 * 60 * 1000 produces bars with the width of a day.

I've modified your options and set the barWidth to 10 minutes, and the tooltip works.

var people_count_data = [
  [moment("2015-05-26T09:15:00+00:00"), 0],
  [moment("2015-05-26T09:30:00+00:00"), 0],
  [moment("2015-05-26T09:45:00+00:00"), 0],
  [moment("2015-05-26T10:00:00+00:00"), 0],
  [moment("2015-05-26T10:15:00+00:00"), 0],
  [moment("2015-05-26T10:30:00+00:00"), 0],
  [moment("2015-05-26T10:45:00+00:00"), 0],
  [moment("2015-05-26T11:00:00+00:00"), 0],
  [moment("2015-05-26T11:15:00+00:00"), 0],
  [moment("2015-05-26T11:30:00+00:00"), 0],
  [moment("2015-05-26T11:45:00+00:00"), 2],
  [moment("2015-05-26T12:00:00+00:00"), 51],
  [moment("2015-05-26T12:15:00+00:00"), 59],
  [moment("2015-05-26T12:30:00+00:00"), 72],
  [moment("2015-05-26T12:45:00+00:00"), 23],
  [moment("2015-05-26T13:00:00+00:00"), 50],
  [moment("2015-05-26T13:15:00+00:00"), 55],
  [moment("2015-05-26T13:30:00+00:00"), 52],
  [moment("2015-05-26T13:45:00+00:00"), 53],
  [moment("2015-05-26T14:00:00+00:00"), 39],
  [moment("2015-05-26T14:15:00+00:00"), 50],
  [moment("2015-05-26T14:30:00+00:00"), 51],
  [moment("2015-05-26T14:45:00+00:00"), 55],
  [moment("2015-05-26T15:00:00+00:00"), 39],
  [moment("2015-05-26T15:15:00+00:00"), 12],
  [moment("2015-05-26T15:30:00+00:00"), 0],
  [moment("2015-05-26T15:45:00+00:00"), 0],
  [moment("2015-05-26T16:00:00+00:00"), 0],
  [moment("2015-05-26T16:15:00+00:00"), 0],
  [moment("2015-05-26T16:30:00+00:00"), 0],
  [moment("2015-05-26T16:45:00+00:00"), 0],
  [moment("2015-05-26T17:00:00+00:00"), 0],
  [moment("2015-05-26T17:15:00+00:00"), 0],
];

var plotOptions = {
  //Options go here
  xaxis: {
    mode: "time",
    reserveSpace: true,
    tickLength: 5,
    autoscaleMargin: 0.01
  },
  yaxis: {
    min: 0
  },
  grid: {
    hoverable: true,
    clickable: true
  },
  series: {
    // If I comment out bars and turn the chart into a line graph, tooltips work(!)
    bars: {
      show: true,
      barWidth: 60*10*1000
    },
    // If I show the points on the bar graph, tooltips work(!)
    //    points: {
    //      show: true
    //    }
  },
};

var plot1 = $.plot(
  '#store-people-count-plot', [{
    label: "People Count",
    color: "#FC8200",
    data: people_count_data
  }], plotOptions);

function showTooltip(x, y, contents) {
  $("<div id='tooltip'>" + contents + "</div>").css({
    position: "absolute",
    display: "none",
    top: y + 5,
    left: x + 5,
    border: "1px solid #fdd",
    padding: "2px",
    "background-color": "#fee",
    opacity: 0.80
  }).appendTo("body").fadeIn(200);
}

var previousPoint = null;
var hoverCallback = function(event, pos, item) {
  if (item) {
    if (previousPoint != item.dataIndex) {
      previousPoint = item.dataIndex;
      var x_moment = moment(item.datapoint[0]);
      $("#tooltip").remove();
      var y = item.datapoint[1];
      var tooltipString = x_moment.format("HH:mm") + ", " + y;
      showTooltip(item.pageX, item.pageY,
        tooltipString);
    }
  } else {
    $("#tooltip").remove();
    previousPoint = null;
  }
};

$('#store-people-count-plot').on("plothover", hoverCallback);
#store-people-count-plot {
  width: 400px;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.3.1/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>

<div id="store-people-count-plot"></div>

Upvotes: 1

Related Questions