Actualmente estoy tratando de encontrar una manera de mostrar datos de series temporales a través de un mapa de calor a través de gráficos altos, y me preguntaba si hay una manera de trazar los datos de esta manera sin recurrir al uso de CSV. El siguiente enlace es el tipo de gráfico que me gustaría reproducir:

https://www.highcharts.com/demo/heatmap-canvas

Actualmente, este es mi intento de esto, mediante el uso de matrices para almacenar los datos, pero por alguna razón, los datos no se trazan en absoluto ...

 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 }] });

Enlace a mi JSFiddle: https://jsfiddle.net/4581qd3b/