loading
Plot.ly + Arduino Data Visualization

I've been a fan of Arduino for years now, and have used it for building everything from MIDI controllers to simple LED flashers. One thing that has always intrigued me has been visualizing some of the data that I read off of the Arduino Pins.

Plot.ly makes this simple. Really simple.

The purpose of this instructable is to demonstrate how to hook up an Arduino + Ethernet Shield and send data to Plot.ly's Servers and create beautiful graphs. We will be using a dual temperature+humidity sensor (DHT22), and sending the results directly to Plotly.

Step 1: What You Will Need:

Hardware:

Software:
(We will explain how to install the libraries in a later step)

Enclosure:
  • Two pieces of (2 1/2" x 3 1/2" ) wood (1/4" thick)
  • Four (10-32x2in) Machine Screws
  • 12 Hex Nuts (10-32 Diameter)


Step 2: Hardware Setup

Step 1:
Connect your Arduino to your Ethernet shield

Step 2:
Connect the DHT sensor:
  • DHTpin1 -> 5v
  • DHTpin2 -> digitalpin2
  • DHTpin3 -> not used
  • DHTpin4 -> gnd



Step 3: Uploading the Sketch to Your Arduino

Step 1:

  1. Download the Arduino IDE if you haven't already (We're using 1.0.5, but if you're using a WIFI shield, you'll have to use 1.0.3)
  2. Install Arduino onto your system


