FLOT mouse Interactions

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>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
 <h1>Flot Examples</h1>

<div id="placeholder" style="width:500px; height:300px;"></div>
<div id="tes">
tes
</div>
<div id="modal" class="modal hide fade">
    <div class="modal-header">DataTables</div>
    <div class="modal-body">
    
    <table id="table" class="display" cellspacing="0" width="100%">
    <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
     
    </table>
    </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>

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);
      
      $('#modal').on('shown.bs.modal', function () {
  	     $
          
         $('#table').dataTable( {
           "language": {
            "paginate": {
                "previous": "<",
                "next": ">"
            },
            "info": "Jumlah total : _TOTAL_",
            "infoEmpty": "Jumlah total : 0",
            "lengthMenu": "Jumlah per halaman : _MENU_",
            "infoFiltered":   "dari _MAX_"
        },
        scrollResize: true,
        scrollY: 500,
        scrollX: true,
        scrollCollapse: true,
        "dom": 'rt<"row"<"col-12 col-md-3"i><"col-12 col-md-4 padding-halaman"l><"col-12 col-lg-5...