Highcharts Configuration Preview
/**
* Create a constructor for sparklines that takes some sensible defaults and merges in the individual
* chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
*/
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'
},
// small optimalization, saves 1-2 ms each sparkline
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;
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
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 the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
tds.splice(0, i + 1);
setTimeout(doChunk, 0);
break;
}
// Print a feedback on the performance
if (n === fullLen) {
document.getElementById('result').innerHTML = 'Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms';
}
}
}
doChunk();
State | Income | Income per quarter | Costs | Costs per quarter | Result | Result per quarter |
---|---|---|---|---|---|---|
Alabama | 254 | 296 | -42 | |||
Alaska | 246 | 181 | 65 | |||
Arizona | 101 | 191 | -90 | |||
Arkansas | 303 | 76 | 227 | |||
California | 200 | 217 | -17 | |||
Colorado | 118 | 273 | -155 | |||
Connecticut | 201 | 148 | 53 | |||
Delaware | 161 | 298 | -137 | |||
District of Columbia | 106 | 185 | -79 | |||
Florida | 249 | 244 | 5 | |||
Georgia | 183 | 212 | -29 | |||
Hawaii | 232 | 172 | 60 | |||
Idaho | 166 | 152 | 14 | |||
Illinois | 336 | 151 | 185 | |||
Indiana | 216 | 216 | 0 | |||
Iowa | 135 | 159 | -24 | |||
Kansas | 184 | 215 | -31 | |||
Kentucky | 289 | 219 | 70 | |||
Louisiana | 257 | 201 | 56 | |||
Maine | 194 | 133 | 61 | |||
Maryland | 204 | 157 | 47 | |||
Massachusetts | 172 | 115 | 57 | |||
Michigan | 177 | 185 | -8 | |||
Minnesota | 99 | 137 | -38 | |||
Mississippi | 205 | 179 | 26 | |||
Missouri | 135 | 202 | -67 | |||
Montana | 195 | 237 | -42 | |||
Nebraska | 286 | 232 | 54 | |||
Nevada | 221 | 214 | 7 | |||
New Hampshire | 136 | 306 | -170 | |||
New Jersey | 194 | 147 | 47 | |||
New Mexico | 207 | 261 | -54 | |||
New York | 316 | 193 | 123 | |||
North Carolina | 175 | 188 | -13 | |||
North Dakota | 181 | 288 | -107 | |||
Ohio | 189 | 163 | 26 | |||
Oklahoma | 188 | 172 | 16 | |||
Oregon | 165 | 257 | -92 | |||
Pennsylvania | 268 | 129 | 139 | |||
Rhode Island | 164 | 182 | -18 | |||
South Carolina | 91 | 193 | -102 | |||
South Dakota | 184 | 221 | -37 | |||
Tennessee | 233 | 131 | 102 | |||
Texas | 211 | 225 | -14 | |||
Utah | 362 | 225 | 137 | |||
Vermont | 119 | 152 | -33 | |||
Virginia | 127 | 71 | 56 | |||
Washington | 165 | 245 | -80 | |||
West Virginia | 248 | 171 | 77 | |||
Wisconsin | 183 | 224 | -41 | |||
Wyoming | 231 | 251 | -20 |