• Stars
    star
    209
  • Rank 181,574 (Top 4 %)
  • Language
    Python
  • Created over 10 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Arduino library for real-time logging and streaming data to online plotly graphs

Real-time Graphing and Data Logging

The easiest and fastest way to plot and share data on the Arduino.

Real-time Plotting with Arduino and Plotly

Plotly's Arduino libraries connects Arduinos to plotly's beautiful online graphing tool for real-time, interactive data logging and graphing. It's free, open source, and your graphs and data are entirely online.

Here is an example of a real-time graph: http://plot.ly/~streaming-demos/6/

Super easy

#include <WiFi.h>
#include "plotly_streaming_wifi.h"

#define num_traces 2
// Sign up to plotly here: https://plot.ly
// View your API key and stream tokens in your settings: https://plot.ly/settings
char *tokens[num_traces] = {"your_plotly_stream_token", "another_plotly_stream_token"};
plotly graph = plotly("your_plotly_username", "your_plotly_api_key", tokens, "your_filename", num_traces);

int status = WL_IDLE_STATUS;     // the Wifi radio's status
char ssid[] = "wifi_network_name"; //  your network SSID (name)
char pass[] = "wifi_network_password"; // // your network password

void wifi_connect(){
    // attempt to connect using WPA2 encryption:
    Serial.println("... Attempting to connect to WPA network...");
    status = WiFi.begin(ssid, pass);
    // if you're not connected, stop here:
    if ( status != WL_CONNECTED) {
      Serial.println("... Couldn't get a WiFi connection, trying again");
      wifi_connect();
    }
    // if you are connected, print out info about the connection:
    else {
      Serial.println("... Connected to network");
    }
}

void setup() {

  Serial.begin(9600);

  wifi_connect();

  // Initialize a streaming graph in your plotly account
  graph.init();
  // Initialize plotly's streaming service
  graph.openStream();
}

void loop() {
  // now let's stream data to plotly, giddyup!
  graph.plot(millis(), analogRead(A0), tokens[0]);
  graph.plot(millis(), analogRead(A1), tokens[1]);
}

5 Minute Quickstart

Note: this library doesn't work with the latest Arduino IDE. Use 1.0.3 (for WiFi) or 1.0.5 for other shields. See #38 for more details

If you're working on the Yún, click on the plotly_yun folder for separate instructions.

If you're device isn't internet connected, you can still connect to plotly over serial. Click on the plotly_streaming_serial folder for separate instructions.

  1. Sign up to plotly: https://plot.ly.

  2. Download and uncompress the latest plotly release: https://github.com/plotly/arduino-api/releases.

  3. Place the appropriate library your Arduino libraries folder. On a Mac, this is in ~/Documents/Arduino/libraries/:

  4. Open up the Arduino IDE. If your using WiFi and haven't upgraded your firmware, use the IDE version 1.0.3.

  5. Load up one of the examples from this repository. Fill in your plotly username, API key, stream tokens, and filename. You can find your API key and stream tokens here: https://plot.ly/settings. It'll look something like:

    char *tokens[] = {"ab4kf5nfdn","kdf5bn4dbn"};
    plotly graph("anna.lyst","ab4kftunvd", tokens, "arduino graph");

    (those are fake keys and tokens)

  6. Upload the program.

  7. Open up your Serial Monitor. You'll see an output like:

    ... Attempting to connect to WPA network...
    ... Connected to network
    ... Attempting to connect to plotly's REST servers
    ... Connected to plotly's REST servers
    ... Sending HTTP Post to plotly
    ... Sent message, plotly's response:
    ... A-ok from plotly, All Streams Go!
    ... View your streaming plot here: https://plot.ly/~streaming-demos/6
    ... Connecting to plotly's streaming servers...
    ... Connected to plotly's streaming servers
    ... Initializing stream
    ... Done initializing, ready to stream!
    
  8. Grab the URL that was printed out, view your graph in your browser, and celebrate! The graph and data is saved in your plotly account, so you can view it in your plotly file list here: https://plot.ly/plot. You can view, edit, and share your graphs while data is streaming to them in real-time. Everybody that views the graph will see the exact same data at the same time (try it out yourself: open your graph in two different browser windows).

