// Init works well
var ch1 = Highcharts.chart('chart1', {
chart: { type: 'heatmap' },
xAxis: { categories: ['X1', 'X2'] },
yAxis: { categories: ['Y1', 'Y2'] },
colorAxis: { minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] },
series: [{
name: 'Z', turboThreshold: 0,
data: [[0, 0, 0], [1, 0, 1], [0, 1, 2], [1, 1, 3]],
dataLabels: { enabled: true, color: '#000000' }
}],
legend: {
align: 'right', layout: 'vertical',
margin: 0, verticalAlign: 'top',
y: 32, symbolHeight: 280
}
});
// This works wrong
function update() {
var data = {
values: [[0, 0, 453], [1, 2, 625], [0, 1, 213], [0, 2, 234]],
xtitle: 'Sum',
xnames: ['300-500', '500-700'],
ytitle: 'Freq',
ynames: ['0-50', '51-100', '101-200']
};
ch1.xAxis[0].setTitle({ text: data.xtitle });
ch1.yAxis[0].setTitle({ text: data.ytitle });
ch1.xAxis[0].setCategories(data.xnames, true);
ch1.yAxis[0].setCategories(data.ynames, true);
ch1.series[0].setData(data.values);
}
// Change the values
setTimeout(update, 3000);
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<div id="chart1" style="min-width: 310px; height: 240px; margin: 0 auto"></div>