Currently I am trying to find a way to display timeseries data through a heatmap via highcharts, and I was wondering if there is a way to plot the data on this manner without resorting to using CSVs. The link below is the kind of chart I would like to reproduce:
https://www.highcharts.com/demo/heatmap-canvas
Currently this is my attempt at this, through using arrays to store the data, but for some reason the data is not plotting at all...
Highcharts.chart('container', {
data: {
//csv: document.getElementById('csv').innerHTML
},
chart: {
type: 'heatmap'
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts heat map',
align: 'left',
x: 40
},
subtitle: {
text: 'Temperature variation by day and hour through 2017',
align: 'left',
x: 40
},
xAxis: {
type: 'datetime',
min: Date.UTC(2017, 0, 1),
max: Date.UTC(2017, 0, 8, 23, 59, 59),
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}:00'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 6, 12, 18, 24],
tickWidth: 1,
min: 0,
max: 23,
reversed: true
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a'],
[1, '#c4463a']
],
min: -15,
max: 25,
startOnTick: false,
endOnTick: false,
labels: {
format: '{value}℃'
}
},
series: [{
data: [[2017-01-01,0,2.7],[2017-01-02,0,1.7],[2017-01-03,0,-0.7],[2017-01-04,0,2.5],[2017-01-05,0,-6.6],[2017-01-06,0,-9.2],[2017-01-07,0,1.7],[2017-01-08,0,-1.6]],
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EFEFEF',
colsize: 24 * 36e5, // one day
tooltip: {
headerFormat: 'Temperature<br/>',
pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
},
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}]
});
Link to my JSFiddle: https://jsfiddle.net/4581qd3b/
You have several ways to given data, simple object or arrays.
data1: [{
name: 'Point 1',
color: '#00FF00',
y: 1
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}],
data2: [0, 5, 3, 5],
data3: [
[1588771800000, 2.2, 75.16],
[1588858200000, 2, 75.93],
[1588944600000, 2, 77.53],
[1589203800000, 2, 78.75],
[1589290200000, 2, 77.85],
[1589376600000, 2.4, 76.91],
[1589463000000, 2, 77.39],
[1589549400000, 2, 76.93],
[1589808600000, 2, 78.74]
]
Live demo: https://jsfiddle.net/BlackLabel/m84f3spx/2/