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>
Hi Jeroen,
Nice, thanks for sharing! :)
Oct, 2016 - Permalink