Highcharts.SparkLine = function (a, b, c) {
const hasRenderToArg = typeof a === 'string' || a.nodeName;
let options = arguments[hasRenderToArg ? 1 : 0];
const defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || (hasRenderToArg && a),
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible'
},
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
hideDelay: 0,
outside: true,
shared: true
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#910000',
borderColor: 'silver'
}
}
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
const start = +new Date(),
tds = Array.from(document.querySelectorAll('td[data-sparkline]')),
fullLen = tds.length;
let n = 0;
function doChunk() {
const time = +new Date(),
len = tds.length;
for (let i = 0; i < len; i += 1) {
const td = tds[i];
const stringdata = td.dataset.sparkline;
const arr = stringdata.split('; ');
const data = arr[0].split(', ').map(parseFloat);
const chart = {};
if (arr[1]) {
chart.type = arr[1];
}
Highcharts.SparkLine(td, {
series: [{
data: data,
pointStart: 1
}],
tooltip: {
headerFormat: '<span style="font-size: 10px">' + td.parentElement.querySelector('th').innerText + ', Q{point.x}:</span><br/>',
pointFormat: '<b>{point.y}.000</b> USD'
},
chart: chart
});
n += 1;
if (new Date() - time > 500) {
tds.splice(0, i + 1);
setTimeout(doChunk, 0);
break;
}
if (n === fullLen) {
document.getElementById('result').innerHTML = 'Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms';
}
}
}
doChunk();