In this post we will see how to fetch data from ThingSpeak (an IoT Cloud plarform). The data can be fetched from any client device: A laptop, mobile or a micro-controller.
We will use a JQuery based web page on a laptop, to fetch the data logged into ThingSpeak. You may visit my other post on setting up a device channel in ThingSpeak for a tutorial on the pre-requisites.
The HTML/JQuery Code
The JQuery based web page has been coded in such a way that it will fetch the last logged data row every 10 seconds. The re-usable code has been provided below.
Steps to re-use the above code
Follow these steps to re-use the above code.
- Download the JQuery library. I have used "jquery-1.12.1.min.js". You are free to chose, but if you do, then make sure you update the HTML appropriately.
- Copy the code
- Create an HTML file in the same directory as the JQuery library
- Paste the code in the HTML file
- Make sure you change the channel ID in the GetData() function to fetch data from your device channel. However, I have left mine "as is" in the above code, so that it works out of the box for you.
- Save and close the HTML file
- Open the HTML file in a browser
- Every 10 seconds it should fetch data from ThingSpeak and display it on the screen
Running the HTML/JQuery App
Follow these steps outlined below.
- Just right click and open with a browser.
- This is what I see when I open the HTML file.
What Next?
Well, this is how you can fetch the logged data from your remote sensors or edge devices via an IoT Cloud such as ThingSpeak. Of course you may perform a lot of things hereafter: predictive analytics, machine learning and so on...
Cheers,
KBRC