Arduino Forum

Community => Exhibition / Gallery => Topic started by: turgo on Jan 24, 2014, 11:23 pm

Title: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: turgo on Jan 24, 2014, 11:23 pm
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 (http://forum.arduino.cc/index.php?action=dlattach;topic=213058.0;attach=66726)
(http://forum.arduino.cc/index.php?action=dlattach;topic=213058.0;attach=66752)

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 edit it to access other Internet of Things data services.  Please post upgrades here.

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. "
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: rbright on Jan 26, 2014, 08:51 am
Are you awae of a tutorial in interfacing Arduino to HighStock ?
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: turgo on Jan 26, 2014, 09:07 am
Perhaps I should describe how I use this live chart.  I have an Arduino Mega that collects data from Dallas temperature sensors, DHT22 humidity sensors, a light sensor, flow meters, and a hall effect RPM counter.  It has an ethernet shield and sends the data to a free cloud data service called ThingSpeak https://thingspeak.com (https://thingspeak.com).  I can then access the data from anywhere in the world with a browser.  Thingspeak comes with a primitive live chart, but it doesn't plot multiple series, etc.  I programmed the javascript Multichannel HTML webpage to do better data analysis.  A large part of the effort was learning how to use the HishStock library with HighSoft's excellent API reference (http://api.highcharts.com/highstock (http://api.highcharts.com/highstock)).  I shared Multichannel so others in the Arduino community don't have to learn HighStock.  My Multichannel page is hosted on a server, so I can access it from anywhere, though I could load the page into my browser off my hard drive.

Perhaps you could ask a more specific question about which aspect of this project your interested in?
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: rbright on Jan 27, 2014, 10:11 am
At the risk of asking too much it would be of great assistance to a lot of readers of this post if you could briefly describe in list form the steps to be mastered to produce graphs like your excellent example. Perhaps something that would show how to plot data from say two analog inputs, for the enlightenment of all. 
Regards
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: neil12 on Feb 12, 2014, 06:46 pm
Wow turgo, this is amazingly cool. 8)
I'm adapting it for a few projects of mine.
OK if I post it into github and then do modifications from there? I'll add some examples of making changes.
I'm finding a few issues, but this is a great bit of JS, though not perfect (for those people in search of the holy grail) way cool. thanks for sharing it
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: turgo on Feb 12, 2014, 10:10 pm
Hi neil,

It would be great if you improved it and posted it to github.  Be sure to put a link here also.

This was my first javaScript project, so I'm interested to see how an experienced JS programmer improves it.
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: neil12 on Feb 13, 2014, 01:32 am
hi turgo, great splash with JS
I'm actually a newbie @ JS as well, and finding my way through all the amazing JS stuff to be able to display basic data.

I've posted your version here
https://github.com/neilh10/thingspeakmultichannel-highcharts
It can be forked and other people can add comments. Github being an amazing place to share code.
For anybody looking to see what it takes to modify turgo's KS
At the above github reference click/step into "ThingSpeakMultichannel001.html"
then press the "Blame" button and the new window will show the modifications by line number in light yellow "b8238f46 »"
For any 3rd person to make modifications, copy ThingSpeakMultichannel001.html into a file of your own, and then from the line numbers shown in the "Blame" view make the modifications in your file.

For the hell of it I've also put it up here where it runs on the web
http://js.do/code/thingspeakmultichannel-highcharts
however it seems like there isn't a way of sharing it.
If it can find away of sharing it, it would be easy for anyone to make small changes to - add their channel numbers and fields - and see what happens, no website needed.
Neil
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: notforyou23 on Apr 18, 2014, 05:51 pm
This is great, appreciate all the effort and making available to the rest of us. 
I have been able to get this to work fine with my data from ThingSpeak.  I was wondering if there is a way to change the type of chart or way of displaying the information?  I am using the spline chart type in ThingSpeak and would like to see something similar with the highcharts.  I am new at this and tried to see an option in the code, but could not.  Thanks!
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: turgo on Apr 18, 2014, 09:55 pm
It will take some effort for you to learn how to use the Highstock library.  The website is: http://www.highcharts.com (http://www.highcharts.com).  The demo's page shows all the types of charts Highstock supports: http://www.highcharts.com/stock/demo/spline (http://www.highcharts.com/stock/demo/spline).

To make my chart display splines, change line 310, which is a commented out line, to:
Code: [Select]
type: 'spline',

I noticed that spline slows the display down considerably with a large data set.
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: notforyou23 on Apr 19, 2014, 05:31 am
Much appreciated!  Thats exactly what I wanted to know.  And so, that can be changed to any of the chart types (area, bar, column, etc).

And, yes...  all this takes lots of effort ! :smiley-eek:  It's always easier with some help though.
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: VasilijHCN on Dec 13, 2014, 10:48 pm
Please help with plugin, where i need insert data, and what ? HTML, CSS, JavaScript ?
If possible post separated code HTML, CSS, JavaScript.
Thanks.
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: halciber on Apr 02, 2015, 02:28 am
Turgo, thank you so much for figuring out the java script and the charts api.  This is exactly the help I needed.  I appreciate your help with this.

Sincerely,
halciber
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: firsthuman on Jul 13, 2015, 01:58 am
Is there an easy way to add additional data to the chart, but in "column" format?
And is it possible to have more than two different y-axis (for temperature, pressure, humidity, ...)?

How could this be achieved?
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: mberoldo on Aug 14, 2015, 06:07 pm
Thank you very much for this fantastic work!!

There´s a very little mistake in:
    tooltip: {
      valueDecimals: 1,
      valueSuffix: '°F',
      xDateFormat:'%Y-%m-%d<br/>%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.
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: awootton on Aug 18, 2015, 08:35 am
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
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: Mr_ToR on Nov 29, 2016, 12:51 am
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'
            }
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: Mr_ToR on Nov 29, 2016, 04:32 am
OK disregard my last message because i got it to work
here is the working code

http://jsfiddle.net/calculathor/oLp97nd1/ (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 :-)
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: Mr_ToR on Nov 29, 2016, 04:42 am
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
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: Alx-I on Mar 06, 2018, 12:17 am
A very big thanks!!!
It works our of the box :D
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: easydoor on Jul 11, 2018, 03:59 pm
Can someone tell me how can I manually chose the colour for new graphs?
Thx
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: cweinhofer on Oct 05, 2018, 01:32 pm
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?
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: easydoor on Jun 08, 2019, 03:56 am
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&amp;offset=0&amp;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
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: zoomx on Jun 11, 2019, 03:16 pm
If I am not wrong it mean that original code used http instead of https that now is mandatory.
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: easydoor on Jun 12, 2019, 02:38 am
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?
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: zoomx on Jun 12, 2019, 08:57 am
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)

