Radmon -> Google Gauge visualization
7 years 8 months ago - 7 years 7 months ago #3176
by OM1AMJ
Radmon -> Google Gauge visualization was created by OM1AMJ
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:
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: 7 years 7 months ago by OM1AMJ.
Please Log in or Create an account to join the conversation.
- AstroW
-
- Visitor
-
7 years 7 months ago #3214
by AstroW
Replied by AstroW on topic Radmon -> Google Gauge visualization
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)
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)
Please Log in or Create an account to join the conversation.
7 years 7 months ago #3215
by OM1AMJ
Replied by OM1AMJ on topic Radmon -> Google Gauge visualization
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:
To (for example):
Then just run the url: http://yourserver.xx/google_gauge.php, or insert into your site using iframe (http://html.com/tags/iframe/).
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: http://yourserver.xx/google_gauge.php, or insert into your site using iframe (http://html.com/tags/iframe/).
Please Log in or Create an account to join the conversation.
- AstroW
-
- Visitor
-
7 years 7 months ago #3216
by AstroW
Replied by AstroW on topic Radmon -> Google Gauge visualization
I did this and nothing happens :/
Please Log in or Create an account to join the conversation.
- AstroW
-
- Visitor
-
7 years 7 months ago #3217
by AstroW
Replied by AstroW on topic Radmon -> Google Gauge visualization
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>Please Log in or Create an account to join the conversation.
7 years 7 months ago - 7 years 7 months ago #3218
by OM1AMJ
Replied by OM1AMJ on topic Radmon -> Google Gauge visualization
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:
So I found a little bug in my code (only problem with refresh).
Change 60 to 30 in a line:
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: 7 years 7 months ago by OM1AMJ.
Please Log in or Create an account to join the conversation.
Moderators: Gamma-Man
Time to create page: 0.184 seconds