multiple jqplot with hoverover values and dates

by kmburke84

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.selection.js"></script>
<h2>flottest</h2>

<div class="demo-container">
  <div id="placeholder1" style="width:530px;height:200px"></div>
</div>
<div class="demo-container">
  <div id="placeholder2" style="width:530px;height:200px"></div>
</div>
<div class="demo-container">
  <div id="placeholder3" style="width:530px;height:200px"></div>
</div>
<div class="demo-container">
  <div id="placeholder4" style="width:530px;height:200px"></div>
</div>
<div class="demo-container">
  <div id="placeholder5" style="width:530px;height:200px"></div>
</div>
<div class="demo-container">
  <div id="placeholder6" style="width:530px;height:200px"></div>
</div>

CSS

.miniature {
  margin-top: 100px;
  margin-left: 20px;
}

JavaScript

$(function() {

      

      // A null signifies separate line segments

      //json data 
      var jdata = "[{\"yr\":2016,\"mo\":\"June\",\"CJP\":15},{\"yr\":2012,\"mo\":\"July\",\"CJP\":31},{\"yr\":2012,\"mo\":\"January\",\"CJP\":23},{\"yr\":2012,\"mo\":\"July\",\"CJP\":24}]";

      var data = $.parseJSON(jdata);

      var monthArray = [];
      var yearArray = [];
      var dateCompletePercentArray = [];
      var jobsArray = [];
      var completedJobsArray = [];
      var completedJobsPercentageArray = [];
      var pandePerDurationJoTArray = [];
      var pandePerDurationJLArray = [];
      var pandePerDurationJoTPercentArray = [];

      for (i = 0; i < data.length; i++) {
        monthArray[i] = data[i].mo;
        yearArray[i] = data[i].yr;
        dateCompletePercentArray[i] = data[i].CJP;
      }

      var formedjdate = "";
      var tempdate = "";
      for (i = 0; i < monthArray.length; i++) {

        var jdate = (Date.parse(monthArray[i].substring(0, 3) + " 1, " + yearArray[i]));
        if (i == monthArray.length - 1) {
          tempdate = "[" + (jdate) + "," + dateCompletePercentArray[i] + "]";
        } else {
          tempdate = "[" + (jdate) + "," + dateCompletePercentArray[i] + "]" + ",";
        }
        formedjdate = formedjdate + tempdate;
      }
      var newformedjdate = "[" + formedjdate + "]";
      var finalData = JSON.parse(newformedjdate);

      function getData(newformedjdate) {
        return [{
          label: "line1",
          data: finalData
        }];
      }
      //Chart 1
      var options1 = {
        legend: {
          show: true,
          noColumns: 2
        },
        series: {
          lines: {
            show: true
          },
          points: {
            show: true
          }
        },
        xaxis: {
          show: true,
          mode: "time",
          minTickSize: [1, "month"]
            //timeformat: "%m"/"%y",
            //min: [(yearArrayMinMilliSec * 1000), 119],
           ...