CODEWITHSUNDEEP
javascriptcanvasheatmap
Umer
Umer

Reputation: 97

Unable to generate simple heatmap with heatmap.js

    <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The Vortex</title>
  <meta name="description" content="Data Visualization Vault">
  <link rel="stylesheet" href="css/styles.css">
  <!--<script type="text/javascript" src="scripts/heatmap.js"></script> -->
  <script type="text/javascript" src="scripts/heatmap.min.js"></script>


</head>

<body>

  <h1 style="padding: 20px"><a style="color: #41FF67">Vor</a><a style="color: #8E8E8E">tex</a></h1>
    <div class="navbar">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul> 
    </div>



      <div style="position: relative;" class="heatmap">
        <canvas style="position: absolute; left: 0px; top: 0px;" height="400" width="834" class="heatmap-canvas"></canvas>    
      </div>
<script type="text/javascript">
var heatmapInstance = h337.create({
  // only container is required, the rest will be defaults
  container: document.querySelector('.heatmap')
});

// 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 
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);
</script>
</body>
</html>

I am following this example. I am not sure what I am doing wrong. I get blank white canvas but not any heatmap whatsoever. I don't know if I have included everything that is needed to run this. Can somebody explain this to me.

Upvotes: 0

Views: 2036

Answers (1)

DennisvB
DennisvB

Reputation: 1018

http://jsfiddle.net/xh2yrdt7/

<div style="position: relative; height: 400px; width: 400px;" class="heatmap"></div>

Look at this example.

I gave the .heatmap element a width and a height and removed the canvas element.

This should work for you.

Upvotes: 2

Related Questions