This example also shows a static heatmap but it contains a legend in order to determine what color means what value
Click on the heatmap in order to refresh the dataset
<!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);
// 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>