JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 750px; margin: 0 auto"></div>
JavaScript
$(function () {
(function (H) {
H.wrap(H.Series.prototype, "processData", function (c) {
var chart = this.chart,
dg = this.options.dataGrouping,
currentUnits = dg.units[0][0],
min = chart.xAxis[0].min,
targetUnit = getUnitFromRangeStart(min);
if (currentUnits !== targetUnit) {
console.log('Changing interval from ' + currentUnits + ' to ' + targetUnit);
/* Change grouping for all charts other than the navigator */
dg.units = [
[targetUnit, [1]]
];
}
c.call(this);
});
})(Highcharts);
/* Create sample data */
var messagesData = [],
connectionsData = [];
function fabricateInterval(start, end, interval, periodAdjuster) {
for (var time = start; time < end; time += interval) {
var messageVal = Math.round(Math.random() * 100000);
if (periodAdjuster) {
messageVal = Math.round(messageVal / periodAdjuster);
}
messagesData.push([time, messageVal]);
connectionsData.push([time, Math.round(Math.random() * 10000)]);
}
}
var now = new Date().getTime(),
minuteInMs = 60 * 1000,
hourInMs = 60 * minuteInMs,
dayInMs = 24 * hourInMs,
fromTime = now - 720 * dayInMs;
/* Intervals by day until 14 days ago */
fabricateInterval(fromTime, now - 15 * dayInMs, dayInMs, 1);
/* By hour until 8 hours ago */
fabricateInterval(now - 15 * dayInMs, now - (8 * hourInMs), hourInMs, 60);
/* By minute until now */
fabricateInterval(now - (8 * hourInMs), now, minuteInMs, 3600);
/* End of create sample data */
var getUnitFromRangeStart = function (startTime) {
var hourInMs = 60 * 60 * 1000;
if (startTime < now - 14 * 24 * hourInMs) {
return 'day';
} else if...