SliderRange on HighChart

Adds a jQuery slider on a highChart with multiple y-Axes to zoom in/out vertically

by rishad

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<table width="100%"><tr>
	<td width="95%"><div id="lineChart" style="min-width: 600px; height: 500px;"></div></td>
	<td width="5%" valign="top" align="center">
	<select id="selectSliderUnit" style="width: 20px;">
	<option value="0">ug/m^3</option><option value="1">mtr/sec</option><option value="2">degrees</option>
	</select><br><br><div id="pSliderBar" style="height: 400px;"></div></td>
</tr></table>

JavaScript

var ymax=0.0; var pSliderUnit=0;
$(function()
{
	$('#lineChart').highcharts({
		chart:{type:'line',zoomType:'xy'},
		title:{text:''},
		credits:{enabled:false},
		xAxis:{type: 'datetime',reversed: true},
		yAxis: [			
			{startOnTick: false,endOnTick: false,
			events: {afterSetExtremes: function(e) {
            $("#pSliderBar").slider("values", [e.min, e.max]);}},minRange: 0.01,
			showEmpty:false,labels:{format:'{value}'},title:{text:'\xB5g/m\xB3'},plotLines:[]},
			{startOnTick: false,endOnTick: false,
			events: {afterSetExtremes: function(e) {
            $("#pSliderBar").slider("values", [e.min, e.max]);}},minRange: 0.01,
			showEmpty:false,labels:{format:'{value}'},title:{text:'mtr/sec'},opposite:true,plotLines:[]},
			{startOnTick: false,endOnTick: false,
			events: {afterSetExtremes: function(e) {
            $("#pSliderBar").slider("values", [e.min, e.max]);}},minRange: 0.01,
			showEmpty:false,labels:{format:'{value}'},title:{text:'degrees'},plotLines:[]},
		],
		series:
		[
			{type:'spline',name:'Value 1',yAxis:0,tooltip:{valueSuffix:'\xB5g/m\xB3'},data:[[Date.UTC(2018,4,14,16,20,0),20.4],[Date.UTC(2018,4,14,16,30,0),17.6],[Date.UTC(2018,4,14,16,40,0),18.8],[Date.UTC(2018,4,14,16,50,0),18.9]]},
			{type:'spline',name:'Value 2',yAxis:0,tooltip:{valueSuffix:'\xB5g/m\xB3'},data:[[Date.UTC(2018,4,14,16,20,0),11.2],[Date.UTC(2018,4,14,16,30,0),10.5],[Date.UTC(2018,4,14,16,40,0),11.2],[Date.UTC(2018,4,14,16,50,0),10.9]]},
			{type:'spline',name:'Value 3',yAxis:0,tooltip:{valueSuffix:'\xB5g/m\xB3'},data:[[Date.UTC(2018,4,14,16,20,0),5.71],[Date.UTC(2018,4,14,16,30,0),5.77],[Date.UTC(2018,4,14,16,40,0),5.69],[Date.UTC(2018,4,14,16,50,0),5.91]]},
			{type:'spline',name:'Value 4',yAxis:0,tooltip:{valueSuffix:'\xB5g/m\xB3'},data:[[Date.UTC(2018,4,14,16,20,0),3.07],[Date.UTC(2018,4,14,16,30,0),3.04],[Date.UTC(2018,4,14,16,40,0),3.03],[Date.UTC(2018,4,14,16,50,0),3.03]]},
			{type:'spline',name:'Wind...