FLOT mouse Interactions

by Tom Rauch

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
 <h1>Flot Examples</h1>

<div id="placeholder" style="width:500px; height:300px;"></div>
<div id="confirm" class="modal hide fade">
    <div class="modal-body">Do you want to continue?</div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
        <button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
    </div>
</div>

CSS

body, .modal-open .page-container, .modal-open .page-container .navbar-fixed-top, .modal-open .modal-container {
    overflow-y: scroll;
}
@media (max-width: 979px) {
    .modal-open .page-container .navbar-fixed-top {
        overflow-y: visible;
    }
}

JavaScript

x = null;
  //initialize the variables  
  var data, data1, options, chart;

  //the data set that creates the columns/bars
  data1 = [
      [1, 4],
      [2, 5],
      [3, 6],
      [4, 9],
      [5, 7],
      [6, 6],
      [7, 2],
      [8, 1],
      [9, 3]
  ];

  //initialize two empty arrays
  var data2 = [],
      data3 = [];

  //two loops that push random numbers into arrays that create lines

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

  //now create one array of arrays called 'data' that includes the data, labels and lines

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


  //set the options; note the grid option is set to 'clickable' true
  options = {
      legend: {
          position: "nw"
      },
      grid: {
          clickable: true,
          hoverable: true
      }
  }

  //plots the graph 

  $(document).ready(function () {
      chart = $.plot($("#placeholder"), data, options);
  });

  //fires the plotclick
  $("#placeholder").bind("plotclick", function (event, pos, item) {
      if (item) {
          $('#confirm').modal('show');



          //  alert(item.series.data[0]);
      }
  });


  //looks like a custom tooltip function
  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);
  }

  //this fires the showTooltip...