I just wanted to share my latest little project. I wanted to have nice gauges for my temperature sensors and found Google Charts. One of the options was a gauge with dial (https://developers.google.com/chart/interactive/docs/gallery/gauge) and I modified it and put it in a custom mapobject. The gauge is set from -10 °C to 40 °C with a blue color (changed it from green) between -10 and 0. Orange from 25 to 30 and red from 30 to 40.

This is the code that I'm using now:

<!--Status Icons: Google gauge temperature (On White)-->

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var title = '<#objectproperty name="Name" id="<@objectid>">'.replace("Temperatuur ", "")
        var value = '<#objectstatus name="lastvalue" id="<@objectid>">';

        value = value.replace(",", ".");

        var temp  = parseFloat(value.replace(" &deg;C", ""));

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          [title, 0]
        ]);

        var options = {
          width: 200, height: 200,
          greenFrom: -10, greenTo: 0, greenColor: '#2DA4FF',
          redFrom: 30, redTo: 40,
          yellowFrom:25, yellowTo: 30,
          minorTicks: 10, majorTicks: ['-10','0','10','20','30','40'],
          max: 40, min: -10,
          animation: {duration: 1000, easing: 'in'}
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div_<@objectid>'));

        chart.draw(data, options);

        data.setValue(0, 1, temp);
        chart.draw(data, options);

      }
</script>

<div class="map_object map_icon mapicon_status_white" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="topleftcoordinates" subid="<@subid>" mode="<@editmode>">">
  <#mapobject type="objectgrip" mode="<@editmode>">
  <#mapobject type="htmlbefore" subid="<@subid>">
  <span class="label"><div id="chart_div_<@objectid>" style="width: 200px; height: 200px;"></div></span>
  <#mapobject type="htmlafter" subid="<@subid>">
</div>

Article Comments

Hi Jeroen,

Nice, thanks for sharing! :)


Oct, 2016 - Permalink