Google gauge - JS help | 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 - JS help
No permission to create posts
July 17, 2015
9:49 pm
Avatar
rayellam

Silver
Members
Forum Posts: 11
Member Since:
April 2, 2015
sp_UserOfflineSmall Offline

Hi All,
I have created 3 google gauges on the same window, see channel 46564. All the data is being sent to TS via a prototype energy meter i am developing. One of the gauges display's the accumulated minutes the energy meter has been running. What i would like to do is derive the hours and minutes from the minute field value and in a format like this....hh:mm. p3 var is the accumulated minutes.

Here is a link to the plugin code.
https://thingspeak.com/plugins/17202/edit

Here is my java script below........................

// set your channel id here
var channel_id = 46564;

// set your channel's read api key here if necessary
var api_key = '';

// maximum value for the gauge's
var max_gauge_value1 = 1; //Power Factor
var max_gauge_value2 = 10000; //Kw/H
var max_gauge_value3 = 10000; //Accumulated Time

// name of the gauge's
var gauge_name1 = 'PF';
var gauge_name2 = 'kW/h';
var gauge_name3 = 'Accum T';

// global variables
var chart1,chart2,chart3,charts,data1,data2,data3;

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

// display the data
function displayData1(point) {
data1.setValue(0, 0, gauge_name1);
data1.setValue(0, 1, point);
chart1.draw(data1, options1);
}

function displayData2(point) {
data2.setValue(0, 0, gauge_name2);
data2.setValue(0, 1, point);
chart2.draw(data2, options2);
}

function displayData3(point) {
data3.setValue(0, 0, gauge_name3);
data3.setValue(0, 1, point);
chart3.draw(data3, options3);
}

// load the data
function loadData() {
// variable for the data point
var p1;
var p2;
var p3;
var hours;
var minutes;

// 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
p1 = data.field8; //Power Factor
p2 = data.field7; //Kw/h
p3 = data.field1; //Accumulated time in minutes

//Derive hours and minutes from p3
hours = p3/60

//*****************************************************************************
//***This is the part i want to get working***
//var t = p3; // your minutes
//var time = ('0'+Math.floor(t/3600) % 24).slice(-2)+':'+('0'+Math.floor(t/60)%60).slice(-2)+':'+('0' + t % 60).slice(-2)
//would output: 09:30:36
//*****************************************************************************

// if there is a data point display it
if (p1) {
//p1 = Math.round((p1 / max_gauge_value1) * 60);
displayData1(p1);
}

if (p2) {
//p2 = Math.round((p2 / max_gauge_value2) * 100);
displayData2(p2);
}

if (p3) {
//p3 = Math.round((p3 / max_gauge_value3) * 100);
displayData3(hours);
}

});
}

// initialize the chart
function initChart() {

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

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

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

chart1 = new google.visualization.Gauge(document.getElementById('gauge_div1'));
options1 = {width: 140, height: 140, min:0, max:1, redFrom: 1, redTo: 1, yellowFrom:1, yellowTo:1, minorTicks:1, majorTicks:['0', '', '', '', '', '', '', '', '', '', '1']};

chart2 = new google.visualization.Gauge(document.getElementById('gauge_div2'));
options2 = {width: 140, height: 140, min:0, max:10000, redFrom: 10000, redTo: 10000, yellowFrom:10000, yellowTo:10000, minorTicks:5, majorTicks:['0', '', '', '', '', '', '', '', '', '','10000']};

chart3 = new google.visualization.Gauge(document.getElementById('gauge_div3'));
options3 = {width: 140, height: 140, min:0, max:10000, redFrom: 10000, redTo: 10000, yellowFrom:10000, yellowTo:10000, minorTicks:5, majorTicks:['0', '', '', '', '', '', '', '', '', '','10000']};

loadData();

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

July 17, 2015
10:07 pm
Avatar
rayellam

Silver
Members
Forum Posts: 11
Member Since:
April 2, 2015
sp_UserOfflineSmall Offline

Correction. The format i want to display will be dd:hh:mm and NOT dd:mm 🙂

Forum Timezone: America/New_York

Most Users Ever Online: 114

Currently Online:
29 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:

James181, kimberlypg2, JamesAdorb, waynesmith, paulettebw60, ashleytb4

Administrators: Hans: 387, lee: 457