Pages: [1]   Go Down
Author Topic: ThingSpeak Live Chart, multi channel, second axis, historical data, csv export  (Read 907 times)
0 Members and 1 Guest are viewing this topic.
Offline Offline
Jr. Member
**
Karma: 1
Posts: 88
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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 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. "

* ThingSpeakMultichannel.html (19.19 KB - downloaded 75 times.)

* Multichannel Screen Shot.png (123.41 KB, 748x641 - viewed 288 times.)
« Last Edit: January 24, 2014, 08:13:56 pm by turgo » Logged

Offline Offline
Jr. Member
**
Karma: 0
Posts: 82
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Are you awae of a tutorial in interfacing Arduino to HighStock ?
Logged

Offline Offline
Jr. Member
**
Karma: 1
Posts: 88
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.  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).  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?
Logged

Offline Offline
Jr. Member
**
Karma: 0
Posts: 82
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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
Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 32
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Wow turgo, this is amazingly cool. smiley-cool
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
Logged

Offline Offline
Jr. Member
**
Karma: 1
Posts: 88
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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.
Logged

Offline Offline
Newbie
*
Karma: 0
Posts: 32
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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
« Last Edit: February 12, 2014, 08:19:49 pm by neil12 » Logged

Pages: [1]   Go Up
Jump to: