This example shows a realtime heatmap with click data, if you click on the surface to the right it will add the datapoint right after the click.
Click on the heatmap in order to create datapoints!
<!DOCTYPE html>
<html lang="en">
...
<script type="text/javascript" src="heatmap.js"></script>
<script type="text/javascript">
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){
// layerX and layerY is deprecated and will be removed,
// use another way of determining the x and y position in an element
heatmap.store.addDataPoint(e.layerX, e.layerY, 1);
};
};
</script>
</html>