title: Heatmap.js clickable heatmap
body: <p>Im using <a href="http://www.patrick-wied.at/static/heatmapjs/index.html" rel="nofollow">Heatmap.js</a> to create a clickable heatmap. Im trying the following code unsuccessfully. </p>
  
  <p>The legend is being displayed, but click on the canvas is not generating the heatmap like its <a href="http://www.patrick-wied.at/static/heatmapjs/example-heatmap-click.html" rel="nofollow">supposed to</a>. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="heatmap.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
  window.onload = function(){
  // heatmap configuration
  var config = {
  element: document.getElementById("heatmapArea"),
  radius: 30,
  opacity: 50,
  legend: {
  position: 'br',
  title: 'Example Distribution'
  }
  };
  //creates and initializes the heatmap
  var heatmap = h337.create(config);
  
  document.getElementById("heatmapArea").onclick = function(e){
  heatmap.store.addDataPoint(e.layerX, e.layerY, 1);
  };
  };
  
  &lt;/script&gt;
  
  &lt;div id ="heatmapArea"&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>