Javascript to display last value of a ThingSpeak channel on web page | ThingSpeak API
Show older comments
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. I looked into some of the answers. But I could not understand. Can someone please share the JavaScript code OR the HTML code? I am new to ThingSpeak and Web Development.
Please help me out!!
Thank you,
Prajna Bhat
1 Comment
Shore
on 11 Feb 2023
Vinod,
I am VERY impressed. Your advice worked so well. Thanks.
Accepted Answer
Vinod
on 7 Jul 2021
1 vote
If you click the "bubble" icon on the numeric display widget added to your channel, you will get the HTML code required to embed the value on your HTML page. It should be of the form:
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/<CHANNEL_ID>/widgets/<WIDGET_ID>"></iframe>
Where <CHANNEL_ID> and <WIDGET_ID> are to be replaced by those for your channel & widget. Note that you will need to make your channel public if you intend to embed the widget on your HTML page.
4 Comments
Prajna Bhat
on 7 Jul 2021
Here's some very basic HTML & javascript with no CSS or styling:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function updateValue() {
$.get("https://api.thingspeak.com/channels/9/fields/1/last.json", function(data){
$('#value').text(data.field1);
});
};
</script>
<body>
<div>Value of Field 1 in ThingSpeak Channel 9 is: <strong><span id="value">Not yet read</span></strong></div></br>
<div><button onclick="updateValue()">Retrieve last value</button></div>
</body>
</html>
Prajna Bhat
on 7 Jul 2021
Prajna Bhat
on 13 Jul 2021
More Answers (0)
Communities
More Answers in the ThingSpeak Community
Categories
Find more on Downloads in Help Center and File Exchange
Community Treasure Hunt
Find the treasures in MATLAB Central and discover how the community can help you!
Start Hunting!
