SNos SNos - 6 months ago 40
Javascript Question

Query - Flot - Get x data value

I am using the plugin Flot in order to show a chart. I am implementing a tooltip in order to show the values x & y.

I have some problems getting the right values. The x axis are strings displaying a month name. How can I get the values from x axis ?

FIDDLE

$("#placeholder").bind("plothover", function(event, pos, item) {
if (item) {
var x = item.datapoint[0];
var y = item.datapoint[1];
$("#tooltip").html("x: " + x + " y: " + y)
.css({
top: item.pageY + 5,
left: item.pageX + 5
})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});

Answer

To Display the month of the Bar please use the item.series.data

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

    if (item) {

      var x = item.datapoint[0];
      var y = item.datapoint[1];

        var dataPoint = item.series.data[item.dataIndex];
        var mm = dataPoint[0]; 


      $("#tooltip").html("x: " + x + " y: " + y + " month: " + mm)
        .css({
          top: item.pageY + 5,
          left: item.pageX + 5
        })
        .fadeIn(200);
    } else {
      $("#tooltip").hide();
    }

  });