FLOT mouse Interactions

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
  <h1>Flot Examples</h1>
  <div id="placeholder" style="width:500px; height:300px;"></div>

JavaScript

x = null;
  var data,data1,options,chart;
  data1 = [ [1,4],[2,5],[3,6],[4,9],[5,7],[6,6],[7,2],[8,1],[9,3] ];
  var data2 = [], data3=[];
  for(var i = 1; i < 10; i++) { data2.push([i,i * 2])}
  for(var i = 1; i < 10; i++) { data3.push([i,10 * Math.random()])}
  data = [{ data:data1, label:"fixed", lines:{show:true}}
        ,{ data:data2, label:"linear", lines:{show:true}, points:{show:true}}
        ,{ data:data3, label:"random", bars:{ show:true, barWidth:0.5}}];
  options = {legend:{position:"nw"},grid: { clickable: true, hoverable: true } }
  $(document).ready(function(){chart = $.plot($("#placeholder"),data,options);});
    $("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) { 
            alert(item.series.label);
        }
    });
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);
  }
$("#placeholder").bind("plothover", function (event, pos, item) {
    $("#tooltip").remove();
    if (item) {    
      var x = item.datapoint[0].toFixed(2),y = item.datapoint[1].toFixed(2);
      showTooltip(item.pageX, item.pageY,item.series.label + " of " + x + " = " + y);
    }
  });