Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • 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.

  • 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.

  • @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.

  • Hi Jared,
    Here's an example of heat mapping . 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.

  • 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="" update-interval="1 days" on-change=" = ($value | maMoment:'startOf':'day'); date.from = ( | maMoment:'subtract':10:'weeks'); "></ma-now>
        <ma-point-values from="date.from" 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 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>

    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

  • 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.

  • @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)