Heat map

[petermcs]

Is there any way to produce "heat map" displays of energy usage with Mango? We are looking at an energy management project and one of the (many) things they have requested is heat maps.

[phildunlap]

Hi petermcs,

At the moment we do not have any such dashboard component. We may be able to create such a component, but without a paying client sponsoring development there's no telling when it may or may not be added.

It may be possible to hack up with a canvas, or to import a separate library and use that to draw the heatmaps.

[Jared Wiltshire]

@petermcs If you give us a clearer description of what you are after we might be able to give you better guidance. Please link to an example image or website that is similar to what you are looking for.

[petermcs]

Hi Jared,
Here's an example of heat mapping http://www.vesma.com/heatmap . It's basically a 2 dimensional display of an array of data with the consumption in a cell represented as a colour which gives you a way to visualise the energy usage over a period of time more clearly.

[Jared Wiltshire]

Ok got it, here's a simple example, it doesn't handle day light savings or have any scales but its a start. We might be able to add this as a component.

<div class="ma-designer-root" id="bee6bb2e-5cc4-4204-b710-5355b319c849" style="width: 1600px; height: 800px; position: relative;">
    <ma-now output="date.now" update-interval="1 days" on-change="date.to = ($value | maMoment:'startOf':'day'); date.from = (date.to | maMoment:'subtract':10:'weeks'); "></ma-now>
    <ma-point-values from="date.from" to="date.to" rollup="AVERAGE" rollup-interval="30 minutes" point-xid="temperature" values="pointValues"></ma-point-values>

    <ma-fn fn="toColor" expression="'hsl(' + Math.floor(240 - arg0 * 240) +',100%,50%)'"></ma-fn>

    <div id="3c622df6-d9cb-4cf5-ba95-3b08cabd0368" style="position: absolute; left: 0px; top: 0px; width: 1400px; height: 480px;" layout="column" layout-wrap="">
        <div ng-repeat="pv in pointValues track by pv.timestamp" style="width: calc(100% / 70); height: calc(100% / 48)" ng-style="{'background-color': toColor(pv.value / 100)}"></div>
    </div>
    
    <div id="0393e351-a6b5-42e4-8f3a-a3c96c4db0ae" style="position: absolute; left: 1494px; top: 124px; width: 20px; height: 220px;" layout="column">
        <div ng-repeat="v in [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0] track by $index" style="height: calc(100% / 11); width: 100%" ng-style="{'background-color': toColor(v)}"></div>
    </div>
</div>

The data point I used is not very interesting but here's a screen shot, you can see an hour is missing due to DST

[petermcs]

Hi Jared, Great work on putting that together!

I'll try playing around with it when I get some sensible data and see what it looks like. I'm hoping we get somewhere with this particular tender as it is a really nice project based around monitoring electricity, water and environmental factors in multiple apartments.

[Jared Wiltshire]

@petermcs There is a component in Mango 3.6 to display heat maps like this (they rendered as a SVG in Mango)
It is also customizable (color scale, legend position, number of weeks etc)