What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general.

Learn more

PRTG Network Monitor

Intuitive to Use. Easy to manage.
More than 500,000 users rely on Paessler PRTG every day. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free Download

Top Tags


View all Tags

PRTG and Google Gauge

Votes:

0

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>

animation gauge google javascript prtg svg temperature

Created on Oct 31, 2016 8:10:57 AM

Last change on Oct 31, 2016 9:04:58 AM by  Stephan Linke [Paessler Support]



1 Reply

Votes:

1

Hi Jeroen,

Nice, thanks for sharing! :)

Created on Oct 31, 2016 8:27:23 AM by  Stephan Linke [Paessler Support]




Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.