highcharts mod Zoom

by jpeter06

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<button onclick="viewZoom()">
viewZoomX
</button>
<button onclick="changeZoom()">
changeZoomX
</button>
min:<input id="min" type="number" value="1" step="0.1">
max:<input id="max" type="number" value="2" step="0.1">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

#max, #min{
  width:60px;
}

JavaScript

var updating = false;

function viewZoom(){
	var index = document.getElementById('container').dataset.highchartsChart;
  var chart = Highcharts.charts[index];
  var extremes = chart.yAxis[0].getExtremes();
  if(extremes.userMin || extremes.userMax)
  	alert(JSON.stringify(extremes));
  else
  	alert("NO ZOOM")
}

function changeZoom(){
	var index = document.getElementById('container').dataset.highchartsChart;
  var chart = Highcharts.charts[index];
  var extremes = chart.yAxis[0].getExtremes();
  if(extremes.userMin || extremes.userMax){
    let min = Number(document.getElementById("min").value);
    let max = Number(document.getElementById("max").value);
    //alert("min: " + chart.yAxis[0].min + " max: " + chart.yAxis[0].max + " " +
    	//		Math.max(min, extremes.min) + ", " + Math.min(max ,extremes.max));
    chart.yAxis[0].setExtremes(Math.max(min, extremes.min),Math.min(max,
    extremes.max));
  }
}


$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'First Chart'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' :
                'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime',
            events: {
                afterSetExtremes: function (event) {
                    
                }
            },
            minRange: 14 * 24 * 3600000 // fourteen days
        },
        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },

        series: [{
            type: 'area',
            name: 'USD to EUR',
            pointInterval: 24 * 3600 * 1000,
            pointStart: Date.UTC(2006, 0, 1),
            data: [
            0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
            0.8283, 0.8278, 1, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
   ...