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(" °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>
Add comment