Highcharts zoom selection
by Kieran Dang
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="clear" style="margin-top: 100px">Clear selection</button>
JavaScript
$(function () {
var data = [
[Date.UTC(2015, 9, 27, 0, 0), 0.7695],
[Date.UTC(2015, 9, 27, 0, 15), 0.7648],
[Date.UTC(2015, 9, 27, 0, 30), 0.7645],
[Date.UTC(2015, 9, 27, 0, 45), 0.7638],
[Date.UTC(2015, 9, 27, 1, 0), 0.7549],
[Date.UTC(2015, 9, 27, 1, 15), 0.7562],
[Date.UTC(2015, 9, 27, 1, 30), 0.7574],
[Date.UTC(2015, 9, 27, 1, 45), 0.7543],
[Date.UTC(2015, 9, 27, 2, 0), 0.7510],
[Date.UTC(2015, 9, 27, 2, 15), 0.7498],
[Date.UTC(2015, 9, 27, 2, 30), 0.7477],
[Date.UTC(2015, 9, 27, 2, 45), 0.7492],
[Date.UTC(2015, 9, 27, 3, 0), 0.7487],
[Date.UTC(2015, 9, 27, 3, 15), 0.7480],
[Date.UTC(2015, 9, 27, 3, 30), 0.7466],
[Date.UTC(2015, 9, 27, 3, 45), 0.7521],
[Date.UTC(2015, 9, 27, 4, 0), 0.7564],
[Date.UTC(2015, 9, 27, 4, 15), 0.7621],
[Date.UTC(2015, 9, 27, 4, 30), 0.7630],
[Date.UTC(2015, 9, 27, 4, 45), 0.7623],
[Date.UTC(2015, 9, 27, 5, 0), 0.7644],
[Date.UTC(2015, 9, 27, 5, 15), 0.7685],
[Date.UTC(2015, 9, 27, 5, 30), 0.7671],
[Date.UTC(2015, 9, 27, 5, 45), 0.7687],
[Date.UTC(2015, 9, 27, 6, 0), 0.7687],
[Date.UTC(2015, 9, 27, 6, 15), 0.7654],
[Date.UTC(2015, 9, 27, 6, 30), 0.7705],
[Date.UTC(2015, 9, 27, 6, 45), 0.7687],
[Date.UTC(2015, 9, 27, 7, 0), 0.7744],
[Date.UTC(2015, 9, 27, 7, 15), 0.7793],
[Date.UTC(2015, 9, 27, 7, 30), 0.7804],
[Date.UTC(2015, 9, 27, 7, 45), 0.7770],
[Date.UTC(2015, 9, 27, 8, 0), 0.7824],
[Date.UTC(2015, 9, 27, 8, 15), 0.7705],
[Date.UTC(2015, 9, 27, 8, 30), 0.7635],
[Date.UTC(2015, 9, 27, 8, 45), 0.7652],
[Date.UTC(2015, 9, 27, 9, 0), 0.7656],
[Date.UTC(2015, 9, 27, 9, 15), 0.7655],
[Date.UTC(2015, 9, 27, 9, 30), 0.7598],
[Date.UTC(2015, 9, 27, 9, 45), 0.7619],
[Date.UTC(2015, 9, 27, 10, 0), 0.7628],
...