Google Gauge Range does not change | ThingSpeak Plugins | Forum

Avatar

Please consider registering
Guest

sp_LogInOut Log In sp_Registration Register

Register | Lost password?
Advanced Search

— Forum Scope —






— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Google Gauge Range does not change
No permission to create posts
May 5, 2016
12:14 am
Avatar
DRCO
New Member
Members
Forum Posts: 2
Member Since:
May 4, 2016
sp_UserOfflineSmall Offline

Hi Forum,

New here but was unable to find previous posting. I have tried to modify a Google Gauge plugin to depict a range of 175psi (pounds per square inch) - as I am monitoring a pressure sensor with that range. The gauge stays on a maximim of 100(psi).

I altered the java code in a manner I thought would work and was inline with a you tube video I saw suggesting how to modify it. In simple terms I edited the line:

var max_gauge_value = 175;

and the line:

p = Math.round((p / max_gauge_value) * 175);

 

I should say that with these edits, the pressure depicted by the gauge is correct, while under 100psi.

 

Greatly appreciate any help on this.

Regards,

Chris

The entire code for the java component is as follows (less my channel and API)

 

<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'>

// set your channel id here
var channel_id = XXXXXXXX;
// set your channel's read api key here if necessary
var api_key = 'XXXXXXXXXXXXXX';
// maximum value for the gauge
var max_gauge_value = 175;
// name of the gauge
var gauge_name = 'PSI';

// 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;

// get the data from thingspeak
$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {

// get the data point
p = data.field1;

// if there is a data point display it
if (p) {
p = Math.round((p / max_gauge_value) * 175);
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: 200, height: 200, redFrom: 90, redTo: 100, yellowFrom:70, yellowTo: 90, minorTicks: 5};

loadData();

// load new data every 15 seconds
setInterval('loadData()', 15000);
}

</script>

May 5, 2016
3:46 pm
Avatar
piajola

Gold
Members
Forum Posts: 86
Member Since:
October 12, 2015
sp_UserOfflineSmall Offline

Hello Chris,

You asked for ANY help on this ...

So my "work" is stolen/cloned from others (to whom I say thank you), and I did as Dr Victor Frankenstein ... so it is at your own risk
So do as Frankenstein did and cut/graft at your pleasure the pieces you need and bring your creature to life ...Wink

It is copied directly from my plug-in, 2 gauges for Temperature (10 to 50) and humidity (30 to 80) with custom colors. The comments are still there. I hope the "browser" has not changed CR/LF or other characters and in the case you can restore the code

Good luck ...

 

<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'>
var channel_id = 00000;
var api_key = '16lettersnumbers';
var max_gauge_value = 1;
var gauge1_name = 'T *C';
var gauge2_name = "HR %";
var chart1, chart2, charts, data;
// load the google gauge visualization
google.load('visualization', '1.1', {packages:['gauge']});
google.setOnLoadCallback(initChart);
function displayData(point1, point2) {
data.setValue(0, 0, gauge1_name);
data.setValue(0, 1, point1);
chart1.draw(data, gauge1_options);
data.setValue(0, 0, gauge2_name);
data.setValue(0, 1, point2);
chart2.draw(data, gauge2_options);
}
function loadData() {
var p1, p2;
$.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {
p1 = data.field1;
p2 = data.field2;
if (p1 && p2) {
//p1 = Math.round((p1 / max_gauge_value) * 100);
p1 = p1 * 1; //(p1/ 100) * 100;
p1 = parseFloat( p1.toFixed(1) );
//p2 = Math.round((p2 / max_gauge_value) * 100);
p2 = p2 * 1; //(p2 / 100) * 100;
p2 = parseFloat( p2.toFixed(1) );
displayData(p1, p2);
}
});
}
function initChart() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(1);

chart1 = new google.visualization.Gauge(document.getElementById('gauge1_div'));
//gauge1_options = {min: 10, max: 50, minorTicks:40, width: 200, height: 200, yellowFrom:10, yellowTo:22, greenFrom:22, greenTo:26, redFrom:26, redTo: 50};
gauge1_options={min:10,max:50,width: 200,height: 200,minorTicks:25,majorTicks:['10','20','30','40','50'], greenColor:'#aaf086',yellowColor:'#f9f92d',redColor:'#fd8181', yellowFrom:10, yellowTo:22, greenFrom:22, greenTo:26, redFrom:26, redTo: 50};

chart2 = new google.visualization.Gauge(document.getElementById('gauge2_div'));
//gauge2_options = {min: 30, max: 80, minorTicks:25, width: 200, height: 200, yellowFrom:30, yellowTo:40, greenFrom:40, greenTo:48, redFrom:48, redTo:80};
gauge2_options= {min:30,max:80,width:200,height:200,minorTicks:20,majorTicks:['30','40','50','60','70','80'], greenColor:'#abf6e5',yellowColor:'#d994f2',redColor:'#81c8fd', yellowFrom:30, yellowTo:40, greenFrom:40, greenTo:65, redFrom:65, redTo:80};
//options = {width: 165, height: 165, greenFrom:0, greenTo:12.5, redFrom:87.5, redTo:100, yellowFrom:12.5, yellowTo:87.5, minorTicks: 25};

loadData();
setInterval('loadData()', 60000);
}
</script>

May 5, 2016
8:51 pm
Avatar
DRCO
New Member
Members
Forum Posts: 2
Member Since:
May 4, 2016
sp_UserOfflineSmall Offline

Out of my depth here, and no floaties BUT, using the age old adage of "read the instructions" I checked out the Google developers code and found that the Gauge default is 100 - you can alter it using the max configuration option, as quoted on this page: Google Gauge as follows

max The maximal value of a gauge.
Type: number
Default: 100

In the example code I altered these lines to make my gauge work for 175 range (the crucial bit highlighted in magenta):

chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
options = {width: 200, height: 200, max: 175, redFrom: 160, redTo: 175, yellowFrom:120, yellowTo: 160, minorTicks: 5};

So thanks to piajola for the guidance and I will try to plug in the electrodes and use your code when I have more datasources.

Forum Timezone: America/New_York

Most Users Ever Online: 114

Currently Online:
17 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

rw950431: 261

Vinod: 196

piajola: 85

turgo: 70

vespapierre: 63

Adarsh_Murthy: 62

Member Stats:

Guest Posters: 1

Members: 5703

Moderators: 0

Admins: 2

Forum Stats:

Groups: 4

Forums: 17

Topics: 1313

Posts: 4565

Newest Members:

josephrj11, dennis55, jillhp4, tabathawg69, MarinaMa, Susandom

Administrators: Hans: 387, lee: 457