# Examples See how easy it is to create heatmaps with heatmap.js

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>