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

<div id="placeholder" style="width:500px; height:300px;"></div>
<div id="modal" class="modal hide fade">
    <div class="modal-body">Data Table</div>
    <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>
 
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>        
    </table>
    <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);
  });


var dataSet = [
    
      ["Tiger Nixon", "System Architect", "Edinburg", "5421","2011/04/25", "$320,800"]
    ];
   
    

  //fires the plotclick
  $("#placeholder").bind("plotclick", function (event, pos, item) {
      if (item) {
           $('#modal').modal('show'); 
      
      $(document).ready(function() {
    $('#table').dataTable( {
        //"ajax": "data/objects.txt",
        "url": "/echo/json/",
        "data":dataSet,
        
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            {...