Javascript to display last value of a channel on web page | ThingSpeak API | Forum

The ThingSpeak community site has been upgraded to a new site. This site is currently in read-only mode. You can ask questions or post and read discussions on the new site.
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
Javascript to display last value of a channel on web page
No permission to create posts
June 19, 2013
9:30 am
Avatar
Malden

Silver
Members
Forum Posts: 15
Member Since:
June 19, 2013
sp_UserOfflineSmall Offline

Hi all,

the ThingSpeak API provides the possibility to embed the chart with historical values of a channel in a web page. Now I would also like to show the last value of a channel as a number on this page. Looks like this can be done using Javascript doing something like this:

$.getJSON('https://www.thingspeak.com/channels/(channel id)/field/(field id)/last.json', function(data) { ... }

But of course, this is just the API request, more is needed. Therefore could someone please post some working Javascript code which returns the last value of a given channel?

I am basically a C programmer and haven't learned web based languages yet.

Thanks, Malden

June 20, 2013
1:59 am
Avatar
turgo

Gold
Members
Forum Posts: 77
Member Since:
June 16, 2013
sp_UserOfflineSmall Offline

Hi Malden,
Here's part of a script that adds the latest data from several different channels to a chart. You can see how the code parses the JSON data into new points for the chart.

// get latest data every 15 seconds
setInterval(function()
{
for (var channelIndex=0; channelIndex<channelKeys.length; channelIndex++) // iterate through each channel
{
(function(channelIndex)
{
// get the data with a webservice call
$.getJSON('https://www.thingspeak.com/channels/'+channelKeys[channelIndex].channelNumber+'/feed/last.json?callback=?&offset=0&location=true;key='+channelKeys[channelIndex].key, function(data)
{
for (var fieldIndex=0; fieldIndex 0)
{
last_date = dynamicChart.series[chartSeriesIndex].data[dynamicChart.series[chartSeriesIndex].data.length-1].x;
}
var shift = false ; //default for shift
// if a numerical value exists and it is a new date, add it
if (!isNaN(parseInt(v)) && (p[0] != last_date))
{
dynamicChart.series[chartSeriesIndex].addPoint(p, true, shift);
}
}
}
});
})(channelIndex);
}
}, 15000);

June 20, 2013
2:25 am
Avatar
Malden

Silver
Members
Forum Posts: 15
Member Since:
June 19, 2013
sp_UserOfflineSmall Offline

Hi turgo,

thanks for your reply. Actually what I want to do is much simpler.

As far as I understand, when calling this code:

$.getJSON('http://api.thingspeak.com/channels/(channel id)/feed/last.json?callback=?', function(data) { ... }

adding code between the brackets I have access to the values of data.field1 ... data.field8. I want to show these values as numbers on the web page, so I guess I need to assign the values to the value attribute of some element on the page. Must be really simple but as I have no clue about javascript I don't know how to do this.

June 20, 2013
8:55 am
Avatar
turgo

Gold
Members
Forum Posts: 77
Member Since:
June 16, 2013
sp_UserOfflineSmall Offline

The code I posted somehow changed, and the important part showing how to access the values you want disappeared. Access the field value with data.field8, and the time with data.created_at.
Here it is again: Edit- all the pasted code did not show up again.

// get latest data every 15 seconds
setInterval(function()
{
for (var channelIndex=0; channelIndex<channelKeys.length; channelIndex++) // iterate through each channel
{
(function(channelIndex)
{
// get the data with a webservice call
$.getJSON('https://www.thingspeak.com/channels/'+channelKeys[channelIndex].channelNumber+'/feed/last.json?callback=?&offset=0&location=true;key='+channelKeys[channelIndex].key, function(data)
{
for (var fieldIndex=0; fieldIndex 0)
{
last_date = dynamicChart.series[chartSeriesIndex].data[dynamicChart.series[chartSeriesIndex].data.length-1].x;
}
var shift = false ; //default for shift
// if a numerical value exists and it is a new date, add it
if (!isNaN(parseInt(v)) && (p[0] != last_date))
{
dynamicChart.series[chartSeriesIndex].addPoint(p, true, shift);
}
}
}
});
})(channelIndex);
}
}, 15000);

June 20, 2013
10:15 am
Avatar
Malden

Silver
Members
Forum Posts: 15
Member Since:
June 19, 2013
sp_UserOfflineSmall Offline

Thanks turgo,
now I am just missing the last bit. How do I actually print the value on the page?
(Sorry if this seems a stupid question).

June 21, 2013
3:35 am
Avatar
turgo

Gold
Members
Forum Posts: 77
Member Since:
June 16, 2013
sp_UserOfflineSmall Offline

Access the HTML element with the specified id, and change its content:

document.getElementById("demo").innerHTML= data.field8;

see link: http://www.w3schools.com/js/js_whereto.asp

June 21, 2013
10:55 am
Avatar
Malden

Silver
Members
Forum Posts: 15
Member Since:
June 19, 2013
sp_UserOfflineSmall Offline

Thanks turgo,

I was struggling with a lot of small details (and the fact that the ThingSpeak service is unstable at the moment doesn't really help) but now I get what I want. My first working Javascript code! Great.

Malden

Forum Timezone: America/New_York

Most Users Ever Online: 166

Currently Online:
29 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

rw950431: 272

Vinod: 240

piajola: 95

turgo: 70

vespapierre: 63

Adarsh_Murthy: 62

Member Stats:

Guest Posters: 1

Members: 8665

Moderators: 1

Admins: 2

Forum Stats:

Groups: 3

Forums: 14

Topics: 1600

Posts: 5760

Newest Members:

Advantagetreeexperts, laundrydaddyuk, techhhelp5, ken, tran, huldacormier

Moderators: cstapels: 460

Administrators: Hans: 405, lee: 457