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>

Fork me on GitHub