# A heat map like chart using the drawing API rect object

This chart was inspired by Facebooks "heat map"-esque visualisation for determining what computers (though it doesn't have to be computers) are either malfunctioning or sending alerts. In a large datacenter each column could be a particular rack and each individual square a specific computer.

Each individual square is a drawing API Rect object - so each can be assigned its own tooltip, colors and click/mousemove events.

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.common.tooltips.js"></script>
    <script src="RGraph.drawing.rect.js"></script>
    <script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="600" height="250">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
        /**
        * The "data" that determines the colour of the blocks
        */
        alerts = [];
        alerts['34,7'] = {'color':'red','message':'Computer #37 is broken and needs shutting down and repairing'}
        alerts['52,7'] = {'color':'red','message':'Computer #68 is broken and needs shutting down and repairing'}
        alerts['53,7'] = {'color':'red','message':'Computer #69 is broken and needs shutting down and repairing'}
        alerts['54,7'] = {'color':'red','message':'Computer #70 is broken and needs shutting down and repairing'}
        alerts['14,19'] = {'color':'red','message':'Computer #135 is running hot','color':'yellow'}
        alerts['14,20'] = {'color':'red','message':'Computer #139 is loose','color':'yellow'}
        alerts['14,21'] = {'color':'red','message':'Computer #139 is old','color':'orange'}
        alerts['45,21'] = {'color':'red','message':'Computer #139 is old','color':'orange'}
        alerts['2,2'] = {'color':'red','message':'Computer #139 needs replacing','color':'orange'}
        alerts['18,5'] = {'color':'red','message':'Computer #139 needs repairing','color':'red'}

        window.onload = function ()
        {
            // 25 "clusters of computers" (sticking to the datacenter analogy)
            for (var y=0; y<25; ++y) {

                // 60 "Computers per cluster" (sticking to the datacenter analogy)
                for (var x=0; x<60; ++x) {
                    var rect = new RGraph.Drawing.Rect({
                        id: 'cvs',
                        x: x*10,
                        y: y*10,
                        width: 10,
                        height: 10,
                        options: {
                            strokestyle: 'rgba(0,0,0,0.05)'
                        }
                    })

                    if (alerts[x+','+y]) {
                        rect.set({
                            fillstyle: alerts[x+','+y].color,
                            tooltips: [alerts[x+','+y].message]
                        })
                    } else {
                        rect.set('fillstyle', 'rgba(100,255,100,0.2)');
                    }

                    rect.draw();
                }
            }
        };
    </script>