Demo of fixed date ranges with setExtremes()

Mike Zavarello

by Mike Zavarello

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<!-- month picker script: https://kidsysco.github.io/jquery-ui-month-picker/ -->
<script src="https://kidsysco.github.io/jquery-ui-month-picker/MonthPicker.min.js"></script>
<link href="https://kidsysco.github.io/jquery-ui-month-picker/MonthPicker.min.css" rel="stylesheet" type="text/css" />

<div id="container" style="height: 400px; width: 100%"></div>
View: <button id="button1yr" class="autocompare" value="1">1yr</button>
<button id="button5yr" class="autocompare" value="5">5yr</button>
<button id="button10yr" class="autocompare" value="10">10yr</button>
<button id="button20yr" class="autocompare" value="20">20yr</button>
<button id="button" class="autocompare" value="default">All</button>

<p>From:
<input type="text" id="datepickerMinYear_container" class="datepickerField" size="8">
To: <input type="text" id="datepickerMaxYear_container" class="datepickerField" size="8"></p>

JavaScript

//var thisChartPointStart = new Date(1990,0,1);


var OneUTCYear = 3600 * 24 * 365 * 1000;
//var OneUTCYear = 60 * 60 * 24 * 365.25 * 1000;

var thisData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
/* https://css-tricks.com/snippets/javascript/shuffle-array/ */
thisData.sort(function() { return 0.5 - Math.random() });



var chart = Highcharts.chart('container', {
    xAxis: {
        type: 'datetime',
        //startOnTick: true, 
  ...