CODEWITHSUNDEEP
javascripthighchartsheatmap
user3692703
user3692703

Reputation: 31

HIghcharts Heatmap Overload with Too Much Data?

$(function() {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 0.5
},
title: {
text: 'Number'
},
xAxis: {
categories: [ .......... ]
},
yAxis: {
categories: [  .......... ],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function() {
return '' + 
this.series.xAxis.categories[this.point.x] + 
'<br>' + 
this.series.yAxis.categories[this.point.y] + 
'<br>' + this.point.value;
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ ..........  ],

http://jsfiddle.net/Slate_Shannon/0mvgmhLb/6/

This is a heatmap chart. The chart looks okay as-is, but should have more data. However, if I add any additional data, the chart breaks.

Note that a large part of the data is commented out. This starts with the data that begins with

[50,0,null],
[50,1,8380],
[50,2,37430],

(note that I removed the axis labels and the data in the code shown above.) If you change the position of the beginning of the comment tag to so that the "50" data gets charted, then the chart fails.

Is this just too much data, or is there a way to create a heatmap that needs to be approx 20 x 90 cells?

Upvotes: 1

Views: 1387

Answers (3)

Shadowfool
Shadowfool

Reputation: 1036

This can be solved by providing the colorAxis with a min and max value. Highcharts has issues with calculating the max value with extremely large data sets.

Upvotes: 0

George Kagan
George Kagan

Reputation: 6124

Try loading the Highcharts Boost module.

The boost.js module is a module to allow quick loading of hundred thousands of data points in Highcharts.

Instead of relying solely on SVG to display the graph, this module does the following to boost performance:

... drawing the graph on a canvas, then copying over the contents to an image tag inside the SVG, using a data URL.

Link to official blog post.

Just load the module after highcharts.js (lib/modules/boost.js).

Upvotes: 1

morganfree
morganfree

Reputation: 12472

Set turboThreshold to 0, from the Highcharts API:

When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 1000.

http://api.highcharts.com/highcharts/plotOptions.heatmap.turboThreshold

Example: http://jsfiddle.net/0mvgmhLb/7/

 series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        turboThreshold: 0,
        ...

Upvotes: 2

Related Questions