ERDDAP JSON HighCharts Multiple Charts

Draft of multiple highcharts fed by ERDDAP REST API JSON output. Common Navigator and time selection. Show values on hover. Work in progress - known issues with time zoom, additional parameters to add, potential to combine some parameters into multi-axes plots.

by Jenn Patterson Sevadjian

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div id="container" style="min-height:300px"></div>

CSS

#container {
   padding: 10px 80px;
 }
 
 .chart {
   height: 200px;
   padding: 0px 0px;
 }
 
 .chart.topchart {
   height: 250px;
 }
 
 #time {
   height: 90px;
 }
 
 #navchart.chart {
   height: 90px;
 }
 
 .highcharts-range-selector-buttons {
   padding-bottom: 30px;
 }

JavaScript

var t0 = performance.now();

  // Highcharts datepicker relies on this 'browser' function which is
  // no longer included in jquery
  jQuery.browser = {};
  (function() {
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
      jQuery.browser.msie = true;
      jQuery.browser.version = RegExp.$1;
    }
  })();

  // get dates to use later in data query
  // multiple queries 
  //(one that is shorter and loads fast, then another)
  var d = new Date().getTime();
  var d1 = new Date(d - (8 * 3600 * 1000 * 24)); // sets first load # of days
  var d2 = new Date(d - (400 * 3600 * 1000 * 24)); // sets first load # of days
  var n = d1.toISOString();
  var n2 = d2.toISOString();

  function mouseEv(e) {
    var chart, point, i, event;
    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
      chart = Highcharts.charts[i];
      event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
      point = chart.series[0].searchPoint(event, true); // Get the hovered point
      if (point) {
        if (chart['chartHeight'] != 90 && chart.xAxis[0].min > Math.pow(10, 12)) { 
          point.highlight(e);
        }
      }
    }
  }

  // Tooltip hover sync
  $('#container').bind('mousemove touchmove touchstart', mouseEv);

  //Override the reset function, we don't need to hide the tooltips and crosshairs.
  Highcharts.Pointer.prototype.reset = function() {
    return undefined;
  };

  //Highlight a point by showing tooltip, setting hover state and drawing crosshair
  Highcharts.Point.prototype.highlight = function(event) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };

  //Function to link x-axes on zoom
  function syncExtremes(e) {
    //get new min and max from current chart  
    var xMin = e.min;
    var xMax = e.max;

    // prevent crazy loop
    if (e.trigger !== 'syncExtremes') {
...