Unexplected results with Highcharts Heatmap

Question

Following the examples on their website, I have (mostly!) succeeded in arriving at a hybrid of their two examples to show a heatmap

1. http://www.highcharts.com/demo/heatmap
2. http://www.highcharts.com/demo/heatmap-canvas

The only problem is, I seem to have introduced a ~30degree slant to the diagram such that each day's column is misaligned. I have posted an example here:

http://jsfiddle.net/richardarnatt/LMSDX/

xAxis: {
  type: 'datetime',
  labels: {
     align: 'left',
     x: 10,
  },
  tickInterval: 7*24*3600*1000
}

I have tried commenting out lines to see if it cancels out the aberration, but so far I have had very little success. If anyone has encountered this before I would be delighted to hear your thoughts!

Answer 1

It looks like you are confusing the x-axis by not supplying proper dates. Try this:

$.each(perfData, function(i,v){
    var d = new Date(perfData[i][0]);
    var x = d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate();
    var y = d.getHours();
    var z = perfData[i][1]/1000;
    d.setHours(0);
    var a = [d.getTime(),y,z];
    mapData.push(a);
});

The d.setHours(0) ensures that each point in the day starts at the same place on the x-axis. d.getTime() puts in a proper time in x rather than a string.

You also need to change the colSize to be one day:

colsize: 24*3600*1000,

and the tick interval to be 1 day:

tickInterval: 24*3600*1000

http://jsfiddle.net/8Nptn/