Step 2:
Download Libraries: (If you haven't already done so!)


You'll want to drop the library folders into your Arduino application folder. Ours is in: '/user/Documents/Arduino/libraries'. You can always check your Arduino preferences to find out where yours is if you cannot find it.

Once you find your Arduino folder, it should look like this:

  • Arduino/
    • hardware/
    • libraries/
      • plotly_ethernet/
        • plotly_ethernet.cpp
        • plotly_ethernet.h
      • DHT/
        • DHT.cpp
        • DHT.h


Once you've put the libraries in the correct place, restart the Arduino IDE.

Step 3:

  1. Download the Arduino/Plotly sketch for Temperature and Humidity visualization
  2. Open the sketch and change "username" and "api_key" to your plotly credentials.
  3. Make sure to change the "Stream Tokens" as well!
  4. Upload the sketch to your Arduino!

Step 4: Building the Enclosures

We were inspired by this Instructable, and wanted to create something similar for this project. Simplicity would be key, as we wanted to have an aesthetically pleasing, yet still minimal and low-cost, finished product.

This design is so simple and wonderful, we'll leave it up to you! Its just drilling 8 holes, and assembling!

Remember to be accurate with your holes, as they have to match up. Measure twice, drill once! :D



Step 5: Wrapping It All Up!

By now, you should be all set up and ready to go! You should have:

  • an Arduino that is programmed (not plugged into your router yet!)
  • an Arduino that is nicely bundled up into some kind of enclosure


Final Steps

  1. Plug in your Arduino to your router with the Ethernet cable
  2. Plug in your Arduino to power with the 9V Wall adapter
  3. After a few minutes, check your filewell on Plotly, and you will see your data stream in!


Happy Plotting!

Click here to check out an example using data taken from our living room in Montréal!

<p>Gave this a try, but didn't have much luck..</p><p>I'm using an arduino with a TI CC3100 , but while the Plotly server reports All Streams Go!, it doesn't plot any subsequent data that I send. </p><p>I verified that I'm sending it a properly formatted string, so I think the problem is somewhere between the TCP connection and the first data sent. </p><p>I tried re-establishing the tcp connection after I get the All Streams Go, then sending the data, but that still didn't work.. </p><p>Anyone have any idea what could be the problem: </p><p><a href="http://pastebin.com/hisREYxM" rel="nofollow">http://pastebin.com/hisREYxM </a> <a href="https://ghostbin.com/paste/brhvy" rel="nofollow">https://ghostbin.com/paste/brhvy </a> <a href="http://pastie.org/10857508" rel="nofollow">http://pastie.org/10857508</a></p>
<p>THX a lot!</p>
<p>What kind of data thruput could one reasonably expect using an arduino and a cc3100 wifi shield? </p><p>From the networking programming side, is there anything that can be done to maximize the data rate? For example, first establishing a connection with the plot.ly api and servers, then sending the arduino data to the server using udp?</p>
<p>i thought i'm not gonna make it I built the code</p>
<p>Hi</p><p>When I try my streaming URL https://plot.ly/~vanchiramani/57.json for getting the data in json format, it gives the following output:</p><p>{</p><p> &quot;data&quot;: [</p><p> {</p><p> &quot;stream&quot;: {</p><p> &quot;token&quot;: &quot;your_stream_token_here&quot;, </p><p> &quot;maxpoints&quot;: 100</p><p> }, </p><p> &quot;type&quot;: &quot;scatter&quot;</p><p> }, </p><p> {</p><p> &quot;stream&quot;: {</p><p> &quot;token&quot;: &quot;your_stream_token_here&quot;, </p><p> &quot;maxpoints&quot;: 100</p><p> }, </p><p> &quot;type&quot;: &quot;scatter&quot;</p><p> }</p><p> ]</p><p>}</p><p>Do you know how I can get the data is json format?</p>
<p>Hi,</p><p>Thanks for this instructable. Everithing works fine but I get a drift of Time stamp on plot.ly. Do you know what should I do to correct this drift ?</p><p>Thanks</p>
<p>Everything connects fine but I can't find the stream when I go to my plot.ly filewell. I keep getting the following error even after re-trying several times. Can you help me?</p>
<p>How to configure the Arduino to work with plot.ly through a router ? <br>I used ADSL router and thus IP changes frequently . In the sketch Arduino, in this article , you need to specify a constant external (White ) IP. But it is constantly changing for me, and the DHCP function for some reason does not work in Arduino . How to set up a job with the service plot.ly Arduino using a router and assigning Arduino local IP type 192.168.1.2? <br>Thank you in advance for your help !! <br>Igor .</p>
<p>Try allocating a Static IP for your Arduino Device. </p><p>1. Login to your Router (192.168.1.1) from a browser</p><p>2. Learn to assign static IP lease (varies for every router). </p><p>It usually asks for your device's MAC address(mentioned on a sticker attached with the Ethernet shield) and for an IP to be allocated for the corresponding device. </p><p>Now the particular IP is always assigned only to the Arduino and never to other device even when the Shield is disconnected.</p><p>Image shows how-to for my router ( local brand ).</p>
<p>BharathK9,</p><p>Thank you very much! I set up the router for your advice. Everything works!</p>
<p>Always happy to help.</p><p>Good luck,</p><p>JohS81.</p>
<p>plotly_streaming_ethernet library is not detected by arduino .. please help !</p>
<p>I am facing an error.... </p><p>plotly graph= plotly (&quot;user name&quot;, &quot;api&quot;, &quot;1st token&quot;,&quot;2 nd token&quot;, &quot;which file name&quot;, &quot;what&quot;); </p><p>would you tell me?</p>
<p>I try running the sample code but I keep getting this error:</p><p>'plotly' does not have a name type</p><p>Any help/suggestions would be appreciated.</p>
<p>PLEASE HELP. been having this problem</p>
<p>Hi! I would like to monitor two sensor data &amp; plot them on two separate graphs. I have edited the &quot;simple_cc3000.ino&quot; in the example folder foundhere --&gt; https://github.com/plotly/arduino-api/archive/master.zip BUT the data from the two sensors are plotted on the same graph. how do i separate them? </p>
<p>Hi everyone,</p><p>May I ask if it is possible to put multiple temperature sensors into one set of Arduino equipment? I have many temperature sensors (up to 24) and I am looking for a way to streamline the data and plot the measurement of each in real time.</p><p>Thanks so much in advance!</p>
<p>Hi Five.</p>
<p>Hi - this is amazing ... the ability to stream to Plotly is fantastic ... but I can't get it to work - is there anybody that can assist and maybe look over my code. I just can;t see where I'm going wrong! It's so frustrating,</p>
<p>Hi Michael,</p><p>Have you solved? If not, describe your problem and I will try to help.</p><p>Regards,</p><p>Alejandro</p>
<p>Hi Alejandro, thank you for the response.</p><p>No it does still not work. My graph gets created but no data is logged at all. I can see data flowing to Plot.ly and I have triple checked my username, code and token details. I connect to Plotly, data streams but nothing is ever graphed.</p><p>I can email you the code and the screenshots etc. if it will help.</p><p>I've not heard back form the Plot.ly team recently - it's been a month that I've been trying to get some support from them so any help you can provide I'll be very grateful for.</p>
<p>Hi Michael,</p><p>I sent you my email address, please send your code and I will have a look.</p><p>Regards,</p><p>Alejandro</p>
<p>Hi Alejandro</p><p>Thanks you so much for your offer to help - very much appreciated!</p><p>I managed to get in contact with the Plotly team and they were able to assist me - it's working now :)</p><p>Thanks again!</p>
<p>Hi Michael</p><p>Great to know that it is working now.</p><p>Best regards</p><p>Alejandro</p>
<p>I made an equivalent tool in python that print real time data from ADXL345 accelerometer.</p><p><a href="https://github.com/mba7/SerialPort-RealTime-Data-Plotter" rel="nofollow">https://github.com/mba7/SerialPort-RealTime-Data-P...</a></p><p>may be it will be helpful for someone</p>
<p>is there a way to store this in a flat file (.txt or somethingrather) and than upload it to plotly? this would be useful on a quadracopter.</p>
<p>Thank you very much for this Instructable. I followed every step and now I am streaming PM2.5 and WBGT data from an Arduino. </p><p>I can visualize the values that are sent from the remotely unit, without being at that place.</p><p>Regards,</p><p>Alex</p>
Fantastic!
<p>Could somebody upload the sketch modification for ENC28j60 please? I can't find it anywhere :S</p>
<p>Been having a problem with the programming side of this, getting an error that seems to be from the IDE not including the libraries correctly.</p><p>plotlyethernettemphumid:13: error: no matching function for call to 'plotly::plotly()'</p>
<p>Here is the console</p>
<p>I'm having the same problem. </p><p>As mentioned in the site the libraries should be placed like:</p><ul> <br><li>Arduino/ <br><ul> <br><li>hardware/<li>libraries/ <br><ul> <br><li>plotly_ethernet/ <br><ul> <br><li>plotly_ethernet.cpp<li>plotly_ethernet.h</ul><li>DHT/ <br><ul> <br><li>DHT.cpp<li>DHT.h</ul></ul></ul></ul><p>But after downloading the libraries , I'm getting:<br>plotly_streaming_ethernet.cpp<br>plotly_streaming_ethernet.h<br>I think that's the problem.</p>
<p>did u solved?</p>
<p>Hi all! So sorry for the broken pieces. We updated the Arduino library (https://https://github.com/plotly/arduino-api) but forgot to update the instructable examples. I just updated the example code with the new library, so give a try now! </p>
<p>WOW plotly great support to who has problems!</p>
<p>Yeah, this problem was solved by me. All you have to do is update the libraries with the files plotly_ethernet.cpp and plotly_ethernet.h you will get them here:<br><br><a href="https://gist.github.com/dwblair/9235676" rel="nofollow">https://gist.github.com/dwblair/9235676<br></a><a href="https://gist.github.com/dwblair/9235706" rel="nofollow">https://gist.github.com/dwblair/9235706<br><br></a>The link given at this site are updated libraries as they are for streaming purposes so when you download you will get &quot;plotly_streaming_ethernet.cpp&quot; and &quot;plotly_streaming_ethernet.h&quot; but in given code we have used &quot;plotly_ethernet.cpp and plotly_ethernet.h&quot;, so use the libraries from gist.github.<br><br>If you want to use the updated libraries and use streaming tokens and get the graph, use this sample sketch:<br><br><a href="https://github.com/plotly/arduino-api/tree/master/examples/ethernet" rel="nofollow">https://github.com/plotly/arduino-api/tree/master/...</a><br><br>use these libraries for the sketch:<br><a href="https://github.com/plotly/arduino-api/tree/master/plotly_streaming_ethernet" rel="nofollow">https://github.com/plotly/arduino-api/tree/master/...</a><br><br><br>(before all this make sure that your network has DHCP enabled, otherwise plotly's servers won't be to communicate with the shield).<br> </p>
<p>Thanks for reporting! We updated the Arduino library (https://github.com/plotly/arduino-api) so that the graphs update in real-time (here is an example: plot.ly/~streaming-demos/6/) but forgot to point this instructable to the new code. I just updated the example code, so give it another try now! So sorry for the inconvienence. </p>
<p>PLEASE HELP US</p>
<p>hey dude! Check out the post up above, and e-mail me at alexandre@plot.ly if you're having problems with the new library. I'll update this 'ible ASAP.</p><p>Thank you for your patience</p>
<p>Hey guys!<br><br>Sorry about the issues you've been having. We recently updated our Libraries to include streaming!<br><br>I'll make sure to fix this 'ible ASAP, but for now if you want to check out:<br><br><a href="http://plot.ly/workshop/arduino-dht22/" rel="nofollow">http://plot.ly/workshop/arduino-dht22/</a><br>There is a new script and library there, you can read all about it!<br><br>Let me know if you have any issues, feel free to email me:<br>alexandre@plot.ly<br><br>Cheers!</p>
<p>PLEASE plotly help us with problems</p>
<p>If you want to do something similar but plot and save the data on your Android phone via bluetooth or wifi check out </p><p>&quot;Simple Remote Data Plotting using Android / Arduino / pfodApp&quot; <a href="https://www.instructables.com/id/Simple-Remote-Data-Plotting-using-Android-Arduino-/" rel="nofollow">https://www.instructables.com/id/Simple-Remote-Data...</a></p><p>and &quot;Arduino for Beginners, now with data plotting, controlled by Android&quot; <a href="https://www.instructables.com/id/Arduino-for-Beginners-controlled-by-Android-No-cod/" rel="nofollow">https://www.instructables.com/id/Arduino-for-Beginn...</a></p>
<p>Hey nice project!</p><p>What about using Processing to sketch out data sent to the serial port? Would that decrease the delay?</p>
<p><a href="http://pulsesensor.com/" rel="nofollow">http://pulsesensor.com/</a> does this with very little delay, imperceptible from realtime plotting.</p>
<p>Woah, that's awesome! We just made a &quot;real-time&quot; version of our plotting available, and plotted data with that hear-rate sensor. Here is the video: https://vine.co/v/Mq2LQexrbl7 </p>
<p>I guess it is a LOT cooler to have data online.</p><p>It depends on the purpose: quick testing that does not need to be recorded [processing]</p><p>data collection to be shared and displayed [plotlygraphs]</p><p>long term data collection, portable [analogRead values stored in SD card, then excel]</p>
<p>Hey! Thanks for checking out our Instructable. Our goal for the Plotly project is to let you send data right into the browser. Then, you can edit, share, and analyze your data and graph all in one place. So, here is our humidity and temperature graph you could share and edit with others: <a href="http://plot.ly/~demos/999/" rel="nofollow">http://plot.ly/~demos/999/</a>.</p>
<p>can't get the library to work... I follow the instructions and I can't even install it properly</p>
Great example for plot.ly. One tip for making cases like this is to hold the top and bottom together when you drill... that way you only drill four holes and they automatically align.

About This Instructable

102,995views

669favorites

License:

More by plotlygraphs:Plotly + Atlas Scientific: Graph Real-Time Dissolved Oxygen with Raspberry Pi Real-time Graphing with the Raspberry Pi Embedding Interactive Graphs in Blogs and Websites 
Add instructable to: