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>