ThingSpeak Live Chart, multi channel, second axis, historical data, csv export

Thank you very much for this fantastic work!!

There´s a very little mistake in: tooltip: { valueDecimals: 1, valueSuffix: '°F', xDateFormat:'%Y-%m-%d %1:%M:%S %p' <----- the %1 should be replaced by %H

I have modified your web page for my project, and one problem I have is that I didn´t find a way of modifying the valueSuffix for different series. Could you please help me? Thanks in advance.

Hi Turgo, thanks heaps for this. I struggled with Highcharts before admitting defeat, so it's a great help to have your code.

Can I add to the request for multiple tooltip suffixes - so that the tip displays units for the relevant axis.

Also do you think it would be straightforward to scale the two axes differently? I know from Highcharts that there are floor and ceiling values that you can include in the formatting code.

best wishes, Andrew

Dear Turgo, (or anyone else)

Could you please help how to define different units for tooltip valueSuffix when multiple series are used? Right now in your code everything shows up as temperature. I can get it to work in Highcharts examples but non of them includes values being used from Thingspeak since i'm having a bit of a problem understanding how you got thingspeak data to appear in chart. I'm not very good with javascript :-) The 'series' show like the following in the highcharts example, however the series part in your code is just 'series: []' so i can not figure out where to include that tooltip valueSuffix per series.

series: [{ name: 'Rainfall', type: 'column', yAxis: 1, data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], tooltip: { valueSuffix: ' mm' }

}, { name: 'Sea-Level Pressure', type: 'spline', yAxis: 2, data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7], marker: { enabled: false }, dashStyle: 'shortdot', tooltip: { valueSuffix: ' mb' }

}, { name: 'Temperature', type: 'spline', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], tooltip: { valueSuffix: ' °C' }

OK disregard my last message because i got it to work here is the working code

http://jsfiddle.net/calculathor/oLp97nd1/

however there is only one problem i just can not get the 'opposite: true' to work for one of the 'yAxis:' data. So both of the Y axises appear on the right side. I just need to get one of the axises appear on the opposite side. Please someone help :-)

ok, disregard the last one as well :-) somehow the code works differently here, i tried 'opposite: false' instead of 'opposite: true' and it worked. apparently all y-axis are 'opposite: true' by default in Turgo's code somehow. so anyone is free to check it out there :-) good luck :D

A very big thanks!!! It works our of the box :D

Can someone tell me how can I manually chose the colour for new graphs? Thx

easydoor: Can someone tell me how can I manually chose the colour for new graphs? Thx

I am wondering the same thing. Anyone know where the line colors are set?

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

If I am not wrong it mean that original code used http instead of https that now is mandatory.

zoomx: If I am not wrong it mean that original code used http instead of https that now is mandatory.

Thx for replay.. All thingspeak links in codes are with https. Do u have any other suggestion?

Sorry, I wrote a complete useless response!

I tested both the original page and the modified one by Mr_ToR. You are right, it didn't update but I get this error net::ERR_ABORTED 422 (Unprocessable Entity)

GET https://thingspeak.com/channels/9354/feed/last.json?callback=jQuery191003508808604683611_1560321345885&offset=0&location=false;key=XXXXXXXXXXXXXXXX&_=1560321345892 net::ERR_ABORTED 422 (Unprocessable Entity)

Unfortunately I am not able to spot the error that should be in this line

 $.getJSON('https://www.thingspeak.com/channels/'+channelKeys[channelIndex].channelNumber+'/feed/last.json?callback=?&offset=0&location=false;key='+channelKeys[channelIndex].key, function(data)

after last.json since till json I get the last data. My suspect is on the callback.

True..I realised the same. But is tehre anyone who can give us advise or change those few lines of code to work again? Btw I getting two error messages: Status code: 422 Unprocessable Entity and Status code: 301 Moved Permanently

Btw…I asked the same question on thingspeak thread and I got explanation that “Callback Parameter Deprecated” is from now deprecated. Look at link:

The post number 9.
He even mentioned link for cahnges at:
https://ch.mathworks.com/help/thingspeak/release-notes.html

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

Well done!
So callback is related to error 422 and www to error 301!

I made the same changes and don’t get errors any more.

Tanks!

PS. Take care that the read API is in clear text on the source HTML page.

Hello everyone,

Has anyone managed to use the code as a Plugin that is displayed in Channel view?

For me there is no data loaded when I am using it as a Plugin in Channel view on ThingSpeak.com I can only get data to load as a standard .html file loaded in a browser.

Hello, is anybody able to have two charts for the same channel on the same page? I managed to have two charts but only one is going to be displayed the other is blank.

if some one has an example to share !

thanks

First I must thank you for providing a fix for the “getJSON request failed!” error.

Sadly, today it has returned - I wonder what might have changed at Thingspeak to once again break this fantastic graphing tool.

Hello.
I have the same problem.
function getJSON yelling error in a web browser: getJSON request failed!
Is there any fix for this?
Thx