Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Radmon -> Google Gauge visualization

Radmon -> Google Gauge visualization 4 months 4 weeks ago #3176

  • OM1AMJ
  • OM1AMJ's Avatar
  • NOW ONLINE
  • Junior Member
  • Posts: 38
  • Thank you received: 19
  • Karma: 5
I've been inspired by a plugin on the thingspeak.com site and created a Google Gauge visualization.

You need to change the values at the end of this url:
http://viking.home.sk/om1amj/radmon/google_gauge.php?user=OM1AMJ&warning=40&alert=60&size=240
user = radmon username
warning = (CPM) starting point of the yellow part (less than alert)
alert = (CPM) starting point of the red part (more than warning and less than 100)
size = size in pixels

Page load new data every 30 seconds.

Here is the code of the google_gauge.php:
<?php
$user = $_GET["user"];
$warning = $_GET["warning"];
$alert = $_GET["alert"];
$size = $_GET["size"];

$url = "http://www.radmon.org/radmon.php?function=lastreading&user=$user";
$page = fopen($url, 'r');
$content = "";
while( !feof( $page ) ) {
$buffer = trim( fgets( $page, 4096 ) );
$content .= $buffer;
}

$startcpm = "";
$endcpm = " CPM";
preg_match( "/$startcpm(.*)$endcpm/s", $content, $match);
$cpm = $match[1];
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><?php echo "Google Gauge - $user"; ?></title>
<meta name="robots" content="noindex,follow">
<meta name="googlebot" content="nosnippet,noarchive">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="refresh" content="30">

