heatmap.js
heatmap.js copied to clipboard
Published
20 hours ago •
pa7
pa7
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.
Running this I get the error: "Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0."
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="/Users/pavankatepalli/Dropbox/code/ruby/heatmap-ex/node_modules/heatmap.js/build/heatmap.js"></script>
</head>
<body>
<div id="container" style="width:"840px; height: 400px;>
</div>
<script type="text/javascript">
var domElement = document.querySelector("#container");
// minimal heatmap instance configuration
var heatmapInstance = h337.create({
// only container is required, the rest will be defaults
container: domElement
});
// now generate some random data
var points = [];
var max = 0;
var width = 840;
var height = 400;
var len = 200;
while (len--) {
var val = Math.floor(Math.random()*100);
max = Math.max(max, val);
var point = {
x: Math.floor(Math.random()*width),
y: Math.floor(Math.random()*height),
value: val
};
points.push(point);
}
// heatmap data format
var data = {
max: max,
data: points
};
console.log(data);
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);
</script>
</body>
</html>
Hey @pavankat , Just stumpled upon your issue and the reason you get this error is this line:
<div id="container" style="width:"840px; height: 400px;>
There's a CSS error. It should be like this:
<div id="container" style="width:840px; height: 400px;">
Hope that helps.
This issue can be marked as closed/done, since it is a typo mistake from what I understand.
