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

This example shows a realtime heatmap with mouse movement data, if you click on the surface to the right it will add the datapoint right after the click.
Move over the surface in order to create datapoints for the heatmap!

    <!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,
            legend: {
                position: 'br',
                title: 'Mouse Movement Distribution'
            }
        };

        //creates and initializes the heatmap
        var heatmap = h337.create(config);

        var active = true,
            idle = false,
            over = false,
            x = 0,
            y = 0,
            simulate = false;

        // activate capture mode
        setInterval(function(){
            active = true;
        }, 80);

        // check whether the mouse is idling
        var idlechecker = setInterval(function(){
            if(over && !simulate){
                // if it's idling -> start the simulation
                // and add the last x/y coords
                simulate = setInterval(function(){
                    heatmap.store.addDataPoint(x, y, 1);
                }, 1000);
            }
        }, 150);

        var add = function(e){
            x = e.layerX;
            y = e.layerY
            heatmap.store.addDataPoint(x, y, 1);
        };

        var element = document.getElementById("heatmapArea");

        element.onmousemove = function(e){
            over = true;
            if(simulate){
                clearInterval(simulate);
                simulate = false;
            }

            if(active){
                add(e);
                active = false;
            }
        };
        element.onclick = function(e){
            add(e);
        };
        element.onmouseout = function(){
            over = false;
        };
    };
    </script>
    </html>