function getData(n) {
var arr = [],
i,
x,
a,
b,
c,
spike;
for (
i = 0, x = Date.UTC(new Date().getUTCFullYear(), 0, 1) - n * 36e5;
i < n;
i = i + 1, x = x + 36e5
) {
if (i % 100 === 0) {
a = 2 * Math.random();
}
if (i % 1000 === 0) {
b = 2 * Math.random();
}
if (i % 10000 === 0) {
c = 2 * Math.random();
}
if (i % 50000 === 0) {
spike = 10;
} else {
spike = 0;
}
arr.push([
x,
2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
]);
}
return arr;
}
var n = 500000,
data = getData(n);
console.time('line');
Highcharts.chart('container', {
chart: {
zoomType: 'x',
panning: true,
panKey: "shift"
},
title: {
text: 'Highcharts drawing ' + n + ' points'
},
subtitle: {
text: 'Using the Boost module'
},
tooltip: {
valueDecimals: 2
},
xAxis: {
type: 'datetime'
},
series: [{
data: data,
lineWidth: 0.5,
name: 'Hourly data points'
}]
});
console.timeEnd('line');
// Prepare the data
var data = [],
n = 1000000,
i;
for (i = 0; i < n; i += 1) {
data.push([
Math.pow(Math.random(), 2) * 100,
Math.pow(Math.random(), 2) * 100
]);
}
if (!Highcharts.Series.prototype.renderCanvas) {
throw 'Module not loaded';
}
//Scatter
console.time('scatter');
Highcharts.chart('containerScatter', {
chart: {
zoomType: 'xy',
height: '100%',
panning: true,
panKey: 'shift'
},
boost: {
useGPUTranslations: true,
usePreAllocated: true
},
xAxis: {
min: 0,
max: 100,
gridLineWidth: 1
},
yAxis: {
// Renders faster when we don't have to compute min and max
min: 0,
max: 100,
minPadding: 0,
maxPadding: 0,
title: {
text: null
}, events: {
setExtremes: function(e) {
let thisChart = this.chart;
// Prevent feedback loop and cancel function if no sync group is applied.
if (e.trigger !== 'syncExtremes' && typeof thisChart.userOptions.syncGroup !== 'undefined') {
Highcharts.charts.filter(function(chart) {
return chart !== thisChart && typeof chart !== 'undefined' && chart.userOptions.syncGroup === thisChart.userOptions.syncGroup;
})
.filter(function(syncedChart) {
return syncedChart.yAxis[0].setExtremes;
})
.forEach(function(item) {
if (!item.inverted) {
item.yAxis[0].setExtremes(
e.min,
e.max,
undefined,
false,
{ trigger: 'syncExtremes' }
);
} else {
item.yAxis[0].setExtremes(
e.min,
e.max,
undefined,
false,
{ trigger: 'syncExtremes' }
);
}
});
}
(function (H) {
H.wrap(H.Chart.prototype, 'pan', function (proceed) {
console.log("We are about to draw the graph:", this);
let chart = this,
hoverPoints = chart.hoverPoints,
doRedraw,
e = arguments[1],
each = H.each;
// remove active points for shared tooltip
if (hoverPoints) {
each(hoverPoints, function (point) {
point.setState();
});
}
let mousePosX = e.chartX,
mousePosY = e.chartY,
xAxis = chart.xAxis[0],
yAxis = chart.yAxis[0],
startPosX = chart.mouseDownX,
startPosY = chart.mouseDownY,
halfPointRangeX = (xAxis.pointRange || 0) / 2,
halfPointRangeY = (yAxis.pointRange || 0) / 2,
extremesX = xAxis.getExtremes(),
newMinX = xAxis.toValue(startPosX - mousePosX, true) + halfPointRangeX,
newMaxX = xAxis.toValue(startPosX + chart.plotWidth - mousePosX, true) - halfPointRangeX,
extremesY = yAxis.getExtremes(),
newMaxY = yAxis.toValue(startPosY - mousePosY, true) + halfPointRangeY,
newMinY = yAxis.toValue(startPosY + chart.plotHeight - mousePosY, true) - halfPointRangeY;
if (xAxis.series.length && newMinX > Math.min(extremesX.dataMin, extremesX.min) && newMaxX < Math.max(extremesX.dataMax, extremesX.max) && newMinY > Math.min(extremesY.dataMin, extremesY.min) && newMaxY < Math.max(extremesY.dataMax, extremesY.max)) {
xAxis.setExtremes(newMinX, newMaxX, false, false, {
trigger: 'pan'
});
yAxis.setExtremes(newMinY, newMaxY, false, false, {
trigger: 'pan'
});
doRedraw = true;
}
// set new reference for next run
chart.mouseDownX = mousePosX;
chart.mouseDownY = mousePosY;
if (doRedraw) {
chart.redraw(false);
}
console.log("We are finished to draw the graph:", this);
});
}
(Highcharts));
},
}
},
title: {
text: 'Scatter chart with 1 million points'
},
legend: {
enabled: false
},
series: [{
type: 'scatter',
color: 'rgba(152,0,67,0.1)',
data: data,
marker: {
radius: 0.1
},
tooltip: {
followPointer: false,
pointFormat: '[{point.x:.1f}, {point.y:.1f}]'
}
}]
});
console.timeEnd('scatter');
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>
<div id="containerScatter"></div>