Plotting a Highcharts Heat map from irregular data - highcharts

Question

I need to get a heat map that looks somehow like this chart.
It should be done using the Highcharts Heat Map.
The thing with this case is the nature of the data to be plotted, which is included in this link
This data comes from marine vehicles that perform repeated measurements at differents depth for a given parameter lets say. We could have for example:
2018-05-25 10:34:38.500,0.793,19.1935
2018-05-25 10:35:02.660,1.102,19.1851
2018-05-25 10:35:27.040,1.521,19.1792
2018-05-25 10:35:51.240,1.946,19.1808
2018-05-25 10:36:15.400,2.377,19.1745
2018-05-25 10:36:39.600,2.802,19.1726
2018-05-25 10:37:03.740,3.233,19.1703
2018-05-25 10:37:28.010,3.651,19.1615
2018-05-25 10:37:52.150,4.087,19.1645
2018-05-25 10:38:16.310,4.516,19.0939
2018-05-25 10:38:40.520,4.954,19.0345
2018-05-25 11:39:10.810,0.773,19.2568
2018-05-25 11:39:35.030,1.187,19.2086
2018-05-25 11:39:59.190,1.601,19.1897
2018-05-25 11:40:23.440,2.033,19.1781
2018-05-25 11:40:47.600,2.467,19.1768
2018-05-25 11:41:11.760,2.901,19.1645
...
2018-06-11 06:50:39.000,0.804,19.7988
2018-06-11 06:51:03.140,1.26,19.7534
2018-06-11 06:51:27.300,1.738,19.3438
2018-06-11 06:51:51.430,2.221,19.3161
2018-06-11 06:52:15.660,2.705,19.264
...
Where the columns are the timestamp in human readable format, the depth and the temperature.
For any given day, the depth of the measurements varies and also the number of measurements. Within the same day the vehicle go a few times to the surface and then go back to dive again.
can someone please point me the right direction to start?
Thanks in advance.

Answer 1

With the help of ewolden, got this working solution. See this JSFiddle.
Highcharts.chart('container', {
data: {
csv: document.getElementById('csv').innerHTML
},
chart: {
type: 'heatmap',
width: 640,
height:480
/*margin: [60, 50, 80, 100]*/
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts heat map',
align: 'left',
x: 40
},
subtitle: {
text: 'Temperature variation by day and depth May - June 2018',
align: 'left',
x: 40
},
xAxis: {
type: 'datetime',
min: 1527244478500,
max: 1528799894080,
/*min: Date.UTC(2018, 05, 25),
max: Date.UTC(2018, 16, 12 23, 59, 59),*/
dateTimeLabelFormats: {
day: "%e. %b",
month: "%b '%y",
year: "%Y"
},
/*labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},*/
showLastLabel: true,
tickLength: 16
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}m'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [200, 400,600,800],
tickWidth: 1,
min: 5,
max: 960,
reversed: true
},
colorAxis: {
stops: [
/*[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a'],
[1, '#c4463a']*/
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a']
],
min: 7,
max: 20,
startOnTick: false,
endOnTick: false,
labels: {
format: '{value}℃'
},
/*tickInterval: 2.5*/
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EFEFEF',
colsize: 24*36e5, // one day
rowsize:3,
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
}]
});
Its based on the higcharts JSFiddle for large heatmaps.
Like ewolden mentioned in his comment, watch out the use of the parameter rowsize, very important in this particular case.