Code: [Select]
GET https://thingspeak.com/channels/9354/feed/last.json?callback=jQuery191003508808604683611_1560321345885&amp;offset=0&amp;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

Code: [Select]
$.getJSON('https://www.thingspeak.com/channels/'+channelKeys[channelIndex].channelNumber+'/feed/last.json?callback=?&amp;offset=0&amp;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.

Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: easydoor on Jun 16, 2019, 01:30 am
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

Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: easydoor on Jun 16, 2019, 09:58 am
Btw..I asked the same question on thingspeak thread and I got explanation that "Callback Parameter Deprecated" is from now deprecated. Look at link:
https://community.thingspeak.com/forum/announcements/thingspeak-live-chart-multi-channel-second-axis-historical-data-csv-export/#p9007 (https://community.thingspeak.com/forum/announcements/thingspeak-live-chart-multi-channel-second-axis-historical-data-csv-export/#p9007)
The post number 9.
He even mentioned link for cahnges at:
https://ch.mathworks.com/help/thingspeak/release-notes.html (https://ch.mathworks.com/help/thingspeak/release-notes.html)
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: easydoor on Jun 16, 2019, 11:09 am
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 (https://ch.mathworks.com/help/thingspeak/release-notes.html)
with R2019a and their explanation:
Code: [Select]
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
Code: [Select]
callback=?
 from line as to replace
Code: [Select]
www
 with
Code: [Select]
api
.
Example:
Before (line 93):
Code: [Select]
$.getJSON('https://www.thingspeak.com/channels/'+channelNumber+'/feed.json?callback=?&offset=0&results=2500;key='+key, function(data)
After (line 93):  
Code: [Select]
$.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
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: zoomx on Jun 17, 2019, 02:24 pm
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.
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: paulie_iwin on Dec 14, 2019, 10:53 pm
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.
Title: Re: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export
Post by: crave_ on Apr 22, 2020, 07:38 pm
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