New Question
 
 
PRTG Network Monitor

Intuitive to Use.
Easy to manage.

300.000 administrators have chosen PRTG to monitor their network. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free PRTG
Download >>

 

What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general. You are invited to get involved by asking and answering questions!

Learn more

 

Top Tags


View all Tags


PRTG and Google Gauge

Votes:

0

Your Vote:

Up

Down

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 by  Jeroen Huurman (60) 2 1

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



1 Reply

Votes:

1

Your Vote:

Up

Down

Hi Jeroen,

Nice, thanks for sharing! :)

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



Please log in or register to enter your reply.


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.