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

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>