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>

Fork me on GitHub