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>

Fork me on GitHub