Highcharts synchronization multiple lines

by Nhi Nguyen

HTML

<!-- <script src="http://code.highcharts.com/highcharts.src.js"></script> -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> -->
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> -->
<!-- <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> -->
<div id="container"></div>

CSS

.chart {
    min-width: 320px;
    max-width: 800px;
    height: 420px;
    margin: 0 auto;
}
/* </style> <!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> */

JavaScript

$(function () {
Highcharts.setOptions({
  lang: {
    thousandsSep: ','
  },
  global: {
    useUTC: true
  }
  });
  var vert = 1536249600000;
  var total_pwr = [[1536249600000, 0.312],[1536267600000, 0.002],[1536285600000, 0.17],[1536303600000, 0.271],[1536321600000, 0.48],[1536336000000, 0.627]]
  var obs = [[1536162600000, 1.9929599609375],[1536177600000, 0.4600799865722656],[1536192600000, 1.8688800048828125],[1536222600000, 0.011480002403259276],[1536234600000, 0.16642002868652345],[1536247800000, 0.47111996459960936]]
  var avg = [[1536249600000, 1.489503],[1536267600000, 1.40469],[1536285600000, 1.6185318],[1536303600000, 0.5962718],[1536321600000, 0.79667],[1536336000000, 1.489503]]
  var prior = [[1536163200000, 1.953],[1536181200000, 0.727],[1536199200000, 0.457],[1536217200000, 0.03],[1536235200000, 0.273],[1536249600000, 0.274]]
  var total_spd=[[1536249600000, 5.357],[1536267600000, 2.542],[1536285600000, 4.504],[1536303600000, 5.16],[1536321600000, 6.112],[1536336000000, 6.665]]
  var obs_spd = [[1536162600000, 12.189574086797444],[1536192300000, 10.264534969294136],[1536192600000, 10.247496883402752],[1536222300000, 2.8929573693816293],[1536222600000, 2.9252307510959468],[1536248700000, 6.47852489708559]]
  var avg_spd = [[1536249600000, 9.3299],[1536267600000, 10.5634],[1536285600000, 10.3039],[1536303600000, 6.1177],[1536321600000, 6.867],[1536336000000, 9.3299]]
  var prior_spd = [[1536163200000, 10.954],[1536181200000, 7.012],[1536199200000, 6.025],[1536217200000, 3.168],[1536235200000, 5.157],[1536249600000, 5.162]]
  
  var data1 = [total_pwr,obs,prior,avg]
  var data2 =[total_spd,obs_spd,prior_spd,avg_spd]
  
  var dataset = [data1,data2]
  
    /**
      * In order to synchronize tooltips and crosshairs, override the
      * built-in events with handlers defined on the parent element.
      */
      $('#container').bind('mousemove touchmove touchstart', function (e) {
          var chart,
          points,
          i,
         ...