Log In
5:43 pm
Gold
June 16, 2013
Offline
Here is a HTML JavaScript web page to display multiple series and channels in real time.
http://forum.arduino.cc/index.php?action=dlattach;topic=213058.0;attach=66726
You must edit the page source/ JavaScript to enter your channel information.
If you have lots of series, it is helpful to click the "Hide All" button, and then click on the series names you are interested in to show them. Clicking and dragging vertically on the chart will select a range to zoom in to.
Check the "Update Chart" checkbox to enable realtime charting. With more than about 8 channels, this causes ThingSpeak to cache and delay the data, so I have it unchecked.
It also features buttons to load historical data 8000 points at a time. Select which channel you want to load, and how many sequential loads to try. Then click the "Load More Historical Data" button. Loading too much data causes ThingSpeak to first delay the data, and then (error 404) refuse to return data. After ten loads or so, I often cannot load any more data.
The three bars export button at the top right has an option to download a .csv file containing the data from the chart.
This is public domain. Please post upgrades on the Arduino forum thread. (too bad this forum doesn't support posting files)
http://forum.arduino.cc/index.php?topic=213058.0
The navigator could be dramatically upgraded to provide complete access to your historical data with smaller data downloads if ioBridge were to change the Average function so it would return 8000 points, instead of averaging 8000 points. http://community.thingspeak.com/forum/thingspeak-api/daily-average1440-parameter-purpose-defeated-by-results-limits/
The charting library is called HighStock. It is awesome! HighSoft, the owners say, "Do you want to use Highstock for a personal or non-profit project? Then you can use Highchcarts for free under the Creative Commons Attribution-NonCommercial 3.0 License. "
4:06 am
September 5, 2014
Offline
Holy Crap! This is absolutely wonderful! It's exactly what i've been looking for! I'm using it for my student lab webpage. I hope that's alright. Thank you thank you.
10:35 pm
Gold
June 16, 2013
Offline
My pleasure. If you make upgrades, please share them.
10:53 am
Silver
October 8, 2014
Offline
Many thanks turgo for sharing your work.
I've just used it for my composite BeeBug monitor display
- see http://www.mecol.co.uk/P11.php
Cheers!
Geo
8:14 pm
Gold
June 16, 2013
Offline
Cool, Geo.
I'm most interested in the weight stat. It's interesting to consider how it measures when the bees are home or out working. What is the Brood measure?
11:19 am
Silver
July 20, 2015
Offline
I think i have discovered a problem with this FANTASTIC viewer.
First off, I absolutely love it...
The problem I've found is that it does not handle channels higher than 65535.
That number does look familiar doesn't it? (Hint: hFFFF)
If i keep my viewed channels low, it works fine, but if i have a channels starting with 7 it mixes up the graphs, things fail.. etc.
I think i Know what the problem is but i have no idea about HTML and JAVA, so I havent been able to fix it.
Variable "channelNumber" seems to be the problem but i cant find where its initialized on the code...
A fix for this would be GREATLY appreciated.
regards,
G.
10:19 am
Silver
November 5, 2014
Offline
Hello
I use the turgo script for 2 applications.
For the first one it work very well.
For the second, depending the lengh of historic, data is not displayed.
If you display the last week the display is right.
If you try to display the last day there is no data.
Every days, ther is no data from 23 PM to 6 AM, that just normal.
May be it is a problem on Thingspeak ?
The data on thingspeak is ok
Thie link for the dispay is here:
http://thili.net/ruches/Blaise/index.html
what is very stange is if I dowlload data or create csv file, data seasm to be good ...
Many thanks for your help and thanks again for your very nice script !!!
Thierry Vorms
10:13 pm
June 7, 2019
Offline
Aprox 3-4 months this script do not update automaticly, just if I reload a browser. I tried Chrome, Firefox..but same.
In developer option of browser I see that it really updateing every 15second but I got error code:
Request URL:https://www.thingspeak.com/channels/579443/feed/last.json?callback=jQuery31105319498312513714_1559958872281&offset=0&location=false;key=xxxxxxxxxxxxxxxxx&_=xxxxxxxxxxxxxxx
Request method:GET
Remote address:52.2.102.156:443
Status code:
301
Version:HTTP/1.1
So error code 301 Moved Permanently. I read on google that it means that some links are not accessable any more.
Can someone fix this?
Thx
4:03 pm
Moderators
March 7, 2017
Offline
The callback parameter was recently deprecated. Have a look at the may release notes, I think it describes what you can do:
https://www.mathworks.com/help/thingspeak/release-notes.html
7:45 pm
June 7, 2019
Offline
cstapels said
The callback parameter was recently deprecated. Have a look at the may release notes, I think it describes what you can do:
https://www.mathworks.com/help/thingspeak/release-notes.html
Thx for replay..
I have not enough knowledge to do the modification on this script, to be able to do the auto update.
Can someone help me which lines need to be modified?
5:04 am
June 7, 2019
Offline
Ok, it seams to be that I have enough knowledge to fix. 🙂
I realised with help of:
https://ch.mathworks.com/help/thingspeak/release-notes.html
with R2019a and their explanation:
Callback Parameter Deprecated
JSONP is no longer supported by the ThingSpeak API.
If your code uses the callback parameter in a request to api.thingspeak.com, remove callback=? from the URL.
For private channels, provide the read API key as part of the URL (for example ?api_key=READ_API_KEY). Public channels do not require an API key.
For more information, see https://community.thingspeak.com/forum/announcements/jsonp-requests-callback-parameter-are-deprecated/#p8653.
that u need to modify next lines in this script from top of page:
line: 93,149 and 378
and to remove callback=? from line as to replace www with api.
Example:
Before (line 93): $.getJSON('https://www.thingspeak.com/channels/'+channelNumber+'/feed.json?callback=?&offset=0&results=2500;key='+key, function(data)
After (line 93): $.getJSON('https://api.thingspeak.com/channels/'+channelNumber+'/feed.json?&offset=0&results=2500;key='+key, function(data)
Repeat for all of three line. I realised that second line giving the error 301 and first 422
Thx for @cstapels for helping me to understand..
8:53 am
Moderators
March 7, 2017
Offline
Happy to hear you've got it working! Can you tell us more about your project? We are always looking for interesting ThingSpeak projects.
4:01 pm
May 2, 2020
Offline
@turgo your HTML page is a great work of art!
Is there a version of it on GitHub or something? (https://github.com/turgo ?)
I want to add some changes and fixes that I think are important.
Thanks.
7:25 am
October 16, 2020
Offline
Good morning and >>> Greetings From The Future! <<<
After using this .html (modified) for nearly a year, lately the page will not load and simply displays "getJSON request failed!".
Any thoughts on what happened? The OP's original example does the same thing. Any thoughts and replies appreciated.
Thanks.
2:38 pm
October 16, 2020
Offline
Hello,
same situation like provels, after using the great html example from turgo for more than 2 years now it stucks with the getJSON error mentioned above.
Any idea how to fix it?
Thanks!
3:28 pm
MathWorks
May 1, 2016
Offline
The approach suggested by easydoor in post #11 of this thread works. Modify your HTML file to change code like
$.getJSON('https://www.thingspeak.com/channels/'+channelNumber+'/feed.json?callback=?&offset=0&results=2500;key='+key, function(data)
to
$.getJSON('https://api.thingspeak.com/channels/'+channelNumber+'/feed.json?&offset=0&results=2500&api_key='+key, function(data)
Easy, right? 🙂
2:58 am
October 16, 2020
Offline
Vinod said
Easy, right? 🙂
Yep, that was it. Thanks for pointing that out. Back to working.
While muddling about trying to figure out what went wrong, I noticed that one of the scripts listed (Line 10) now gives a 404.
Don't know if that is/will be a concern in the future? Bear with me, as I can barely spell JavaScript, let alone code it...
src="https://rawgithub.com/highslide-software/export-csv/master/export-csv.js"
Is that something that should/could be replaced by something from the Highcharts library? https://code.highcharts.com/
Thank you again for fixing my stuff 
Until next time...
4:07 am
Silver
January 4, 2019
Offline
Vinod said
The approach suggested by easydoor in post #11 of this thread works. Modify your HTML file to change code like
$.getJSON('https://www.thingspeak.com/channels/'+channelNumber+'/feed.json?callback=?&offset=0&results=2500;key='+key, function(data)
to
$.getJSON('https://api.thingspeak.com/channels/'+channelNumber+'/feed.json?&offset=0&results=2500&api_key='+key, function(data)
Easy, right? 🙂
Dear Sir,
I noticed that after doing this change I lost the "Load More Historical Data" functionality... In the recent past, clicking this button, I got more days in the charts. Now it is doing nothing. Also I tried to change the From: date upper right corner, but after pressing Enter, the From changed to yesterday irrelevant of my date entry... Do you know why?
How can have back this functionality?
Many thanks!
Most Users Ever Online: 166
Currently Online:
22 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:
kusmumichael, petersmith99, Rambant, blakeharriss09, optisol, Niyonzima FilsModerators: cstapels: 460
Administrators: Hans: 405, lee: 457
