This example shows a simple static heatmap. In this context static means that the data will not be changed at any time after the heatmap creation process.
Click on the heatmap in order to refresh the dataset
<!DOCTYPE html>
<html lang="en">
...
<div id="heatmapArea" />
<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
};
//creates and initializes the heatmap
var heatmap = h337.create(config);
// let's get some data
var data = {
max: 20,
data: [
{ x: 10, y: 20, count: 18 },
{ x: 25, y: 25, count: 14 },
{ x: 50, y: 30, count: 20 }
// ...
]
};
heatmap.store.setDataSet(data);
};
</script>
</html>