Usage and Docs

Usage, Your Data Rights, and Private Graphs

When you make a graph on plotly, you retain the rights to your content (see our terms here). You also control whether your graphs are public or private. Public plotting is free; for a lot of private use, you can get a Premium or Organizational plan (see http://plot.ly/plans). It's just like GitHub.

By default, anyone can view the graphs at the unique URL. To make the graphs private, so that only you can see them when your logged in, set world_readable to false:

  plotly graph = plotly("your_plotly_username", "your_plotly_api_key", streaming_tokens, "your_plotly_filename", num_traces);
  graph.world_readable = false;

Time stamping

By default, plotly assumes that x is millis() and automatically converts the x to a real-time timestamp with the timezone "America/Montreal" on the server. To disable this, set convertTimestamp to false, e.g.

  plotly graph = plotly("your_plotly_username", "your_plotly_api_key", streaming_tokens, "your_plotly_filename", num_traces);
  void setup(){
    graph.convertTimestamp = false;
  }

To change the timezone, set timezone to one of the strings in here: Accepted Timezone Strings.txt, e.g.

  plotly graph = plotly("your_plotly_username", "your_plotly_api_key", streaming_tokens, "your_plotly_filename", num_traces);
  void setup(){
    graph.timezone = "Africa/Abidjan";
  }

Adjusting the number of points plotted at a time

By default, your real-time graph will graph the 30 most recent points at a time. To adjust this, set the member variable maxpoints to something else, e.g.

  plotly graph = plotly("your_plotly_username", "your_plotly_api_key", streaming_tokens, "your_plotly_filename", num_traces);
  void setup(){
    graph.maxpoints = 200;
  }

Editing the live graph

Plotly graphs can be edited while data is streaming to them. Every aspect of the graph is configurable: you can add a second y-axis, turn the graphs into subplots, change the colors, update the title, change the chart type, etc. To get started, just open up the graph in your list of files here: https://plot.ly/plot or click Save and Edit on the public view of your graph that the serial monitor printed out (e.g. http://plot.ly/~streaming-demos/6/).

Multiple Viewers

Everybody who looks at your streaming graph sees the exact same data, at the exact same time. Give it a try yourself: open up a graph in two different browser windows.

Overwriting or Appending Data

By default, the initialization of your graph (graph.init();) overwrites the existing graph with your new data. This is the perfect option for development: when you re-run your script, a fresh new graph is created. However, when you run your Arduino for an extended period of time, the Arduino may reset itself, which would in turn reset the graph and remove the existing data. To prevent this from happening, you can use the fileopt "extend", which will append your new data to the existing data in the graph.

So, for running your Arduino for a very long time, you should add

graph.fileopt = "extend"; // Remove this if you want the graph to be overwritten on initialization

to your setup() loop, i.e.

void setup() {
  Serial.begin(9600);

  startEthernet();

  bool success;
  graph.maxpoints = 500;
  graph.fileopt = "extend"; // Remove this if you want the graph to be overwritten
  success = graph.init();
  while(!success){
    Serial.println(F("Error initializing graph, trying again."));
    delay(5000);
    success = graph.init();
  }
  graph.openStream();
}

Streaming Multiple Traces to Multiple Plots

Example code is here: Streaming Multiple Traces to Multiple Plots. View the comment at the bottom of the example for an explanation of the code.

Logging and Debugging

The parameter log_level sets how debugging information is printed out over serial. For troubleshooting, set log_level to 0, i.e.

void setup(){
  Serial.begin(9600);
  startEthernet();

  graph.log_level = 0;

  success = graph.init();
  if(!success){while(true){}}
  graph.openStream();
}

Set log_level to 4 if you want nothing to be printed out on serial.

Docs

class plotly(char *username, char *api_key, char* stream_tokens[], char *filename, int nTraces);

Public Member Functions

  • bool plotly.init()

    Creates an empty graph in your plotly account that will get streamed to. This is done by making an API call to plotly's REST service. Returns true if initialization was successful, false otherwise.

  • void plotly.openStream()

    Opens a TCP connection to plotly's streaming service. The stream is uniquely identified by the stream_tokens.

  • void plotly.closeStream()

    Closes the TCP connection to plotly's streaming service.

  • void plotly.reconnectStream()

    Reopens the connection to plotly's streaming service if not connected.

  • void plot(unsigned long x, int y, char *token)

    Plots (x, y) to the streaming graph.

  • void plot(unsigned long x, float y, char *token)

    Plots (x, y) to the streaming graph.

Public Member Parameters

  • int plotly.log_level (Default 2)

    Determines which messages are printed over serial. Levels are:

    • 0: Debugging
    • 1: Informational
    • 2: Status
    • 3: Errors
    • 4: Quiet
  • bool plotly.dry_run

    If True, then no calls are made to Plotly's servers.

  • int plotly.maxpoints (Default 30)

    Determines the number of points to plot at a time. Valid from 1 to 200000.

  • bool plotly.convertTimestamp (Default true)

    If true, the Plotly assumes that x is milliseconds since program start (millis()) and automatically converts these values into a timestamp.

  • char *plotly.timeZone (Default: "America/Montreal")

    The timezone to convert the timestamps if plotly.convertTimestamp=true. A list of the accepted timezones are in this repo: Accepted Timezone Strings.txt

  • bool plotly.world_readable (Default: true)

    If true, then your graph is publicly viewable and discoverable by unique url. If false, then only you can view the graph.

  • char *plotly.fileopt (Default "overwrite")

    Either "extend" or "overwrite".

    If "overwrite", then when the graph is initialized (during plotly.init()), the existing graph is overwritten with a new one. This means that the existing data in the graph will be removed. This option is good for development, when you want a fresh graph to appear everytime you run your script.

    If "extend", then the existing data is kept when the graph is initialized (during plotly.init()), and the new data is appended onto the existing data. This option is good for when you are running your device for an extended period of time, for if the Arduino resets (which may happen every few hours) then the existing data in the graph is not removed.

Projects

Contributing Notes

The wifi, ethernet, gsm, and cc3000 libraries and examples are 95% identical and so are automatically generated from template files in the plotly_dev folder. We use Mako, one of Python's templating libraries to generate these files. To run, do:

$ python render.py

Get in touch

More Repositories

1

dash

Data Apps & Dashboards for Python. No JavaScript Required.
Python
19,422
star
2

plotly.js

Open-source JavaScript charting library behind Plotly and Dash
JavaScript
16,534
star
3

plotly.py

The interactive graphing library for Python ✨ This project now includes Plotly Express!
Python
15,279
star
4

falcon

Free, open-source SQL client for Windows and Mac 🦅
JavaScript
5,134
star
5

dash-sample-apps

Open-source demos hosted on Dash Gallery
Jupyter Notebook
3,047
star
6

plotly.R

An interactive graphing library for R
R
2,488
star
7

dash-recipes

A collection of scripts and examples created while answering questions from the greater Dash community
Python
989
star
8

react-plotly.js

A plotly.js React component from Plotly 📈
JavaScript
922
star
9

react-pivottable

React-based drag'n'drop pivot table with Plotly.js charts
JavaScript
907
star
10

jupyter-dash

Develop Dash apps in the Jupyter Notebook and JupyterLab
Python
906
star
11

plotly_express

Plotly Express - Simple syntax for complex charts. Now integrated into plotly.py!
Python
685
star
12

Plotly.NET

interactive graphing library for .NET programming languages 📈
F#
584
star
13

datasets

Datasets used in Plotly examples and documentation
HTML
582
star
14

dash-cytoscape

Interactive network visualization in Python and Dash, powered by Cytoscape.js
Python
567
star
15

dash-bio

Open-source bioinformatics components for Dash
Python
501
star
16

Dash.jl

Dash for Julia - A Julia interface to the Dash ecosystem for creating analytic web applications in Julia. No JavaScript required.
Julia
481
star
17

react-chart-editor

Customizable React-based editor panel for Plotly charts
JavaScript
460
star
18

react-cytoscapejs

React component for Cytoscape.js network visualisations
JavaScript
448
star
19

spectacle-editor

Drag and drop Spectacle editor.
JavaScript
442
star
20

dash-table

OBSOLETE: now part of https://github.com/plotly/dash
Python
421
star
21

documentation

Issue tracker for Plotly's open-source documentation.
419
star
22

dashR

Create data science and AI web apps in R
JavaScript
381
star
23

dash-docs

📖 ISSUE TRACKER ONLY for The Official Dash Userguide & Documentation https://dash.plotly.com/
Python
371
star
24

jupyterlab-dash

An Extension for the Interactive development of Dash apps in JupyterLab
Python
360
star
25

plotly_matlab

Plotly Graphing Library for MATLAB®
MATLAB
350
star
26

Kaleido

Fast static image export for web-based visualization libraries with zero dependencies
PostScript
333
star
27

orca

Command line application for generating static images of interactive plotly charts
JavaScript
284
star
28

dash-core-components

OBSOLETE: now part of https://github.com/plotly/dash
Python
271
star
29

IPython-plotly

A collection of data science IPython notebooks with Plotly graphs
HTML
266
star
30

dash-component-boilerplate

Get started creating your own Dash components here.
Python
260
star
31

angular-plotly.js

TypeScript
226
star
32

jupyterlab-chart-editor

JupyterLab extension for Plotly's react-chart-editor
TypeScript
213
star
33

dash-pivottable

react-pivottable in Dash
Python
189
star
34

dash-oil-and-gas-demo

Dash Demo App - New York Oil and Gas
Python
182
star
35

dash-detr

A User Interface for DETR built with Dash. 100% Python.
Python
179
star
36

dashboards

Superseded by Dash!
179
star
37

plotlyjs-flask-example

A simple plotly.js example served with flask
Python
179
star
38

dash-table-experiments

NO LONGER SUPPORTED - use https://github.com/plotly/dash-table instead
JavaScript
175
star
39

plotly-nodejs

node.js wrapper for Plotly's Chart Studio Streaming and REST APIs
JavaScript
166
star
40

colorlover

Color scales in Python for humans
Python
156
star
41

dash-html-components

OBSOLETE - now part of https://github.com/plotly/dash
Python
154
star
42

dash-svm

Interactive SVM Explorer, using Dash and scikit-learn
Python
153
star
43

Streaming-Demos

Demos of Plotly's Real-time Streaming API
Jupyter Notebook
149
star
44

dash-ag-grid

Dash AG Grid is a high-performance and highly customizable component that wraps AG Grid, designed for creating rich datagrids.
Python
139
star
45

dash-labs

Work-in-progress technical previews of potential future Dash features.
Python
139
star
46

dash-daq

Control components for Dash
JavaScript
137
star
47

dash-technical-charting

Powerful technical charting app/interface in pure Python
Python
133
star
48

dash-stock-tickers-demo-app

Dash Demo App - Stock Tickers
CSS
131
star
49

dash-salesforce-crm

118
star
50

python-user-guide

MOVED!
115
star
51

dash-vtk

Bringing vtk.js into Dash and Python
Python
109
star
52

dashboards.ly

Superseded by Dash!
HTML
108
star
53

dash-renderer

OBSOLETE has been merged into dash
JavaScript
97
star
54

Plotly.jl

A Julia interface to the plot.ly plotting library and cloud services
Julia
93
star
55

raspberrypi

Realtime Streaming with the Raspberry Pi and Plot.ly Python Library
Python
91
star
56

dash-image-processing

Dash Demo App - Image Processing App
Python
82
star
57

dash-canvas

An interactive image editing component for Dash
Python
82
star
58

dash-volatility-surface

Volatility surface explorer in pure Python
Python
79
star
59

dash-deck

Bringing deck.gl and pydeck into Dash
JavaScript
75
star
60

dash-world-cell-towers

A Dash app for exploring the world cell tower dataset provided by OpenCellid
Python
72
star
61

dash-auth

Basic Auth and Plotly Authentication for Dash Apps
Python
72
star
62

dash-player

Dash Component wrapping React-Player
Python
72
star
63

Dash.NET

F# interface to Dash- the most downloaded framework for building ML & data science web apps
F#
67
star
64

dash-alternative-viz

Dash components & demos to create Altair, Matplotlib, Highcharts , and Bokeh graphs within Dash apps.
JavaScript
67
star
65

dash-heroku-template

Fool-proof template for deploying Dash apps on Heroku
Python
64
star
66

simple-example-chart-apps

Some very simple apps to demonstrate the chart types on the Plotly website.
CSS
54
star
67

postMessage-API

Bind custom interactivity to embedded Plotly graphs
HTML
52
star
68

graphing-library-docs

Plotly's graphing libraries documentation.
Jupyter Notebook
51
star
69

rasterly

Rapidly generate raster images from large datasets in R with Plotly.js
R
48
star
70

dash-opioid-epidemic-demo

US county data for poision-induced deaths, years 1999-2015
HTML
48
star
71

dash-redis-celery-periodic-updates

Demo apps now maintained in https://github.com/plotly/dash-enterprise-docs
Python
48
star
72

dash-dangerously-set-inner-html

Dash component to dangerously set inner raw HTML
Python
45
star
73

dash-px

Simple Dash app using Plotly Express
Python
43
star
74

dash-network

A tutorial & demo on how to port the D3 force-layout network diagram to Dash
JavaScript
43
star
75

dash-sunburst

Dash / React + D3 tutorial: Sunburst diagrams
Python
43
star
76

academy

CSS
42
star
77

public-health

âš• Tutorials for public health crossfilter dashboards
42
star
78

ruby-api

A Ruby wrapper to the plot.ly REST API.
Ruby
41
star
79

react-colorscales

A React UI component for picking and modifying colorscales
JavaScript
37
star
80

dash-yield-curve

Remake of the NYTimes yield curve demo
CSS
37
star
81

dash-app-stylesheets

Hosting Dash app stylesheets
CSS
36
star
82

plotly.github.io

Help pages for Chart Studio
CSS
35
star
83

plotly-notebook-js

A package for using plotly in Tonicdev and Jupyter notebooks.
JavaScript
34
star
84

canvas-portal

Gallery of examples for dash-canvas
CSS
34
star
85

dash-brain-surface-viewer

Dash app for viewing brain surfaces saved as MNI files. Data from https://github.com/aces/brainbrowser
Python
33
star
86

dash-dbx-sql

Simple Dash app demonstrating connection to Databricks via the Python SQL connector
Python
33
star
87

dash-components-archetype

Deprecated. A Builder archetype for Dash component suites. See the new version here: https://github.com/plotly/dash-component-boilerplate
JavaScript
32
star
88

R-User-Guide

The Official User-Guide to Plotly's R API and ggplotly
31
star
89

plotly.js-crossfilter.js

A simple example showing Plotly.js and Crossfilter.js working together.
JavaScript
31
star
90

plotly-webpack

Example repo for bundling plotly.js with webpack and browserify
JavaScript
30
star
91

spotfire

Create D3.js visualizations in spotfire with Plotly
29
star
92

dash-alternative-viz-demo

Components for using Dash with Matplotlib, Seaborn, Bokeh, Holoviews, and Altair.
Python
28
star
93

dashdub

Convert speech to text with Dash & Python
Jupyter Notebook
28
star
94

plotcon-2017-plotlyjs-workshop

Syllabus and materials for plotly.js workshop at PLOTCON 2017
28
star
95

workshop

Plotly API Hardware Use Cases
Arduino
27
star
96

react-ipython-notebook

React component for nbconvert.js
JavaScript
27
star
97

excel-plugin

Plotly Excel Plugin
C#
26
star
98

dash-datashader

A demo app for visualizing hundreds of millions of data points interactively with Dash and Datashader.
Python
25
star
99

dash-regression

Interactive Linear Regression Explorer, using Dash + scikit-learn
Python
25
star
100

react-plotly.js-demo-app

Demo app for the Plotly.js React component
CSS
24
star