<style type="text/css">
  body { background-color: #ddd; }
  #container { height: 100%; width: 100%; display: table; }
  #inner { vertical-align: middle; display: table-cell; }
  #gauge_div { width: <?php echo "$size"; ?>px; margin: 0 auto; }
</style>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

  // maximum value for the gauge
  var max_gauge_value = 100;
  // name of the gauge
  var gauge_name = 'CPM';

  // global variables
  var chart, charts, data;

  // load the google gauge visualization
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(initChart);

  // display the data
  function displayData(point) {
    data.setValue(0, 0, gauge_name);
    data.setValue(0, 1, point);
    chart.draw(data, options);
  }

  // load the data
  function loadData() {
    // variable for the data point
    var p;

      p = <?php echo "$cpm"; ?>;

      // if there is a data point display it
      if (p) {
        p = Math.round((p / max_gauge_value) * 100);
        displayData(p);
      };
  }

  // initialize the chart
  function initChart() {

    data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(1);

    chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
    options = {width: <?php echo "$size"; ?>, height: <?php echo "$size"; ?>, redFrom: <?php echo "$alert"; ?>, redTo: 100, yellowFrom: <?php echo "$warning"; ?>, yellowTo: <?php echo "$alert"; ?>, greenFrom: 0, greenTo: <?php echo "$warning"; ?>, minorTicks: 5};

    loadData();

    // load new data every 30 seconds
    setInterval('loadData()', 30000);
  }

</script>

</head>

<body>
    <div id="container">
      <div id="inner">
        <div id="gauge_div"></div>
      </div>
    </div>
  </body>
</html>
Last Edit: 4 months 1 week ago by OM1AMJ.
The administrator has disabled public write access.
The following user(s) said Thank You: Juzzie, Gamma-Man, autogen

Radmon -> Google Gauge visualization 4 months 1 week ago #3214

  • AstroW
  • AstroW's Avatar
  • OFFLINE
  • Senior Member
  • Posts: 55
  • Thank you received: 6
  • Karma: 2
This is awesome, very nice :-)
I try to implement the code onto one of my own pages.
How do you do this? I have never done this before (yes I googled it but I didn't get it to work anyways) :P
"Insane physicist student with a deep interest in watchmaking and quarks"
The administrator has disabled public write access.

Radmon -> Google Gauge visualization 4 months 1 week ago #3215

  • OM1AMJ
  • OM1AMJ's Avatar
  • NOW ONLINE
  • Junior Member
  • Posts: 38
  • Thank you received: 19
  • Karma: 5
Hi.
It is best to run the script directly on your webserver.
You need to create a PHP file on your webserver.
For example: google_gauge.php
Edit this file and copy and paste my script.
Change these lines:
$user = $_GET["user"];
$warning = $_GET["warning"];
$alert = $_GET["alert"];
$size = $_GET["size"];

To (for example):
$user = "AstroW";
$warning = "40";
$alert = "60";
$size = "240";

Then just run the url: yourserver.xx/google_gauge.php, or insert into your site using iframe (html.com/tags/iframe/).
The administrator has disabled public write access.

Radmon -> Google Gauge visualization 4 months 1 week ago #3216

  • AstroW
  • AstroW's Avatar
  • OFFLINE
  • Senior Member
  • Posts: 55
  • Thank you received: 6
  • Karma: 2
I did this and nothing happens :/
"Insane physicist student with a deep interest in watchmaking and quarks"
The administrator has disabled public write access.

Radmon -> Google Gauge visualization 4 months 1 week ago #3217

  • AstroW
  • AstroW's Avatar
  • OFFLINE
  • Senior Member
  • Posts: 55
  • Thank you received: 6
  • Karma: 2
Heres the code I implemented in the php file at my server and heres the url: www.wilke.me/radmondata/google_gauge.php
<?php
$user = ”AstroW”;
$warning = ”40”;
$alert = ”60”;
$size = ”240”;

$url = "http://www.radmon.org/radmon.php?function=lastreading&user=$user";
$page = fopen($url, 'r');
$content = "";
while( !feof( $page ) ) {
$buffer = trim( fgets( $page, 4096 ) );
$content .= $buffer;
}

$startcpm = "";
$endcpm = " CPM";
preg_match( "/$startcpm(.*)$endcpm/s", $content, $match);
$cpm = $match[1];
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><?php echo "Google Gauge - $user"; ?></title>
<meta name="robots" content="noindex,follow">
<meta name="googlebot" content="nosnippet,noarchive">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="refresh" content="60">

<style type="text/css">
  body { background-color: #ddd; }
  #container { height: 100%; width: 100%; display: table; }
  #inner { vertical-align: middle; display: table-cell; }
  #gauge_div { width: <?php echo "$size"; ?>px; margin: 0 auto; }
</style>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

  // maximum value for the gauge
  var max_gauge_value = 100;
  // name of the gauge
  var gauge_name = 'CPM';

  // global variables
  var chart, charts, data;

  // load the google gauge visualization
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(initChart);

  // display the data
  function displayData(point) {
    data.setValue(0, 0, gauge_name);
    data.setValue(0, 1, point);
    chart.draw(data, options);
  }

  // load the data
  function loadData() {
    // variable for the data point
    var p;

      p = <?php echo "$cpm"; ?>;

      // if there is a data point display it
      if (p) {
        p = Math.round((p / max_gauge_value) * 100);
        displayData(p);
      };
  }

  // initialize the chart
  function initChart() {

    data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(1);

    chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
    options = {width: <?php echo "$size"; ?>, height: <?php echo "$size"; ?>, redFrom: <?php echo "$alert"; ?>, redTo: 100, yellowFrom: <?php echo "$warning"; ?>, yellowTo: <?php echo "$alert"; ?>, greenFrom: 0, greenTo: <?php echo "$warning"; ?>, minorTicks: 5};

    loadData();

    // load new data every 30 seconds
    setInterval('loadData()', 30000);
  }

</script>

</head>

<body>
    <div id="container">
      <div id="inner">
        <div id="gauge_div"></div>
      </div>
    </div>
  </body>
</html>
"Insane physicist student with a deep interest in watchmaking and quarks"
The administrator has disabled public write access.

Radmon -> Google Gauge visualization 4 months 1 week ago #3218

  • OM1AMJ
  • OM1AMJ's Avatar
  • NOW ONLINE
  • Junior Member
  • Posts: 38
  • Thank you received: 19
  • Karma: 5
I found an error in your script. See a quotation marks. Somewhere you have correct " and somewhere word-style .
Please replace (word) with " (php) in these lines:
$user = "AstroW";
$warning = "40";
$alert = "60";
$size = "240";


So I found a little bug in my code (only problem with refresh).
Change 60 to 30 in a line:
<meta http-equiv="refresh" content="60">
Last Edit: 4 months 1 week ago by OM1AMJ.
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Time to create page: 0.507 seconds
Powered by Kunena Forum