Fork on GitHub

Plotly API

Interactive, publication-quality plots in your web browser

Interface Plotly's online graphing tools with your desktop environment. Send data to your Plotly account and view your graphs in your web browser. Style with code or with our online interface; share your work publicly with a url or privately among other Plotly members; access your graphs from anywhere.

Give it a try and let us know what you think.


Or click here to Fork us on GitHub!

Scientific Graphing Libraries

Python Library

Click some of the Links below to get started with the Plotly Python Library!

IPython Library

Click some of the Links below to get started with the Plotly IPython Library!

MATLAB Library

Click some of the Links below to get started with the Plotly MATLAB Library!

Julia Library

Click some of the Links below to get started with the Plotly Julia Library!

R Library

Click some of the Links below to get started with the Plotly R Library!

Perl Library

Click some of the Links below to get started with the Plotly Perl Library!

Arduino Library

Click some of the Links below to get started with the Plotly Arduino Library!

Raspberry Pi Library

Click some of the Links below to get started with the Plotly Raspberry Pi Library!

Python Quickstart

You can install plotly with pip. In your terminal, enter:
$ pip install plotly
If that didn't work, try it with sudo:
$ sudo pip install plotly
You're good to go. Fire up Python.
>>> import plotly
Make sure that you have the latest version (to upgrade, do $ pip install plotly --upgrade):
>>> print plotly.__version__
0.5.8
Enter your plotly username and API key: Sign-in here, sign-up here, and view your API key here.
py = plotly.plotly("your_plotly_username", "your_plotly_api_key")

Let's make one of our favorite graphs: the Hans Rosling bubble chart

Load up the data. You can just copy 'n paste this block, all we're doing is just downloading and loading this CSV:

https://gist.github.com/chriddyp/8818473/raw/d8c73ff66a190a84eb8c6c19df4d8865673234ca/2007gapminder.csv

import urllib2, StringIO, csv

url = 'https://gist.github.com/chriddyp/8818473/raw/d8c73ff66a190a84eb8c6c19df4d8865673234ca/2007gapminder.csv'
response = urllib2.urlopen(url).read()
output = StringIO.StringIO(response)
cr = csv.reader(output)
def tryFloat(d):
    try:
        return float(d)
    except ValueError:
        return d

data = [[tryFloat(dij) for dij in di] for di in cr]
Let's take a look at the first few rows:
>>> for row in data[0:10]:
...     print row
['Country', 'Population', 'Continent', 'lifeExp', 'gdpPercap']
['Afghanistan', 31889923.0, 'Asia', 43.828, 974.5803384]
['Albania', 3600523.0, 'Europe', 76.423, 5937.029526]
['Algeria', 33333216.0, 'Africa', 72.301, 6223.367465]
['Angola', 12420476.0, 'Africa', 42.731, 4797.231267]
['Argentina', 40301927.0, 'Americas', 75.32, 12779.37964]
['Australia', 20434176.0, 'Oceania', 81.235, 34435.36744]
['Austria', 8199783.0, 'Europe', 79.829, 36126.4927]
['Bahrain', 708573.0, 'Asia', 75.635, 29796.04834]
['Bangladesh', 150448339.0, 'Asia', 64.062, 1391.253792]
Plotly graphs are made by building an array of dictionaries, where each dictionary describes a trace, or a series, in the plot. In this case, each trace will be a different continent. In this example, the dicts will have x, y, text, and marker size data.
import math
graph_data = [] # the data structure that will describe our plotly graph
for continent in ['Asia', 'Europe', 'Africa', 'Americas', 'Oceania']:
    '''
        "x" data is GDP Per Capita
        "y" data is Life Expectancy
        "text" data is the Country Name
        and we scale the "marker" size
         to each country's population
    '''
    graph_data.append(
    {
        'name': continent, # the "name" of this series is the Continent
        'x': [row[4] for row in data if row[2] == continent],
        'y': [row[3] for row in data if row[2] == continent],
        'text': [row[0] for row in data if row[2] == continent],

        'type': 'scatter',
        'mode': 'markers',

        'marker': { # specify the style of the individual scatter points
            'size': [math.sqrt(row[1])/1.e3 for row in data if row[2] == continent],
            'sizemode': 'area',
            'sizeref': 0.05,
            'opacity': 0.55
        }
    })
The rest of the graph, like the axes, title, and legend, is described by a layout dict
layout = {
    'xaxis': {'title': 'GDP Per Capita'},
    'yaxis': {'title': 'Life Expectancy'},
    'title': 'Hans Rosling Bubble Chart<br>2007'
}

Now, let's plot it. Giddyup!

>>> py.plot(graph_data, layout=layout,
         filename='My first plotly graph', fileopt='overwrite',
         world_readable=True, width=1000, height=650)
{
    "url": "https://plot.ly/~IPython.Demo/1085",
    "filename": "My first plotly graph",
    "error": "",
    "warning": "",
    "message": ""
}
The plotly graph will automatically open in your browser. py.plot saves the graph in your plotly account and returns a unique permanent URL where you can view and share your graph. We'll embed the graph here:

Plotly graphs are interactive.

Hover over the points to view the text, click-and-drag to zoom, shift-click-and-drag to pan.

Since your graph is online

you can can share it with that unique url, or embed your interactive graph in a web page.

You can also edit the graph in the plotly web-app

I edited the graph we just made inside the plotly web-app. It's a bit more minimal and the x-axis is logarithmic. All of the options available to customize your graph in the web-app are exposed through the API. Check out my new version here: https://plot.ly/~ChrisP/21. Here's an embedded version:

In plotly, the data and graph are always together, you can view the underlying data in every plotly graph.

The graph that we just made can be viewed here: https://plot.ly/~ChrisP/21 and that graph's data lives here: https://plot.ly/~ChrisP/21.

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 https://plot.ly/plans). 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. Here is a public graph:
import math
t = [i*2*math.pi/100 for i in range(100)]
x = [16.*math.sin(ti)**3 for ti in t]
y = [13.*math.cos(ti)-5*math.cos(2*ti)-2*math.cos(3*ti)-math.cos(4*ti) for ti in t]
trace0 = {'x': x, 'y': y, 'line': {'color': 'red', 'width': 6}}
axes = {'ticks': '', 'showline': False, 'zeroline': False}
layout = {'xaxis': axes, 'yaxis': axes}
py.iplot([trace0], layout = layout, filename="public hearts", world_readable=True, width=1000, height=650)
And the same graph, but with a private setting:
py.iplot([trace0], layout = layout, filename="private hearts", world_readable=False)

Preventing the graph from opening in your browser

If your plotting from your Python command line, using the method py.plot, your graphs will automatically open for you in your browser. To turn this off, run:
py.ioff() # interactive mode off
and back on again:
py.ion() # interactive mode on

Plotting with NumPy, Datetime, and LaTeX

import numpy as np

boxes = [{'y': np.random.randn(50), 'type': 'box', 'boxpoints': 'all', 'jitter': 0.5, 'pointpos': -1.8} for i in range(10)]

layout = {'title': 'NumPy Boxes',
          'showlegend': False,
          'yaxis': {'zeroline': False, 'ticks': '', 'showline': False},
          'xaxis': {'ticks': '', 'showgrid': False, 'showline': False}}

py.iplot(boxes, layout = layout, filename='numpy boxes', fileopt='overwrite', width=1000, height=650)
import datetime
import random

N = 500
now = datetime.datetime.now()
x = [ datetime.timedelta(hours=i) + now for i in range(N) ]
y = [ math.sin(i*5*math.pi/N)*math.exp(-2.*i/N)+random.random()/3. for i in range(N) ]

layout = {'title': 'Datetime Decay',
        'annotations': [{
            'text':'The date-formatted x-axis will increase it\'s time-resolution when you zoom.'+\
                    '<br>Click-and-drag your mouse on the plot to see how it responds!',
            'xref': 'paper', 'yref': 'paper', 'showarrow': False, 'x':0, 'y': 0}]}

py.iplot([{'x':x, 'y':y, 'mode':'markers'}], layout=layout, filename='Datetime Decay', fileopt='overwrite', width=1000, height=650)
import numpy as np
import math
x = np.linspace(-7, 7, 100)
y0 = x
y1 = y0 - x**3/math.factorial(3)
y2 = y1 + x**5/math.factorial(5)
y3 = y2 - x**7/math.factorial(7)
y4 = y3 + x**9/math.factorial(9)
y5 = np.sin(x)

linestyle = {'line': {'color': '#7FDBFF', 'dash': 'dot'}}

data = [{'x': x, 'y': y0},
        {'x': x, 'y': y1},
        {'x': x, 'y': y2},
        {'x': x, 'y': y3},
        {'x': x, 'y': y4},
        {'x': x, 'y': y5, 'line': {'color': '#0074D9'}}]

layout = {'yaxis': {'range': [-4.5, 4.5], 'zeroline':False, 'ticks':'','showline':False},
          'xaxis': {'showgrid':False,'showline':False, 'zeroline':False, 'ticks':''},
          'showlegend': False,
          'title': '$\\sin(x)=\sum\limits_{k=0}^{\infty}\dfrac{(-1)^k x^{1+2k}}{(1+2k)!}$'}

py.iplot(data, layout=layout, style=linestyle, traces=[0,1,2,3,4], filename='LaTeX', fileopt='overwrite', width=1000, height=650)

Flexible Axes and Subplots

Plotly abstracts subplots and insets as axes, so it's easy to let subplots share axes and interactivity. For example, this graph has two yaxes and two axes. Each column of plots share the same x-axis, and each row of plots share the same y-axis. Try zooming in any section of the plot (click-and-drag to zoom)!
import numpy as np

x0 = np.concatenate([np.random.randn(100), np.random.randn(100)+6])
y0 = np.random.rayleigh(size=200)

histogram2d = { "x": x0, "y": y0, "type": "histogram2d"}

histogramy1 = {"y": y0, "type": "histogramy", "xaxis": "x2", "yaxis": "y", "bardir": "h",
                "marker":{"color":"rgb(31, 119, 180)"}}
histogramy2 = {"x":x0, "type": "histogramx", "xaxis": "x", "yaxis": "y2",
                "marker":{"color":"rgb(31, 119, 180)"}}

layout = {
    "xaxis":{ "domain":[0,0.8], "showgrid":False, "showline":False, "zeroline":False },
    "yaxis":{ "domain":[0,0.8], "showgrid":False, "showline":False, "zeroline":False },
    "xaxis2":{ "domain":[0.82,1.0], "showgrid":False, "showline":False, "zeroline":False },
    "yaxis2":{ "domain":[0.82,1.0], "showgrid":False, "showline":False, "zeroline":False },
     "showlegend":False,
}
py.iplot([histogram2d, histogramy1, histogramy2],layout=layout, filename='histogram subplots', fileopt='overwrite', width=1000, height=650)

MATLAB Quickstart

Begin by importing the Plotly MATLAB library

>> api_path = '/Users/chris/plotly';
>> addpath(genpath(api_path)) % genpath finds all subfolders

Sign in to your Plotly API account

>> signin(username_or_email, api_key)

Now you can make a simple API call using plotly(), and create your first graph!

>> plotly([0,1,2,3],[0,5,3,2])

Here is the response you'll receive:
(Copy and Paste the URL into your browser to see your graph!)

ans =
url: 'https://plot.ly/~username/888'
message: [1x0 char]
warning: [1x0 char]
filename: 'plot from API'
error: [1x0 char]

Julia Quickstart

Begin by importing the Plotly Julia library

julia> using Plotly

Sign in to your Plotly API account

Julia> Plotly.signin("username_or_email", "api_key")

Julia will return:

Julia> PlotlyAccount("username_or_email", "api_key")

Now you can make a simple API call using Plotly.plot(), and create your first graph!

julia> x = [0,1,2,3,4]
julia> y = [0,3,2,4,5]
julia> Plotly.plot([x y])

Here is the response you'll receive:
(Copy and Paste the URL into your browser to see your graph!)

["url"=>"http://plot.ly/~username/888",
"filename"=>"filename",
"error"=>"",
"message"=>"",
"warning"=>""]

Perl Quickstart

Coming Soon!

R Quickstart

Begin by importing the Plotly R library

> library(plotly)

This will return:

Loading required package: RCurl
Loading required package: bitops
Loading required package: RJSONIO

Initialize a plotly object to sign in to your Plotly API account

> p <- plotly(username= 'username_or_email', key= 'api_key')

Now you can make a simple API call using p$plotly(), and create your first graph!

> p$plotly(c(0,1,2,3,4),c(0,3,2,4,5))

Here is the response you'll receive:
(Copy and Paste the URL into your browser to see your graph!)

$url
[1] "https://plot.ly/~demos/1108"
$message
[1] ""
$warning
[1] ""
$filename
[1] "from api (154)"
$error
[1] ""

Installation

Python

Option 1: PIP

From inside your Terminal, run

$ pip install plotly
[...]
Successfully installed plotly

Option 2: Easy Install

From inside your Terminal, run

$ easy_install plotly
[...]
Successfully installed plotly

Option 3: Tarball

Download and uncompress the latest Python API ,
In the downloaded folder, run the setup script inside your terminal:

$ python setup.py install
# you made need to 'sudo'
$ sudo python setup.py install

Installation

MATLAB

Download and Uncompress

 Click here to download MATLAB API 
(it may take a second).

Add the Plotly folder and subfolders to your MATLAB path

Find the path of the uncompressed folder (e.g. "/Users/chris/plotly"). Inside your MATLAB console, enter, e.g.

>>> api_path = "/Users/chris/plotly";
>>> addpath(genpath(api_path)) % genpath finds all subfolders

Installation

Perl

Option 1: CPAN

From inside your Terminal, run

$ cpan WebService::Plotly
[...]
make install -- OK

Option 2: Tarball

From inside your Terminal, run

$ perl Makefile.PL && make test && make install
# You may need to 'sudo'
$ sudo perl Makefile.PL && make test && make install

Installation

R

Option 1: Install from GitHub with devtools

First, install and load the devtools package. From within the R console, enter:

> install.packages("devtools")
> library("devtools")

Next, install plotly. From within the R console, enter:

> devtools::install_github("R-api", "plotly")
...
* DONE (plotly)

Option 2: Install from source

First, install the RJSONIO and RCurl libraries. From within the R console, type:

> install.packages("RJSONIO")
> install.packages("RCurl")

Next:

Find the file path of downloaded file (e.g. /Users/chris/Downloads/plotly_0.3.tar.gz). In your R console, type:

> mypath = '/Users/chris/Downloads/plotly_0.3.tar.gz' # replace with your path
> install.packages(mypath,type='source')

Installation

Arduino

Download and Uncompress

Add to Library Folder

Place the plotly folder inside your local Arduino libaries folder, e.g. /Users/chris/Documents/Arduino/libraries

This folder is inside your default Sketchbook location which can be found inside the Arduino preferences.

If the plotly folder is in the right place, then you should be able to select the plotly library from the Import Library... option in the Arduino IDE (you may need to restart the IDE).

Installation

Julia

Install using Julia's Pkg module

From the Julia REPL, do:

julia> Pkg.clone("https://github.com/shirlenator/Plotly.jl")

Installing from source is not recommended as it doesn't update your local METADATA or install dependencies automatically.

Authenticate with Plotly's Server

New User - Sign Up

You can sign up on with Plotly's online GUI or through the API:

import plotly
username='anna.lyst'
email='anna.lyst@plot.ly'
response = plotly.signup(username, email)
api_key = response['api_key']
tmp_pw = response['tmp_pw']
use WebService::Plotly;

my $user = USERNAME_HERE;
my $login = WebService::Plotly->signup( $user, EMAIL_HERE );
warn "temp password is $login->{tmp_pw}";
using Plotly
username="anna.lyst"
email="anna.lyst@plot.ly"
response = Plotly.signup(username, email)
api_key = response["api_key"]
tmp_pw = response["tmp_pw"]
>> username="anna.lyst"
>> email="anna.lyst@plot.ly"
>> response = signup(username, email)
>> tmp_pw = response.tmp_pw
>> api_key = response.api_key
library(plotly)
username='anna.lyst' email='anna.lyst@plot.ly' response = signup(username, email) tmp_pw = response$tmp_pw api_key = response$api_key
Coming soon ... Use the online GUI to sign up
and get your Arduino project rocking.

tmp_pw is a temporary password to access your account on plot.ly
api_key is a key to access your account through the API.

Existing User - Generate API Key

Existing users display or reset their API key here. You will be prompted to log-in if you aren't already.

Display Key
Reset Key

Your key will display here.

Initialization

Python

To get started, import plotly and initialize a plotly object with your username and api key.

import plotly
py = plotly.plotly('username_or_email', 'api_key')

You will interact with your plotly graphs through 3 methods:

py.plot
py.style
py.layout

Initialization

Perl

To get started, import plotly and initialize a plotly object with your username and api key.

use WebService::Plotly;
my $user = username_or_email;
my $key = api_key;
my $plotly = WebService::Plotly->new( un => $user, key => $key );

You will interact with your plotly graphs through 3 methods:

py->plot
py->style
py->layout

Initialization

Julia

To get started, use the module and initialize an account with your username and api key.

using Plotly
Plotly.signin(username_or_email, api_key)

You will interact with your plotly graphs through 3 methods:

Plotly.plot
Plotly.style
Plotly.layout

Initialization

MATLAB

To get started, sign in from your MATLAB script or the command line.

>> signin(username_or_email, api_key)

You will interact with your plotly graphs through 3 methods:

plotly
plotlystyle
plotlylayout

Initialization

R

To get started, load the plotly library and initialize a plotly object with your username and api key.

library(plotly)
p <- plotly(username=username_or_email, key=api_key)

You will interact with your plotly graphs through 3 methods:

p$plotly
p$style
p$layout

Initialization

Arduino

To get started, just load the plotly.h header file

#include <plotly.h>

[Your Arduino code here]

Plotly REST API Documentation

New Account Signup

Resource

Description

Plotting and Styling

Resource

Description

POST /apimkacct

Resource URL

https://plot.ly/apimkacct

Query String Parameter

Description

un

required

Desired username

Example Value :
anna.lyst
email

required

Email account associated with the user. Although an email is required to sign up to plotly no email verification is required to use the API.

Example Value:
anna.lyst@gmail.com
platform

required

Language or platform that the client is making the request from.

Example Value :
'lisp'
version

optional

Version of the API client code. This parameter may be used to issue a warning response to users that are using an out-of-date client library. For example, if a user is making a request with the MATLAB Plotly interface, version 0.1 (which has since been updated to version 0.2), Plotly will return with:
warning: Using a depreciated client library. Please upgrade to version 0.2
If you are a developer and you are versioning your Plotly client library and would like these warning messages issued, then please get in touch at chris[at]plot[dot]ly.

Response

Parameter

Description

key
Key used to access your plotly account with through the API.

Example Value :
tj6mr88zgy
tmp_pw
A password created to login to your plotly account through the plotly website. You can change this password through the plotly website.
error
A string describing any error that occured.

Example Value:
Error: A user with this username already exists.
message
A string describing a non-critical message to the user.

Example Values:
Plotly has recently expanded the API library.

Example Request

POST
https://plot.ly/apimkacct
DATA
un=anna.lyst&email=anna.lyst@plot.ly&platform=Python&version=0.1

Example Response

DATA
Response is a JSON object encoded as a string.
{
    "api_key": "3jasdk3",
    "tmp_pw": "sdfkj43",
    "error": ""
}

POST /clientresp

Resource URL

https://plot.ly/clientresp

Query String Parameter

Description

un

required

Desired username

Example Value :
anna.lyst
key

required

Key used to access your plotly account with through the API.

Example Value :
tj6mr88zgy
origin

required

plot, style, or layout. Specifies the type of call and the type of data in the parameter args. See the examples below.
platform

required

Language or platform that the client is making the request from.

Example Value :
'lisp'
version

optional

Version of the API client code. This parameter may be used to issue a warning response to users that are using an out-of-date client library. For example, if a user is making a request with the MATLAB Plotly interface, version 0.1 (which has since been updated to version 0.2), Plotly will return with:
warning: Using a depreciated client library. Please upgrade to version 0.2
If you are a developer and you are versioning your Plotly client library and would like these warning messages issued, then please get in touch at chris[at]plot[dot]ly.
args

required

Data and/or styling argument. The structure of args depends on the value of origin.

origin=plot:

Either args=[x1, y1[, ..., xn, yn]] where xi, yi are arrays of numbers or strings or args=[data1[, ... datan]] where datai is a JSON object with at least the names x, y, or z but may contain more styling and chart-type data. See the examples below for many examples.

origin=style:

args=[style1[,style2, ...]] where stylei is a JSON object that customizes the style of the i'th trace. It is identical to the datai object used in origin=plot except that it doesn't contain the data key-value pairs x, y, or z.

origin=layout:

args=layout where layout is an object that customizes the style of the layout, the axes, and the legend.

Examples

origin=plot:

[[0, 1, 2], [3, 1, 6]],
[{"x": [0, 1, 2], "y": [3, 1, 6]}],
[{"x": [0, 1, 2], "y": [3, 1, 6], "name": "Experimental", "marker": {"symbol": "square", "color": "purple"}}, {"x": [1, 2, 3], "y": [3, 4, 5], "name": "Control"}]

origin=style:
[{"type": "bar"}, {"type": "scatter", "marker": {"symbol": "square", "color": "marker"}}])

origin=layout:
{"title": "experimental data"}

kwargs

required

Key

Value

filename

required

Name of the plot in your plotly account. Use / to specify directories. If a directory path does not exist it will be created.

Example Values
{"filename": "plot from api"}
{"filename": "data/temperature vs humidity"}
fileopt

required

"new", "overwrite", "append", or "extend"

See below for an illustrative example of these values.
style

optional

The trace-style object as described above and in the examples. The style object is applied to every single trace (default) or to the traces specified in the optional traces key-value pair.

Example Values

Apply style to all traces, e.g. make every trace a bar type:
{"style":{"type": "bar"}}

Apply style to select traces by index, e.g. make traces 0, 1, and 5 a bar type plot:
{"style": {"type": "bar"},"traces": [0,1,5]}

Apply style to select traces by name, e.g. make the traces titled "experimental" and "control" a bar type:
{"style": [{"name": "experiment", "type": "bar"},{"name": "control", "type": "bar"}]}
traces

optional

traces specifies the indices that the style object should be applied to.
Also applies to which traces are extended if using fileopt="extend"
layout

optional

a key-value paired object that describes the layout of the plot. See below for an example that specifies all available key-value pairs.

Example Values
{"title": "my plot title", "xaxis": {"name": "Time (ms)"}, "yaxis": {"name": "Voltage (mV)"}}
world_readable

optional

If true: graph is viewable by anyone who has the link and in the owner's plotly account.
If false: graph is only viewable in the owner's plotly account.
kwarg_example

optional

kwargs={
  "filename": "plot from api",
  "fileopt": "overwrite",
  "style": {
      "type": "bar"
  },
  "traces": [0,3,5],
  "layout": {
      "title": "experimental data"
  },
  "world_readable": true
}

Response

Parameter

Description

filename
The filename of the plot as saved in the user's account.
url
A url where you can view the rendered graph of your data if
world_readable=True.
error
A string describing a possible error that may have occured.
Example Value:
Error: A user with this username already exists.
warning
A string describing a possible warning message.
Example Values:
Warning: You are using an outdated version of the API.
message
A string describing a non-critical message to the user.
Example Values:
Message: Plotly has recently expanded the API library.

Example Request

POST
https://plot.ly/clientresp
DATA
un=chris&
key=kdfa3d&
origin=plot&
platform=lisp&
args=[[0, 1, 2], [3, 4, 5], [1, 2, 3], [6, 6, 5]]&
kwargs={"filename": "plot from api",
        "fileopt": "overwrite",
        "style": {
            "type": "bar"
        },
    "traces": [1],
    "layout": {
        "title": "experimental data"
    },
    "world_readable": true
}

Example Response

DATA
Response is a JSON object encoded as a string.
{
  "filename": "plot from api",
  "url": "https://plot.ly/~chris/1459",
  "error": "",
  "warning": "",
  "message": ""
}

Plotly JSON Objects Documentation

Object Name

Description

Setting Trace Data, Type, Style

JSON Data Object

Click on a parameter to view details

Description :
Array of Plotly data objects, each representing one trace to be plotted, including all of its styling information.
Type :
Array
Example :
args= [
  {
    "x": [1, 2, 3, 4],
    "y": [10, 15, 13, 17],
    "type": "scatter",
    "mode": "markers"
  },
  {
    "x": [2, 3, 4, 5],
    "y": [16, 5, 11, 9],
    "type": "scatter",
    "mode": "lines"
  },
...]

Parameter

Description

"x"

x Data Values

Description :
These are the primary data being plotted. If both "x" and "y" are specified but they have different lengths, the extra points in the longer one are ignored, except in heatmaps where they are independent.

Can be an array of numbers, array of strings, or an array of date-formatted strings.
Type :
Array, Number or String
Examples :
[0,2,4,6,8], 8, ["string1", "string2", "string3"]["2013-10-04 22:23:00", "2013-11-04 22:23:00", "2013-12-04 22:23:00"]
"y"

y Data Values

Description :
These are the primary data being plotted. If both "x" and "y" are specified but they have different lengths, the extra points in the longer one are ignored, except in heatmaps where they are independent.

Can be an array of numbers or an array of strings.
Type :
Array, Number or String
Examples :
[0,2,4,6,8], 8, "Category"
"type"

Setting the Chart Type

Description :
Sets the base Chart Type.
Type :
String
Accepted Values :
"scatter"
"bar"
"box"
"histogramx"
"histogram2d"
"heatmap"
"mode"

Setting the Chart Type Mode for type: "scatter"

Description :
If the chart type == "scatter", you can set the mode with this parameter.
Type :
String
Accepted Values :
"none"
"markers"
"lines"
"lines+markers"

"lines" is the default for 20 or more points, "lines+markers" is the default for <20 points. "none" is useful mainly if fill is used to make area plots with no lines.
"marker"

An Object used to set the properies of your graphs' markers.

Description :
Marker is an Object representing one trace to be plotted, including all of its styling information. The parameters can be either a value, or an array of values. (e.g. for a Bubble Chart)
Type :
Object
Example :
args= [{
	"x":[1, 2, 3],
	"y":[4, 5, 6],
	"type":"scatter"
},
	"marker": {
 		"opacity": [1.0, 0.8, 0.6, 0.4, 0.2],
 		"symbol": "square",
 		"size": 12,
 		"color": "rgb(54,144,192)",
 		"line": {
  		"width": 3,
  		"color": "darkblue"
 		}
	}
},
...]

Marker Parameter

Description

"size"

Setting the Marker Size

Description :
The size of of the Marker
Type :
Number
Example :
2
"line"

An Object used to set properties of the Marker Line

Line Parameter

Description

"color"

Setting the Marker Line Color

Description :
The font color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"width"

Setting the Marker Line Width

Description :
Sets the Width of the Marker Line
Type :
Number
Example :
2
"dash"

Setting the Marker Line Dash Type

Description :
Sets the Marker Line Dash Style
Type :
String
Accepted Values :
"solid" (default)
"dot"
"dash"
"longdash"
"dashdot"
"longdashdot"
"color"

Setting the Marker Color

Description :
Sets the color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"opacity"

Setting the Marker's Opacity

Description :
Sets the Opacity
Type :
Number
Accepted Values :
Between : 0:1.0
"symbol"

Setting the Marker Symbol

Description :
Sets the Symbol Type for Trace Points
Type :
String
Example Value :
"circle" (default)
"square"
"diamond"
"cross"
"x"
"triangle-up"
"triangle-down"
"triangle-left"
"triangle-right"
"xaxis"

Setting which Axis to Anchor the x Data to

Description :
Sets which x Axis to Anchor the Trace to.
Type :
String
Accepted Values :
"x1", "x2"
"yaxis"

Setting which Axis to Anchor the y Data to

Description :
Sets which y Axis to anchor the Trace to.
Type :
String
Accepted Values :
"y1", "y2"
"name"

Setting the Trace Name

Description :
Sets the Trace Name
Type :
String
Example :
"My Clever Trace Name"
"text"

An Array Containing Trace Text

Description :
An Array Containing Trace Text, which is lined up with the corresponding data from the Data Array.
Type :
Array
Example :
["Point1", "Point2", "Point3"]
"textfont"

Setting the Text Font

Font Parameter

Description

"family"

Setting the Font Family

Description :
The font family
Type :
string
Accepted Values :
"Arial, sans-serif"
"Courier New, monospace"
"Droid Sans, sans-serif"
"Droid Serif, serif"
"Droid Sans Mono, sans-serif"
"Georgia, serif"
"Gravitas One, cursive"
"Impact, Charcoal, sans-serif"
"Lucida Console, Monaco, monospace"
"Old Standard TT, serif"
"Open Sans, sans-serif"
"PT Sans Narrow, sans-serif"
"Raleway, sans-serif"
"Times New Roman, Times, serif"
"Verdana, sans-serif"
"size"

Setting the Font Size

Description :
The font size
Type :
int
Example :
12
"color"

Setting the Font Color

Description :
The font color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"textposition"

Setting the Text Position

Description :
Sets where the "text" is displayed relative to the trace point.
Type :
String
Accepted Values :
"top"
"bottom"
"right"
"left"
"fill"

Setting the Fill Style of Area Charts

Description :
Fill between a trace and one of the axes (ie "tozeroy" fills to y=0) or to the previous visible scatter trace. For the first scatter trace, "tonext" is equivalent to "tozero" so that to make a standard vertically stacked area plot you can specify "tonexty" for all traces. There's no difference between "tonexty" and "tonextx" except for the first trace - both will connect the first points and last points of the two traces with straight lines, regardless of the angle of those lines, and fill the area between.
Type :
String
Accepted Values :
'none' (default)
'tozeroy'
'tozerox'
'tonexty'
'tonextx'
"fillcolor"

Setting the Fill Color of Area Charts

Description :
Sets the Fill Color of Area Plots
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX"
"RGB"
"RGBA"
"HSL"
"HSV"
"colorname"
"error_y"

Object Describing Error Bars in the y Direction

Description :
Object describing error bars in the y direction.
Type :
Object
Example :
args= [
  {
    "x": [0, 1, 2],
    "y": [6, 10, 2],
    "error_y": {
      "type": "percent",
      "value": 50,
      "visible": true
    }
  }
]

Error_Y Parameter

Description

"type"

Setting the Error Bar Type

Description :
Sets the Error Bar Type
Type :
String
Example Value :
"percent" (default)
"constant"
"sqrt"
"data"
"value"

Setting the Error Bar Value

Description :
Sets the Value of the Error Bars
Type :
Number
Example :
Number (default 10), the error value
"type": "percent": a percentage of each y value
"type": "constant": a specific y value
"type": "sqrt" or "data": value is not used
"visible"

Setting the Error Bar Visibility

Description :
Sets the Visibility of Error Bars
Type :
Boolean
Example :
true or false
"color"

Setting the Error Bar Color

Description :
Sets the Error Bar Color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"thickness"

Setting Thickness of Error Bar Lines

Description :
Sets the Thickness of Error Bar Lines
Type :
Number
Example :
2
"width"

Setting Width of Error Bar Caps

Description :
Sets the Width of the Error Bar Caps
Type :
Number
Example :
28
"opacity"

Setting Error Bar Opacity

Description :
Sets the Error Bar Opacity
Type :
Number
Accepted Values :
0 : 1.0
"jitter"

Setting the Horizontal Motion of Box Plot Points

Description :
Random horizontal motion as a fraction of the box width, added to box plot points to help give more sense of the density of a distribution
Type :
Number
Accepted Values :
0 : 1.0
"whiskerwidth"

Setting the Whisker Width of a Box Plot

Description :
The Width of Whiskers as a fraction of the Box Width. Note that the box width itself is controlled plot-wide by the number of boxes to show and by "boxgap" and "boxgroupgap" in "layout".
Type :
Number
Accepted Values :
0 : 1.0
"boxmean"

Setting the Box Mean

Description :
If true, show a dashed line for the mean of the distribution. If 'sd', add a diamond ±1 standard deviation (population)
Type :
String or Boolean
Accepted Values :
true, false, 'sd'
"pointpos"

Setting the Offset of Box Plot Points from the Boxes

Description :
Horizontal offset as a fraction of the box width of the center of box plot points. If only outliers are shown, they can be placed in line with the box and whiskers (pointpos : 0) but if all points are shown they can be clearer off ot one side.
Type :
Number
Accepted Values :
-2 : 2
"autobinx"

x Axis Bin Settings

Description :
Use Plotly's automatic binning algorithm (optionally specifying the rough number of bins) or provide explicit start, end, and bin size
Type :
Boolean
Example :
true or false
"autobiny"

y Axis Bin Settings

Description :
Use Plotly's automatic binning algorithm (optionally specifying the rough number of bins) or provide explicit start, end, and bin size
Type :
Boolean
Example :
true or false
Global Chart Layout Settings

JSON Layout Object

Click on a parameter to view details

Description :
An Object with Several Properties used for Setting the Overall Chart Style
Type :
Object
Example :
kwargs = {
  layout : {
    "title" : "My Chart Title",
    "width" : 400,
    "height" : 600,
    "font" : {
    	"size" : 12
  	},
    legend : {
    	"showlegend" : true,
    },
  }
}

Parameter

Description

"title"

Setting the Chart Title

Description :
The desired name for your graph.
Type :
String
Example :
"Chart Title"
"titlefont"

Title Font Settings

Font Parameter

Description

"family"

Setting the Font Family

Description :
The font family
Type :
string
Accepted Values :
"Arial, sans-serif"
"Courier New, monospace"
"Droid Sans, sans-serif"
"Droid Serif, serif"
"Droid Sans Mono, sans-serif"
"Georgia, serif"
"Gravitas One, cursive"
"Impact, Charcoal, sans-serif"
"Lucida Console, Monaco, monospace"
"Old Standard TT, serif"
"Open Sans, sans-serif"
"PT Sans Narrow, sans-serif"
"Raleway, sans-serif"
"Times New Roman, Times, serif"
"Verdana, sans-serif"
"size"

Setting the Font Size

Description :
The font size
Type :
int
Example :
12
"color"

Setting the Font Color

Description :
The font color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"font"

Global Font Settings

Font Parameter

Description

"family"

Setting the Font Family

Description :
The font family
Type :
string
Accepted Values :
"Arial, sans-serif"
"Courier New, monospace"
"Droid Sans, sans-serif"
"Droid Serif, serif"
"Droid Sans Mono, sans-serif"
"Georgia, serif"
"Gravitas One, cursive"
"Impact, Charcoal, sans-serif"
"Lucida Console, Monaco, monospace"
"Old Standard TT, serif"
"Open Sans, sans-serif"
"PT Sans Narrow, sans-serif"
"Raleway, sans-serif"
"Times New Roman, Times, serif"
"Verdana, sans-serif"
"size"

Setting the Font Size

Description :
The font size
Type :
int
Example :
12
"color"

Setting the Font Color

Description :
The font color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"axis"

Axis Settings

Description :
An object with multiple attributes to style the axis. Create a new axis object for each axis you wish to style.
Type :
object
Example :
"xaxis" : {
	"type" : "log"
}

"yaxis" : {
	"rangemode" : "nonnegative"
}

Axis Parameter

Description

"title"

Setting the Axis Title

Description :
Sets the Axis Title.
Type :
String
Example :
"X Axis Title"
"titlefont"

Setting the Axis Title Font

Font Parameter

Description

"family"

Setting the Font Family

Description :
The font family
Type :
string
Accepted Values :
"Arial, sans-serif"
"Courier New, monospace"
"Droid Sans, sans-serif"
"Droid Serif, serif"
"Droid Sans Mono, sans-serif"
"Georgia, serif"
"Gravitas One, cursive"
"Impact, Charcoal, sans-serif"
"Lucida Console, Monaco, monospace"
"Old Standard TT, serif"
"Open Sans, sans-serif"
"PT Sans Narrow, sans-serif"
"Raleway, sans-serif"
"Times New Roman, Times, serif"
"Verdana, sans-serif"
"size"

Setting the Font Size

Description :
The font size
Type :
Number
Example :
12
"color"

Setting the Font Color

Description :
The font color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"range"

Setting the Axis Range

Description :
The range of the axis. Use an Array to determine the start and end point of the axis
Type :
Array
Example :
[5,25]
"type"

Setting Axis Type

Description :
Sets the Axis Range Type. Can be either Linear or Logarithmic.
Type :
String
Accepted Values :
"linear", "log"
"showline"

Toggle Axis Line Visibility

Description :
Shows/Hides the Axis Line.
Type :
Boolean
Example :
true or false
"mirror"

Toggle Axis Line Mirroring

Description :
Mirror the Graph Baseline or Ticks.
Type :
Boolean, String
Accepted Values :
true, false, "ticks"
"linecolor"

Setting the Axis Line Color

Description :
Sets the axis line color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"linewidth"

Setting the Axis Line Width

Description :
The width of the axis line
Type :
Number
Example :
2
"tick0"

Setting the Start Point of the Axis

Description :
The Starting point of the Axis
Type :
Number
Example :
10
"dtick"

Setting Distance Between Ticks

Description :
The Distance between Ticks
Type :
Number
Example :
.25
"ticks"

Toggle Tick Visibility

Description :
Sets the tick location.
Type :
String
Accepted Values :
"inside", "outside", "" (Empty str for NONE)
"ticklen"

Setting the Tick Length

Description :
The Length of the Axis Ticks
Type :
Number
Example :
4
"tickwidth"

Setting the Tick Width

Description :
The width of the axis ticks
Type :
Number
Example :
2
"tickcolor"

Setting the Tick Color

Description :
Sets the axis tick color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"nticks"

"showticklabels"

Toggle Tick Label Visibility

Description :
Shows/Hides the Axis Tick Labels.
Type :
Boolean
Example :
true or false
"tickangle"

Setting the Tick Angle

Description :
The angle of the Axis Ticks
Type :
Number
Example :
45
"exponentformat"

"showexponent"

"showgrid"

Toggle Grid Visibility

Description :
Shows/Hides the Axis Grid.
Type :
Boolean
Example :
true or false
"gridcolor"

Setting the Grid Color

Description :
Sets the axis grid color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"gridwidth"

Setting the Grid Width

Description :
The width of the axis grid
Type :
Number
Example :
2
"autorange"

Toggle Axis Autorange

Description :
Sets the axis autorange on/off or "reversed".
Type :
Boolean
Accepted Values :
true or false or "reversed"
"rangemode"

Setting the Axis' Range Mode

Description :
Sets the Axis Range Mode
Type :
String
Accepted Values :
"normal", "tozero", "nonnegative"
"autotick"

Toggle Axis Autoticks

Description :
Toggle Axis Auto Ticks.
Type :
Boolean
Accepted Values :
true or false
"zeroline"

Setting the Visibility of the Axis' Zeroline

Description :
Sets the visibility of the Axis" Zero Line
Type :
Boolean
Accepted Values :
true or false
"zerolinecolor"

Setting the Zero Line Color

Description :
Sets the Axis Zero Line color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"zerolinewidth"

Setting the Zero Line Width

Description :
The width of the Axis" Zero Line
Type :
Number
Example :
2
"overlaying"

"domain"

Setting the Domain

Description :
The domain of the axis. Use an Array to determine the start and end point of the axis
Type :
Array
Example :
[5,25]
"position"

"anchor"

"tickfont"

Setting the Axis Tick Font

Font Parameter

Description

"family"

Setting the Font Family

Description :
The font family
Type :
string
Accepted Values :
"Arial, sans-serif"
"Courier New, monospace"
"Droid Sans, sans-serif"
"Droid Serif, serif"
"Droid Sans Mono, sans-serif"
"Georgia, serif"
"Gravitas One, cursive"
"Impact, Charcoal, sans-serif"
"Lucida Console, Monaco, monospace"
"Old Standard TT, serif"
"Open Sans, sans-serif"
"PT Sans Narrow, sans-serif"
"Raleway, sans-serif"
"Times New Roman, Times, serif"
"Verdana, sans-serif"
"size"

Setting the Font Size

Description :
The font size
Type :
Number
Example :
12
"color"

Setting the Font Color

Description :
The font color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"legend"

Legend Settings

Description :
An Object with Several Properties used for Setting the Legend Style
Type :
Object
Example :
kwargs = {
  layout : {
      legend : {
      "showlegend" : true,
      "x" : 0,
      "y" : 1,
      "bgcolor" : "#E2E2E2",
      "bordercolor" : "#FFFFFF",
      "borderwidth" : 2,
      "traceorder" : "normal",
      "font" : {
        "color" : "#000",
        "family" : "sans-serif",
        "size" : 12
      }
    }
  }
}

Legend Parameter

Description

"x, y"

Setting the Legend Positioning

Description :
Sets the Position of the Legend.

Position the legend inside the graph by assigning x and y values of <= 1.
Position the legend outside of the graph by assigning one of the x and y values to either 100 or -100.
Type :
Number
Example :
{"x" : 0, "y" : 0} -- Bottom Left
{"x" : 1, "y" : 0} -- Bottom Right
{"x" : 1, "y" : 1} -- Top Right
{"x" : 0, "y" : 1} -- Top Left
{"x" : .5, "y" : 0} -- Bottom Center
{"x" : .5, "y" : 1} -- Top Center
{"x" : 100, "y" : 0} -- Outside Right Bottom
{"x" : 100, "y" : 1} -- Outside Right Top
{"x" : 100, "y" : .5} -- Outside Right Middle
{"x" : 0, "y" : -100} -- Under Left
{"x" : 0.5, "y" : -100} -- Under Center
{"x" : 1, "y" : -100} -- Under Right
"font"

Setting the Legend Font

Font Parameter

Description

"family"

Setting the Font Family

Description :
The font family
Type :
string
Accepted Values :
"Arial, sans-serif"
"Courier New, monospace"
"Droid Sans, sans-serif"
"Droid Serif, serif"
"Droid Sans Mono, sans-serif"
"Georgia, serif"
"Gravitas One, cursive"
"Impact, Charcoal, sans-serif"
"Lucida Console, Monaco, monospace"
"Old Standard TT, serif"
"Open Sans, sans-serif"
"PT Sans Narrow, sans-serif"
"Raleway, sans-serif"
"Times New Roman, Times, serif"
"Verdana, sans-serif"
"size"

Setting the Font Size

Description :
The font size
Type :
Number
Example :
12
"color"

Setting the Font Color

Description :
The font color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"bgcolor"

Setting the Legend Background Color

Description :
Sets the Background color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"bordercolor"

Setting the Legend Border Color

Description :
Sets the Border color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"borderwidth"

Setting the Legend Border Width

Description :
The width of the border.
Type :
Number
Example :
2
"traceorder"

Setting the Legend Trace Order

Description :
Sets order of the Traces in the Legend.
Type :
String
Accepted Values :
"normal", "reversed"
"showlegend"

Setting Legend Visibility

Description :
Toggles the Legend Visibility (Defaults to "true" if more than one trace)
Type :
Boolean
Example :
true or false
"annotations"

Adding Annotations

Description :
An array with annotations, formatted as objects. You can have multiple annotation objects in this array.
Type :
array
Example :
"annotations": [{
	"text": "Annotation Text",
	"xref": "x",
	"yref": "y",
	"x": 2,
	"y": 5,
	"ax": 0,
	"ay": -40,
	"showarrow": True,
	"arrowhead": 7
},
...]

Annotation Parameter

Description

"text"

Annotation Text

Description :
Annotation Text
Type :
String
Example Value :
"My Clever Annotation"
"font"

Setting the Annotation Font

Font Parameter

Description

"family"

Setting the Font Family

Description :
The font family
Type :
string
Accepted Values :
"Arial, sans-serif"
"Courier New, monospace"
"Droid Sans, sans-serif"
"Droid Serif, serif"
"Droid Sans Mono, sans-serif"
"Georgia, serif"
"Gravitas One, cursive"
"Impact, Charcoal, sans-serif"
"Lucida Console, Monaco, monospace"
"Old Standard TT, serif"
"Open Sans, sans-serif"
"PT Sans Narrow, sans-serif"
"Raleway, sans-serif"
"Times New Roman, Times, serif"
"Verdana, sans-serif"
"size"

Setting the Font Size

Description :
The font size
Type :
Number
Example :
12
"color"

Setting the Font Color

Description :
The font color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"align"

Setting Alignment of Annotation Text

Description :
Sets the Alignment of the Annotation Text
Type :
String
Accepted Values :
"center", "left", "right"
"x"

Setting the x Value of the Annotation Head

Description :
The x Location of the Annotation
Type :
Number
Example :
2
"y"

Setting the y Value of the Annotation Head

Description :
The y Location of the Annotation
Type :
Number
Example :
8
"xref"

References which x Axis to Annotate

Description :
Select which axis the "x" attribute is referenced to
Type :
String
Example Value :
"xaxis", "xaxis2"
"yref"

References which y Axis to Annotate

Description :
Select which axis the "y" attribute is referenced to
Type :
String
Example Value :
"yaxis", "yaxis2"
"ax"

Setting the x Distance of the Annotation relative to the Arrowhead

Description :
Setting the x Distance of the Annotation relative to the "x" attribute
Type :
Number
Example :
20
"ay"

Setting the y Distance of the Annotation relative to the Arrowhead

Description :
Setting the y Distance of the Annotation relative to the "y" attribute
Type :
Number
Example :
-40
"showarrow"

Sets the Visibility of the Arrowhead

Description :
Sets the visibility of the Annotation Arrow
Type :
Boolean
Accepted Values :
true or false
"arrowcolor"

Setting the Annotation Arrow Color

Description :
Sets the Annotation Arrow Color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"arrowhead"

Setting the Arrowhead Type

"arrowsize"

Setting the Size of the Arrowhead

Description :
The size of the Arrow Head.
Type :
Number
Example :
2
"arrowwidth"

Setting the Width of the Arrowhead

Description :
The width of the Arrow Line.
Type :
Number
Example :
2
"bgcolor"

Setting the Annotation Background Color

Description :
Sets the Background color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"bordercolor"

Setting the Annotation Border Color

Description :
Sets the Border color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"borderpad"

Setting the Annotation Border Pad

Description :
Used to set the padding of the border
Type :
Number
Example :
2
"borderwidth"

Setting the Annotation Border Width

Description :
The width of the border.
Type :
Number
Example :
2
"opacity"

Setting the Annotation's Opacity

Description :
Sets the Opacity
Type :
Number
Accepted Values :
Between : 0:1.0
"width"

Setting Global Plot Width

Description :
The global width of the graph
Type :
Number
Example :
500
"height"

Setting Global Plot Height

Description :
The global height of the graph
Type :
Number
Example :
600
"margin"

Setting Global Plot Margins

Margin Parameter

Description

l

Setting the Left Margin

Description :
Sets the Plot"s Global Left Margin
Type :
Number
Example :
40
r

Setting the Right Margin

Description :
Sets the Plot"s Global Right Margin
Type :
Number
Example :
50
t

Setting the Top Margin

Description :
Sets the Plot"s Global Top Margin
Type :
Number
Example :
20
b

Setting the Bottom Margin

Description :
Sets the Plot"s Global Bottom Margin
Type :
Number
Example :
60
pad

Setting the Margin Padding

Description :
Sets the Plot"s Global Padding
Type :
Number
Example :
25
"autosize"

Plot Autosize Boolean

Description :
Sets whether the graph will autosize to the window it is being displayed in. (Overriding the height and width parameters
Type :
Boolean
Example :
true or false
"paper_bgcolor"

Setting the Global Background Color

Description :
The main background color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"plot_bgcolor"

Setting the Plot Background Color

Description :
The plot background color
Type :
Any HTML Specified Color is accepted.
Examples :
"HEX" - "#FFA00E"
"RGB" - rgb(128,127,132)
"RGBA" - rgba(128,188,102,0.5)
"HSL" - hsl(33,100,40)
"HSLA" - hsla(120,100%,50%,0.3)
"colorname" - 'blue'
"barmode"

Setting the Barchart Mode

Description :
For Barcharts, sets the mode
Type :
String
Accepted Values :
"group", "stack", "overlay"
"bargap"

Setting distance between Bars for Barcharts

Description :
Sets the gap between Bars in a Bar Chart.
Type :
Number
Example :
.25
"bargroupgap"

Setting distance between Bars for Grouped Barcharts

Description :
Sets the gap between Groups of Bars in a Bar Chart.
Type :
Number
Example :
0.5
"boxmode"

Setting the Boxplot Mode

Description :
For Boxplots, sets the mode
Type :
String
Example :
"group" or "overlay"
"boxgap"

Setting distance between Boxes for Boxplots

Description :
Sets the gap between Boxes in a Box Plot.
Type :
Number
Example :
.25
"boxgroupgap"

Setting distance between Boxes for Grouped Boxplots

Description :
Sets the gap between Groups of Boxes in a Box Plot.
Type :
Number
Example :
0.5

Documentation Examples

Search for an example, or explore the links below!

Chart Types

Multiple Axes, Insets and Subplots

Layout

File Settings

Basic Line Plot

Toggle Notes and Options
x0 = [1,2,3,4]; y0 = [10,15,13,17]
x1 = [2,3,4,5]; y1 = [16,5,11,9]
py.plot(x0, y0, x1, y1)
Basic Line Plot

Line with Scatter

Toggle Notes and Options
trace0 = {'x': [1,2,3,4],
  'y': [10,15,13,17],
  'type': 'scatter',
  'mode': 'markers'}

trace1 = {'x': [2,3,4,5],
  'y': [16,5,11,9],
  'type': 'scatter',
  'mode': 'lines'}

trace2 = {'x': [1,2,3,4],
  'y': [12,9,15,12],
  'type': 'scatter',
  'mode': 'lines+markers'}

py.plot([trace0, trace1, trace2])
Line with Scatter

Styling Line and Scatter

Toggle Notes and Options
x1 = [1,2,3]; y1 = [4,5,6]
x2 = [1,2,3]; y2 = [2,10,12]

# plotly's data dictionaries
trace1 = {'x': x1,
    'y': y1,
    "name":"Experiment",
    "type":"scatter",
    "line":{
        "color":"rgb(3,78,123)",
        "width":6,
        "dash":"dot"
    },
    "marker":{
        "opacity":1.0,
        "symbol":"square",
        "size":12,
        "color":"rgb(54,144,192)",
        "line":{
            "width":3,
            "color":"darkblue"
        }
    }
}

trace2 = {"x":x2,
    "y":y2,
    "name":"Control",
    "type":"scatter",
    "line":{
        "color":"purple",
        "width":4,
        "dash":"dashdot"
    },
    "marker":{
        "opacity":0.9,
        "symbol":"cross",
        "size":16,
        "color":"fuchsia",
        "line":{
            "color":"",
            "width":0
        },
    }
}

py.plot([trace1, trace2])
Styling Line and Scatter

Basic Area Plot

Toggle Notes and Options
trace0 = {'x': [1,2,3,4],
  'y': [0, 2, 3, 5],
  'fill': 'tozeroy'} options

trace1 = {'x': [1,2,3,4],
  'y': [3,5,1,7],
  'fill': 'tonexty'}

py.plot([trace0, trace1])
Basic Area Plot

Basic Bar Chart

Toggle Notes and Options
x0 = ['giraffes', 'orangutans', 'monkeys']; note
y0 = [20, 14, 23];
data = {'x': x0, 'y': y0,
	'type': 'bar'} options
py.plot([data])
Basic Bar Chart

Grouped Bar Chart

Toggle Notes and Options
categories = ['giraffes', 'orangutans', 'monkeys'];
SF = {'name': 'SF Zoo',
	'x': categories,
	'y': [20, 14, 23],
	'type': 'bar'}
LA = {'name': 'LA Zoo',
	'x': categories,
	'y': [12,18,29],
	'type': 'bar'}
layout = {
	'barmode': 'group',options
	'xaxis': {'type': 'category'},
	'categories': categories}
py.plot([LA, SF], layout=layout)
Grouped Bar Chart

Stacked Bar Chart

Toggle Notes and Options
[...]	# ... SF and LA data from above
layout = {'barmode': 'stack',   options
	'xaxis': {'type': 'category'},
	'categories': categories}
py.plot([SF, LA], layout=layout)
Stacked Bar Chart

Styling Bar Charts

Toggle Notes and Options
categories=['giraffes', 'orangutans', 'monkeys']
SF = {'name': 'SF Zoo',
  'x': categories,
  'y': [20, 14, 23],
  'type': 'bar',
  'marker':{note
    'color': 'orange', options
    'line': {'color': 'grey',  note
      'width': 3}}
  }

LA = {'name': 'LA Zoo',
  'x': categories,
  'y': [12,18,29],
  'type': 'bar',
  'marker': {'color': 'rgb(111, 168, 220)',
    'line': {'color': 'grey',
      'width': 3}}
  }

layout = {
  'title': 'Animal Population',
  'barmode': 'group',options
  'yaxis': {'name': '# of animals (thousands)'},
  'xaxis': {'type': 'category'},
  'categories': categories,
  'bargap': 0.25,note
  'bargroupgap': 0.3,note
  'bardir': 'v'}options

py.plot([LA, SF], layout=layout)
Styling Bar Charts

Basic Error Bars

Toggle Notes and Options
data = {'x': [0,1,2],
  'y': [6,10,2],
  'error_y': {'type': 'data',options
	'array': [1, 2, 3],
	'visible': True}}
py.plot([data])
Basic Error Bars

Percentage, Constant or Square Root

Toggle Notes and Options
data = {'x': [0,1,2],
  'y': [6,8,4],
  'error_y': {'type': 'percent',options
    'value': 50, note
    'visible': True}}
py.plot([data])
Percentage, Constant or Square Root

Bar Chart with Error Bars

Toggle Notes and Options
categories = ['Trial 1', 'Trial 2', 'Trial 3']
control = {'x': categories,
  'y': [3, 6, 4],
  'type': 'bar',
  'marker':{'color': 'rgb(74, 134, 232)'},
  'error_y': {'type': 'data',
    'array': [1, 0.5, 1.5],
    'visible': True,
	'color': 'rgb(67, 67, 67)'}}
exp = {'x': categories,
  'y': [4, 7, 3],
  'type': 'bar',
  'marker':{'color':'rgb(111, 168, 220)'},
  'error_y': {'type': 'data',options
    'array': [0.5, 1, 2], note
	'visible': True,
	'color': 'rgb(67, 67, 67)'}}
layout = {'barmode': 'group'}

py.plot([control, exp], layout=layout)
Bar Chart with Error Bars

Basic Box Plot

Toggle Notes and Options
box1 = {'y': [0, 1, 2, 4],
  	'type': 'box'}
box2 = {'y': [1,2,4,5,8],
	'type': 'box'}
py.plot([box1, box2])

Basic Box Plot

Box Plot with Jitter

Toggle Notes and Options
from numpy import *
box = {'y': random.randn(50),
  	'type': 'box',
  	'boxpoints': 'all', options
  	'jitter': 0.3,   note
  	'pointpos': -1.8}  note
py.plot([box])

Box Plot with Jitter

Basic Histogram

Toggle Notes and Options
from numpy import *
x = random.randn(500) # normally distributed vector
data = {'x': x,
	'type': 'histogramx'}
py.plot([data])

Basic Histogram

Stacked Histogram

Toggle Notes and Options
from numpy import *
x0 = random.randn(500)
x1 = random.randn(500)+1
data0 = {'x': x0,
	'type': 'histogramx'}
data1 = {'x': x1,
	'type': 'histogramx'}
layout = {'barmode': 'stack'} options
py.plot([data0, data1], layout=layout)

Stacked Histogram

Overlaid Histogram

Toggle Notes and Options
[...] # data0, data1 from the above example
layout = {'barmode': 'overlay'}  options
py.plot([data0, data1], layout=layout)

Overlaid Histogram

Styling Histograms

Toggle Notes and Options
from numpy import *
x0 = random.randn(500)
x1 = random.randn(500)+1
data0 = {'x': x0,
  'type': 'histogramx',
  'name': 'control',
  'marker':{note
    'color': 'fuchsia',options
    'opacity': 0.75,
    'line': {'color': 'grey',note
      'width': 0}},
  'autobinx': False,
  'xbins':{
    'start': -3.2,
    'end': 2.8,
    'size': 0.2},
  'histnorm': 'count'options
}
data1 = {'x': x1,
  'name': 'experiment',
  'type': 'histogramx',
  'marker':{
    'color': 'rgb(255, 217, 102)',
    'opacity': 0.75},
  'autobinx': False,
  'xbins':{
    'start': -1.8,
    'end': 4.2,
    'size': 0.2}}

layout = {'barmode': 'overlay',options
  'bargap': 0.25,note
  'bargroupgap': 0.3,note
  'bardir': 'v',options
  'title': 'Sampled Results',
  'xaxis': {'title': 'Value'},
  'yaxis': {'title': 'Count'}}
py.plot([data0, data1], layout=layout)

Styling Histograms

2D Histogram

Toggle Notes and Options
from numpy import *
x = random.randn(500)
y = random.randn(500)+1
data = {'x': x, 'y': y,
	'type': 'histogram2d'}
py.plot([data])

2D Histogram

2D Histogram Options

Toggle Notes and Options
from numpy import *
x = random.randn(500)
y = random.randn(500)+1
data = {'x': x,
	'y': y,
	'type': 'histogram2d',
	'autobinx': False,
	'xbins': {
		'start': -3,
		'end': 3,
		'size': 0.1
	},
	'autobiny': False,
	'ybins': {
		'start': -2.5,
		'end': 4,
		'size': 0.1
	},
	'scl': [[0,"rgb(12,51,131)"],\
		[0.25,"rgb(10,136,186)"],\
		[0.5,"rgb(242,211,56)"],\
		[0.75,"rgb(242,143,56)"],\
		[1,"rgb(217,30,30)"]],
	'histnorm': 'probability'
}

layout =  {
	'xaxis':{'range':[-2,2]	},
	'yaxis':{'range':[-1,3] },
	'width':520,'height':380,
	'autosize':False
	}

py.plot([data],layout=layout)

2D Histogram Options

Basic Heatmap

Toggle Notes and Options
z = [[1., 20., 30 ],\
     [20., 1., 60 ],\
     [30., 60., 1.]]
data = {'z': z,
	'type': 'heatmap'}
py.plot([data])

Basic Heatmap

Labelled Heatmap

Toggle Notes and Options
x = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
y = ['Morning', 'Afternoon', 'Evening']
z = [[1., 20., 30, 50, 1],\
     [20., 1., 60, 80, 30 ],\
     [30., 60., 1., -10, 20]]
data = {'x': x,
	'y': y,
	'z': z,
	'type': 'heatmap'}
py.plot([data])

Labelled Heatmap

Bar Chart with Line Plot

Toggle Notes and Options
from numpy import *
x0 = linspace(0, 5, 15)
y0 = sin(x0) + random.rand(15)
data0 = {'x': x0,'y': y0,
	'type': 'scatter'}

x1 = [0, 1, 2, 3, 4, 5]
y1 = [1, 0.5, 0.7, -1.2, 0.3, 0.4]
data1 = {'x': x1,'y': y1,
	'type': 'bar'}

py.plot([data0, data1])

Bar Chart with Line Plot

2D Histogram with Scatter Overlay

Toggle Notes and Options
from numpy import *

x0 = random.randn(100)/5. + 0.5
y0 = random.randn(100)/5. + 0.5

x1 = random.rayleigh(size=80)/7. + 0.1
y1 = random.rayleigh(size=80)/8. + 1.1

y = concatenate([y0,y1])
x = concatenate([x0,x1])

data0 = {'x': x0, 'y': y0,
  'marker':{'symbol':'circle'},
  'type': 'scatter', 'mode': 'markers'}
data1 = {'x': x1, 'y': y1,
  'marker':{'symbol':'cross'},
  'type': 'scatter', 'mode': 'markers'}

data_hist = {'x': x, 'y': y,
  'type':'histogram2d'}

py.plot([data0,data1,data_hist])

2D Histogram with Scatter Overlay

Legend Visibility

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,3,6,4,5,2,3,5,4]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,7,8,3,6,3,3,4]

layout = {
  'showlegend': False #Default value when there are more than two traces is 'True'
}

py.plot(x,y,x2,y2,layout=layout)
Legend Visibility

Legend Position Inside

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,3,6,4,5,2,3,5,4]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,7,8,3,6,3,3,4]

# Position the legend inside the graph by assigning x and y values of <= 1.
# e.g :
# {"x" : 0, "y" : 0} -- Bottom Left
# {"x" : 1, "y" : 0} -- Bottom Right
# {"x" : 1, "y" : 1} -- Top Right
# {"x" : 0, "y" : 1} -- Top Left
# {"x" : .5, "y" : 0} -- Bottom Center
# {"x" : .5, "y" : 1} -- Top Center

legendstyle = {"x" : 1, "y" : 1}

# place legend into layout
layout = {
  'showlegend':True,
  'legend': legendstyle
}

py.plot(x,y,x2,y2,layout=layout)
Legend Position Inside

Legend Position Outside

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,3,6,4,5,2,3,5,4]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,7,8,3,6,3,3,4]

# Position the legend outside of the graph by assigning one of the x and y values to either 100 or -100.
# e.g :
# {"x" : 100, "y" : 0} -- Outside Right Bottom
# {"x" : 100, "y" : 1} -- Outside Right Top
# {"x" : 100, "y" : .5} -- Outside Right Middle
# {"x" : 0, "y" : -100} -- Under Left
# {"x" : 0.5, "y" : -100} -- Under Center
# {"x" : 1, "y" : -100} -- Under Right


legendstyle = {"x" : 100, "y" : 1}

# place legend into layout
layout = {
  'showlegend':True,
  'legend': legendstyle
}

py.plot(x,y,x2,y2,layout=layout)
Legend Position Outside

Styling the Legend

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,3,6,4,5,2,3,5,4]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,7,8,3,6,3,3,4]


legendstyle = {
  "x" : 0,
  "y" : 1,
  "bgcolor" : "#E2E2E2",options
  "bordercolor" : "#FFFFFF",options
  "borderwidth" : 2,
  "traceorder" : "normal",options
  "font" : {
    "color" : "#000",options
    "family" : "sans-serif",options
    "size" : 12
    }
}

# place legend into layout
layout = {
  'showlegend':True,note
  'legend': legendstyle
}

py.plot(x,y,x2,y2,layout=layout)
Styling the Legend

Legend Labels

Toggle Notes and Options
trace0  = {
    'x': [0,1,2,3],
    'y': [0,2,4,6],
    'name': 'Blue Trace'
    }

trace1 = {
    'x': [0,1,2,3],
    'y': [8,4,2,0],
    'name': 'Orange Trace'
    }

py.plot(trace0,trace1)
Legend Labels

Basic Text Chart

Toggle Notes and Options
data = [{
    "x": [0,1,2], "y": [1,1,1],
    "name": "Lines, Markers and Text",
    "text": ["Text A", "Text B", "Text C"], note
    "type": "scatter",
    "mode": "lines+markers+text", options
    "textposition": "top"options
  },
  {
    "x": [0,1,2], "y": [2,2,2],
    "name": "Markers and Text",
    "text": ["Text D", "Text E", "Text F"],
    "type": "scatter",
    "mode": "markers+text",
    "textposition": "bottom"
  },
  {
    "x": [0,1,2], "y": [3,3,3],
    "name": "Lines and Text",
    "text": ["Text G", "Text H", "Text I"],
    "type": "scatter",
    "mode": "lines+text",
    "textposition" : "bottom"
  }]

#hide legend
layout = {
'showlegend':False,
}

py.plot(data, layout=layout)
Basic Text Chart

Styling Text Charts

Toggle Notes and Options
data = [{
      "x": [0,1,2], "y": [1,1,1],
      "name": "Lines, Markers and Text",
      "text": ["Text A", "Text B", "Text C"],
      "type": "scatter",
      "mode": "lines+markers+text",
      "textposition": "top right",
      "textfont" : {
        "color": "#1f77b4",options
        "family": "sans serif",options
        "size": 18
      }
    },
    {
      "x": [0,1,2], "y": [2,2,2],
      "name": "Lines and Text",
      "text": ["Text G", "Text H", "Text I"],
      "type": "scatter",
      "mode": "lines+markers+text",
      "textposition" : "bottom",
      "textfont" : {
        "color": "#ff7f0e",options
        "family": "sans serif",options
        "size": 18
      }
    }]

#hide legend
layout = {
  'showlegend':False,
}

py.plot(data, layout=layout)
Styling Text Charts

Axes Booleans

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]

axesstyle = {
      "autotick" : True,
      "showgrid" : False,
      "showline" : False,note
      "showticklabels" : False,
      "zeroline" : False,
      "ticks" : "" options
}

layout = {
    "xaxis" : axesstyle,
    "yaxis" : axesstyle,
    "showlegend" : False
}

py.plot(x,y,x2,y2,layout=layout)
Axes Booleans

Linear and Log Axes

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]


axesstyle = {
    "type" : "log",options
}

layout = {
    "xaxis" : axesstyle,
    "yaxis" : axesstyle,
}


py.plot(x,y,x2,y2,layout=layout)
Linear and Log Axes

Manual Range

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]


axesstyle = {
    "range" : [2,5]options
}

layout = {
    "xaxis" : axesstyle,
    "yaxis" : axesstyle,
}


py.plot(x,y,x2,y2,layout=layout)
Manual Range

Range Mode

Toggle Notes and Options
x = [2,4,6]
y = [-3,0,3]


layout = {
    "showlegend" : False,
    "xaxis" : {
        "rangemode" : "tozero"options
    },
    "yaxis" : {
        "rangemode" : "nonnegative"options
    }
}


py.plot(x,y,layout=layout)
Range Mode

Axes Lines

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]


axesstyle = {
    "showline" : True,note
    "mirror" : "ticks",optionsnote
    "linecolor" : "#636363",options
    "linewidth" : 6,

    "showgrid" : True,note
    "gridcolor" : "#bdbdbd",options
    "gridwidth" : 2,

    "zeroline" : True, note
    "zerolinecolor" : "#969696",options
    "zerolinewidth" : 4
}

layout = {
  "xaxis" : axesstyle,
  "yaxis" : axesstyle,
}


py.plot(x,y,x2,y2,layout=layout)
Axes Lines

Axes Ticks

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]

axesstyle = {
      "autotick" : False,
      "tick0" : 0,note
      "dtick" : .25,note
      "ticks" : "outside",options
      "tickcolor" : "#000",options
      "ticklen" : 8,note
      "tickwidth" : 4
}

layout = {
  "xaxis" : axesstyle,
  "yaxis" : axesstyle,
}

py.plot(x,y,x2,y2,layout=layout)
Axes Ticks

Axes Labels

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]

axesstyle = {
      "title" : "AXIS TITLE",

      "titlefont" : {
        "color" : "lightgrey",options
        "family" : "Arial, sans-serif",options
        "size" : 18
      },
      "showticklabels" : True,
      "tickfont" : {
        "color" : "black",options
        "family" : "Old Standard TT, serif",options
        "size" : 14
      },
      "tickangle" : 45,options
      "showexponent" : "All",options
      "exponentformat" : "e",options
}

layout = {
  "xaxis" : axesstyle,
  "yaxis" : axesstyle,
}

py.plot(x,y,x2,y2,layout=layout)
Axes Labels

Reversed Axes

Toggle Notes and Options
x = [1,2]
y = [1,2]

layout = {
    "xaxis": {
      "autorange": "reversed"
    }
}

py.plot(x,y,layout=layout)
Reversed Axes

Date Axes

Toggle Notes and Options
import datetime
# Plotly understands dates and times in format "YYYY-MM-DD HH:MM:SS" (e.g. "2009-10-04 22:23:00") as well as python datetime objects

x1 = ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00']
x2 = [datetime.datetime(2013,10,04,22,23,00), datetime.datetime(2013,11,04,22,23,00), datetime.datetime(2013,12,04,22,23,00)]
y1 = [1,3,6]
y2 = [6,3,1]
py.plot(x1,y1,x2,y2)
Date Axes

Simple Double Axes

Toggle Notes and Options
data = [
   {
    "x":[1,2,3],
    "y":[40,50,60],
      "name":"yaxis data"
   },
   {
      "x":[2,3,4],
      "y":[4,5,6],
      "yaxis":"y2", # this will reference the yaxis2 object in the layout object
      "name": "yaxis2 data"
   }
];
layout = {
   "yaxis":{
      "title": "yaxis title", # optional
   },
   "yaxis2":{
      "title": "yaxis2 title", # optional
      "titlefont":{
         "color":"rgb(148, 103, 189)"
      },
      "tickfont":{
         "color":"rgb(148, 103, 189)"
      },
      "overlaying":"y",
      "side":"right",
   },
   "title": "Double Y Axis Example",
}
py.plot(data, layout=layout)

Simple Double Axes

Simple Multiple Axes

Toggle Notes and Options
# color variable array
c = ['#1f77b4', # muted blue
                '#ff7f0e', # safety orange
                '#2ca02c', # cooked asparagus green
                '#d62728', # brick red
                '#9467bd', # muted purple
                '#8c564b', # chestnut brown
                '#e377c2', # raspberry yogurt pink
                '#7f7f7f', # middle gray
                '#bcbd22', # curry yellow-green
                '#17becf']; #blue-teal

data = [
    {
    "x":[1,2,3],
    "y":[4,5,6],
    "name":"yaxis1 data"
   },
   {
      "x":[2,3,4],
      "y":[40,50,60],
      "name":"yaxis2 data",
      "yaxis":"y2" # this references the "yaxis2" object in layout
   },
   {
      "x":[3,4,5],
      "y":[400,500,600],
      "name":"yaxis3 data",
      "yaxis":"y3"
    },
    {
    "x":[4,5,6],
    "y":[40000,50000,60000],
    "name":"yaxis4 data",
    "yaxis":"y4"
   },
    {
    "x":[5,6,7],
    "y":[400000,500000,600000],
    "name":"yaxis5 data",
    "yaxis":"y5"
   },
    {
    "x":[6,7,8],
    "y":[4000000,5000000,6000000],
    "name":"yaxis6 data",
    "yaxis":"y6"
   },
]
layout = {
    "width":800,
    "xaxis":{
        "domain":[0.3,0.7]
    },
   "yaxis":{
      "title": "yaxis title",
      "titlefont":{
         "color":c[0]
      },
      "tickfont":{
         "color":c[0]
      },
   },
   "yaxis2":{
      "overlaying":"y",
      "side":"left",
      "anchor":"free",
      "position":0.15,

      "title": "yaxis2 title",
      "titlefont":{
         "color":c[1]
      },
      "tickfont":{
         "color":c[1]
      },
   },
   "yaxis3":{
      "overlaying":"y",
      "side":"left",
      "anchor":"free",
      "position":0,

      "title": "yaxis3 title",
      "titlefont":{
         "color":c[2]
      },
      "tickfont":{
         "color":c[2]
      },
   },

   "yaxis4":{
      "overlaying":"y",
      "side":"right",
      "anchor":"x",

      "title": "yaxis4 title",
      "titlefont":{
         "color":c[3]
      },
      "tickfont":{
         "color":c[3]
      },
   },

   "yaxis5":{
      "overlaying":"y",
      "side":"right",
      "anchor":"free",
      "position":0.85,

      "title": "yaxis5 title",
      "titlefont":{
         "color":c[4]
      },
      "tickfont":{
         "color":c[4]
      },
   },

   "yaxis6":{
      "overlaying":"y",
      "side":"right",
      "anchor":"free",
      "position":1.0,

      "title": "yaxis6 title",
      "titlefont":{
         "color":c[5]
      },
      "tickfont":{
         "color":c[5]
      },
    },
    "title": "multiple y-axes example"
}
py.plot(data, layout=layout)
Simple Multiple Axes

Simple Subplot

Toggle Notes and Options
data = [
    {
    "x":[1,2,3],
    "y":[4,5,6],
   },
   {
      "x":[20,30,40],
      "y":[50,60,70],
      "xaxis":"x2",
      "yaxis":"y2"
   }
]

layout = {
    "xaxis":{
        "domain":[0,0.45] # i.e. let the first x-axis span the first 45% of the plot width
    },
    "xaxis2":{
        "domain":[0.55,1] # i.e. let the second x-axis span the latter 45% of the plot width
    },
    "yaxis2":{
        "anchor":"x2" # i.e. bind the second y-axis to the start of the second x-axis
    }
}
py.plot(data, layout=layout)
Simple Subplot

Custom Sized Subplot

Toggle Notes and Options
data = [
    {
    "x":[1,2,3],
    "y":[4,5,6],
   },
   {
      "x":[20,30,40],
      "y":[50,60,70],
      "xaxis":"x2",
      "yaxis":"y2"
   }
]

layout = {
    "xaxis":{
        "domain":[0,0.7] # i.e. let the first x-axis span the first 70% of the plot width
    },
    "xaxis2":{
        "domain":[0.8,1] # i.e. let the second x-axis span the latter 20% of the plot width
    },
    "yaxis2":{
        "anchor":"x2" # i.e. bind the second y-axis to the start of the second x-axis
    }
}
py.plot(data, layout=layout)
Custom Sized Subplot

Multiple Subplots

Toggle Notes and Options
data = [
    {
    "x":[1,2,3],
    "y":[4,5,6],
   },
   {
      "x":[20,30,40],
      "y":[50,60,70],
      "xaxis":"x2",
      "yaxis":"y2"
   },
   {
      "x":[300,400,500],
      "y":[600,700,800],
      "xaxis":"x3",
      "yaxis":"y3"
   },
   {
      "x":[4000,5000,6000],
      "y":[7000,8000,9000],
      "xaxis":"x4",
      "yaxis":"y4"
   }
]

layout = {
    "xaxis":{
        "domain":[0,0.45] # let the first x-axis span the first 45% of the plot width
    },
    "yaxis":{
        "domain":[0,0.45] # # and let the first y-axis span the first 45% of the plot height
    },
    "xaxis2":{
        "domain":[0.55,1] # and let the second x-axis span the latter 45% of the plot width
    },
    "yaxis2":{
        "domain":[0,0.45], # and let the second y-axis span the first 45% of the plot height
        "anchor":"x2" # bind the horizontal position of the second y-axis to the start of the second x-axis
    },
    "xaxis3":{
        "domain":[0,0.45],
        "anchor":"y3" # bind the vertical position of this axis to the start of yaxis3
    },
    "yaxis3":{
        "domain":[0.55,1],
    },
    "xaxis4":{
        "domain":[0.55,1],
        "anchor":"y4", # bind the vertical position of this axis to the start of yaxis4
    },
    "yaxis4":{
        "domain":[0.55,1],
        "anchor":"x4" # bind the horizontal position of this axis to the start of xaxis4
    }
}
py.plot(data, layout=layout)
Multiple Subplots

Subplots with Shared Axes

Toggle Notes and Options
data = [
    {
    "x":[1,2,3],
    "y":[2,3,4],
   },
   {
      "x":[20,30,40],
      "y":[5,5,5],
      "xaxis":"x2",
      "yaxis":"y"
   },
   {
      "x":[2,3,4],
      "y":[600,700,800],
      "xaxis":"x",
      "yaxis":"y3"
   },
   {
      "x":[4000,5000,6000],
      "y":[7000,8000,9000],
      "xaxis":"x4",
      "yaxis":"y4"
   }
]

layout = {
    "xaxis":{
        "domain":[0,0.45] # let the first x-axis span the first 45% of the plot width
    },
    "yaxis":{
        "domain":[0,0.45] # and let the first y-axis span the first 45% of the plot height
    },
    "xaxis2":{
        "domain":[0.55,1] # and let the second x-axis span the latter 45% of the plot width
    },
    "yaxis3":{
        "domain":[0.55,1],
    },
    "xaxis4":{
        "domain":[0.55,1],
        "anchor":"y4", # bind the vertical position of this axis to the start of yaxis4
    },
    "yaxis4":{
        "domain":[0.55,1],
        "anchor":"x4" # bind the horizontal position of this axis to the start of xaxis4
    }
}
py.plot(data, layout=layout)
Subplots with Shared Axes

Stacked Subplots

Toggle Notes and Options
data = [{'x': [0,1,2], 'y': [10,11,12]},
        {'x': [2,3,4], 'y': [100,110,120], 'yaxis': 'y2', 'xaxis': 'x2'},
        {'x': [3,4,5], 'y': [1000,1100,1200], 'yaxis': 'y3', 'xaxis': 'x3'}]
layout={
    'yaxis': {'domain': [0,0.8/3.]},
    'yaxis2': {'domain':[0.8/3+0.1,2*0.8/3+0.1]},
    'yaxis3': {'domain':[2*0.8/3+0.2,1]},
    'xaxis2': {'anchor':'y2'},
    'xaxis3': {'anchor':'y3'},
    'legend': {'traceorder': 'reversed'}
}

py.plot(data,layout=layout)
Stacked Subplots

Stacked Subplots with Coupled X-Axis

Toggle Notes and Options
data = [{'x': [0,1,2], 'y': [10,11,12]},
        {'x': [2,3,4], 'y': [100,110,120], 'yaxis': 'y2'},
        {'x': [3,4,5], 'y': [1000,1100,1200], 'yaxis': 'y3'}]
layout={
    'yaxis': {'domain': [0,1./3.]},
    'yaxis2': {'domain':[1./3,2./3.]},
    'yaxis3': {'domain':[2./3.,1]},
    'legend': {'traceorder': 'reversed'}
}

py.plot(data,layout=layout)
Stacked Subplots with Coupled X-Axis

Simple Inset

Toggle Notes and Options
data = [
    {
    "x":[1,2,3],
    "y":[4,3,2],
   },
   {
      "x":[20,30,40],
      "y":[30,40,50],
      "xaxis":"x2",
      "yaxis":"y2"
   }
]
layout = {
    "xaxis2": {
        "domain": [0.6, 0.95],
        "anchor": "y2"
    },
    "yaxis2":{
        "domain": [0.6, 0.95],
        "anchor": "x2"
    }
}
py.plot(data, layout=layout)
Simple Inset

Plot and Margin Size

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,2,3,4,5,6,7,8]

layout = {
          'autosize': False,
          'height': 500,
          'width': 500,
          'margin': {
                    't':100,
                    'b':100,
                    'r':50,
                    'l':50,
                    'pad':4},  # space between border and gridlines
          "plot_bgcolor": "#c7c7c7",
          "paper_bgcolor": "#7f7f7f"
}

py.plot(x,y,layout=layout)
Plot and Margin Size

Global Font

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,2,3,4,5,6,7,8]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [1,0,3,2,5,4,7,6,8]

layout = {"title": "Global Font",
          "font": {"color": "#7f7f7f",
                   "family": "Courier New, monospace",
                   "size": 18}
}



py.plot(x,y,x2,y2,layout=layout)
Global Font

Titles, Axes Names and Trace Names

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,2,3,4,5,6,7,8]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [1,0,3,2,5,4,7,6,8]

data = [{'x': x,
         'y': y,
         'name':'Name of Trace 1'
         },
        {'x': x2,
         'y': y2,
         'name':'Name of Trace 2'
         }
        ]

layout = {

"title": "Plot Title",
          "xaxis": {
              "title":"x Axis",
              "titlefont": {
                  "color":"#7f7f7f",
                  "family":"Courier New, monospace",
                  "size":18
              }
          },
          "yaxis": {
              "title":"y Axis",
              "titlefont": {
                  "color":"#7f7f7f",
                  "family":"Courier New, monospace",
                  "size":18
              }
          }
}

py.plot(data,layout=layout)
Titles, Axes Names and Trace Names

Simple Annotation

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,3,2,4,3,4,6,5]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,5,1,2,2,3,4,2]


layout = {
    "showlegend": False,
    "annotations": [{
        "text": "Annotation Text",
        "xref": "x",
        "yref": "y",
        "x": 2,
        "y": 5,
        "ax": 0,
        "ay": -40,
        "showarrow": True,
        "arrowhead": 7
    }]
}

py.plot(x,y,x2,y2,layout=layout)
Simple Annotation

Multiple Annotations

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,3,2,4,3,4,6,5]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,5,1,2,2,3,4,2]


layout = {
    "showlegend": False,
    "annotations": [{
        "text": "Annotation Text",
        "xref": "x",
        "yref": "y",
        "x": 2,
        "y": 5,
        "ax": 0,
        "ay": -40,
        "showarrow": True,
        "arrowhead": 7
    },
    {
        "text": "Annotation Text 2",
        "xref": "x",
        "yref": "y",
        "x": 4,
        "y": 4,
        "ax": 0,
        "ay": -40,
        "showarrow": True,
        "arrowhead": 7
    }]
}

py.plot(x,y,x2,y2,layout=layout)
Multiple Annotations

Styling Annotations

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,3,2,4,3,4,6,5]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,5,1,2,2,3,4,2]


layout = {
    "showlegend": False,
    "annotations": [{
        "text": "max=5",
        "xref": "x",
        "yref": "y",
        "x": 2,
        "y": 5,
        "ax": 20,
        "ay": -30,
        "arrowhead": 2,
        "arrowsize": 1,
        "arrowwidth": 2,
        "arrowcolor": "#636363",
        "bgcolor": "#ff7f0e",
        "bordercolor": "#c7c7c7",
        "borderpad": 4,
        "borderwidth": 2,
        "font": {
            "color": "#ffffff",
            "family": "Courier New, monospace",
            "size": 16
        },
        "opacity": 0.8,
        "showarrow": True,
        "align": "center"
    }]
}

py.plot(x,y,x2,y2,layout=layout)
Styling Annotations

Simple Bubblechart

Toggle Notes and Options
data = [
    {'x': [1,2,3,4],
     'y': [10,11,12,13],
     'marker':{
        'size': [12, 22, 32, 42], # diameter
        'color': ['hsl(0,100,40)', 'hsl(33,100,40)', 'hsl(66,100,40)', 'hsl(99,100,40)'],
        'opacity':[.60, .70, .80, .90],
     },
     'mode': 'markers'
     },
     {'x': [1,2,3,4],
     'y': [11,12,13,14],
     'marker':{
        'color': 'rgb(31, 119, 180)',
        'size': 18,
        'symbol': ['circle', 'square', 'diamond', 'cross']
     },
     'mode': 'markers'
     },
     {'x': [1,2,3,4],
     'y': [12,13,14,15],
     'marker':{
        'size': 18,
        'line':{
            'color': ['rgb(120,120,120)', 'rgb(120,120,120)', 'red', 'rgb(120,120,120)'],
            'width': [2, 2, 6, 2]
        }
     },
     'mode': 'markers'
     }
]

py.plot(data, layout={'showlegend':False})
Simple Bubblechart

Private Graph

Toggle Notes and Options
x = [0,2,4]
y = [0,4,2]

py.plot(x,y, world_readable=False) #defaults to True

# These settings apply to IPython notebooks, too.
# Private files will be viewable only to the creator
# and the private sharees in the notebooks.
# You must be signed in to Plotly and have cookies
# enabled to access.
Private Graph

Public Graph

Toggle Notes and Options
x = [0,2,4]
y = [0,4,2]

py.plot(x,y, world_readable=True)
Public Graph

File Naming

Toggle Notes and Options
x = [0,2,4]
y = [0,4,2]

py.plot(x,y, filename='myplotlygraph')
#or
py.plot(x,y, filename='myfolder/myplotlygraph')
File Naming

Data Visibility

Toggle Notes and Options
trace0  = {
    'x': [0,1,2,3],
    'y': [0,2,4,6],
    'visible': True
    }

trace1 = {
    'x': [0,1,2,3],
    'y': [8,4,2,0],
    'visible': False
    }

py.plot(trace0,trace1)
Data Visibility

New Graph

py.plot([1,2], [3,4], filename='new plot', fileopt='new')

API RESPONSE:

{u'error': u'',
u'filename': u'new plot',
u'message': u'',
u'url': u'https://plot.ly/~IPython.Demo/497',
u'warning': u''}
py.plot([1,2], [3,4], filename='new plot', fileopt='new')
Check out the filename and url in the responses. We specified the same filename in both calls, but since we used the fileopt 'new', our second call appended '(1)' to the filename and created a new unique url for that graph. The first graph was not overwritten.

API RESPONSE:

{u'error': u'',
u'filename': u'new plot (1)',
u'message': u'',
u'url': u'https://plot.ly/~IPython.Demo/498',
u'warning': u''}

Overwrite

The overwrite option will save the plot with the specified filename no matter what. If a plot already exists under the same name, it will overwrite it and create a revision. If the plot with that filename doesn't exist, it will create it!
py.plot([1,2], [3,4], filename='same plot', fileopt='overwrite')

API RESPONSE:

{u'error': u'',
u'filename': u'same plot',
u'message': u'',
u'url': u'https://plot.ly/~IPython.Demo/494',
u'warning': u''}
py.plot([10,20], [30,40], filename='same plot', fileopt='overwrite')

API RESPONSE:

{u'error': u'',
u'filename': u'same plot',
u'message': u'',
u'url': u'https://plot.ly/~IPython.Demo/494',
u'warning': u''}

Append

The "append" fileopt will append the data that you supplied as new traces. If the filename doesn't exist, it will create a new file with that data.
py.plot([1, 2], [1, 2], filename='append plot', fileopt='append')
Here we're starting with one trace.
py.plot([1, 2], [3, 4], filename='append plot', fileopt='append')
Here we are appending a new trace with points (1,3) and (2,4).
py.plot([1, 2], [4, 5], [1, 2], [5, 6], filename='append plot', fileopt='append')
Here we are appending two new traces at points (1,4), (2,5) and (1,5), (2,6).

Extend

The "extend" fileopt will extend existing traces with your new data.
py.plot([1,2], [1, 2], [1, 2], [2, 3], [1, 2], [3, 4], filename='extend plot', fileopt='extend')
If there is no data in the plot, 'extend' will create new traces.
p.plot([3,4], [2, 1], [3, 4], [3, 2], [3, 4], [4, 3], filename='extend plot', fileopt='extend')
If there is data in the plot, the existing traces will be extended with the data in the order that it is supplied.
py.plot([4,5], [2, 3], filename='extend plot', fileopt='extend', traces=[1])
You can also choose which trace to extend with the "traces" argument. Here we extend the second trace. (traces=[1])
py.plot([5,6], [3,3], [4, 5], [1, 1], filename='extend plot', fileopt='extend', traces=[2, 0])
The traces option accepts an array as an argument. Here we extend the 3rd trace in the plot with the first data set that we supply, and the 1st trace in the plot with the second data set.

Setting Style

A simple example:
py.style([{'type':'bar'}, {'type':'scatter','marker':{'symbol':'square', 'color':'marker'}}])
This sets the first data trace to a bar chart and the second data trace to a scatter plot with purple square scatter points.

The general syntax is
py.style(style1[,style2,...], **kwargs)
stylei is a Plotly formatted dictionary that customizes the style of the i'th trace. It is identical to the datai dictionaries used in py.plot except that it doesn't contain the keys x or y.

**kwargs represents optional arguments. Accepted arguments are:
filename: filename of the plot inside your plotly account. If not specified, then the style is applied to the last plot that was made in your API session.
traces: a list that specifies which traces to style. If not specified, then traces are styled in the order of the data dicts or, if supplied, applied to the trace specified by the datai['name'] value.

Setting Layout

A simple example:
py.layout({'title':'Hello World'})
This sets your plot's title to Hello World.
The general syntax is
py.layout(layout, **kwargs)
layout is a Plotly formatted layout dictionary that customizes the style of the layout, the axes, and the legend.

**kwargs represents optional arguments. Accepted arguments are:
filename: filename of the plot inside your plotly account. If not specified, then the style is applied to the last plot that was made in your API session.

File Sharing

x = [0,2,4]
y = [0,4,2]

py.plot(x,y, filename='lab_results/experiment1')

When you share a folder in the Plotly tool, files created within that folder using the API are automatically shared.

In this case user demos has shared the folder lab_results with batman and robin.

When demos saves a file (experiment1 inside lab_results, batman

IFrames

Formal Syntax

A simple example:
py.plot([0,1],[10,11])
or in an alternate syntax
py.plot([{'x':[0,1],'y':[10,11]}])
The general plotting syntax is
py.plot(x1, y1[,x2,y2,...], **kwargs)
or
py.plot([data1[,data2,...]], **kwargs)
xi, yi are lists or numpy arrays with numbers or characters as elements.

datai is a Plotly formatted data dictionary that is at least {'x': xi, 'y': xi} but can contain more styling and chart-type data. For example,
data1={'x':[0,1],'y':[10,11],'name':'Exp Results', 'type':'scatter', 'marker':{'symbol':'square','color':'purple'}}
specifies a scatter trace with purple square data markers that is named Exp Results.

**kwargs represents optional arguments. Accepted arguments are:
filename: filename of the plot inside your plotly account
fileopt: file-options: 'new', 'overwrite', or 'append'
layout: a Plotly formatted layout dict describing layout options.
style: a Plotly formatted style dict describing the style of all the data traces.
world_readable: a boolean. If True, then the graph will be public. If False, then only you can see it. Default is True.

Basic Line Plot

Toggle Notes and Options
x0 = [1,2,3,4]; y0 = [10,15,13,17];
x1 = [2,3,4,5]; y1 = [16,5,11,9];
response = plotly(x0, y0, x1, y1)
url = response.url
filename = response.filename
Basic Line Plot

Line with Scatter

Toggle Notes and Options
trace0 = struct('x', [1,2,3,4], ...
  'y', [10,15,13,17], ...
  'type', 'scatter', ...
  'mode', 'markers');

trace1 = struct('x', [2,3,4,5], ...
  'y', [16,5,11,9], ...
  'type', 'scatter', ...
  'mode', 'lines');

trace2 = struct('x', [1,2,3,4], ...
  'y', [12,9,15,12], ...
  'type', 'scatter', ...
  'mode', 'lines+markers');

response = plotly({trace0, trace1, trace2});
url = response.url
filename = response.filename
Line with Scatter

Styling Line and Scatter

Toggle Notes and Options
%% generate some data
x1 = [1, 2, 3]; y1 = [2, 10, 12];
x2 = [1, 2, 3]; y2 = [4, 5, 6];

% specify the style of each trace
data1 = struct(...note
  'x', x1, ...
  'y', y1, ...
  'type', 'scatter', ...options
  'name', 'Experiment', ...
  'line', struct('color','rgb(3,78,123)',... options
        'width',6, ...
    'dash','dot'), ...options
  'marker', struct('opacity', 1.0, ...
    'symbol','square', ...  options
    'size',12, ...
    'color', 'rgb(54,144,192)', ...
    'line', struct('width',3, ... note
      'color','lightblue') ...
    ) ...
  );

data2 = struct( ...
  'x', x2, ...
  'y', y2, ...
  'name', 'Control', ...
  'line', struct('color', 'purple', ...
    'width', 4, ...
    'dash', 'dashdot'), ...
  'marker', struct('opacity', 0.9, ...
    'symbol', 'cross', ...
    'size', 16, ...
    'color', 'fuchsia', ...
    'line', struct( 'width', 0, ...
      'color','') ...
    ) ...
  );

response = plotly({data1, data2})
url = response.url
filename = response.filename

Styling Line and Scatter

Basic Area Plot

Toggle Notes and Options
trace0 = struct('x', [1,2,3,4], ...
  'y', [0,2,3,5], ...
  'fill', 'tozeroy'); options

trace1 = struct('x', [1,2,3,4], ...
  'y', [3,5,1,7], ...
  'fill', 'tonexty');

response = plotly({trace0, trace1});
url = response.url
filename = response.filename

Basic Area Plot

Basic Bar Chart

Toggle Notes and Options
% x can be an array of numbers or a cell array of chars
x = { {'giraffes', 'orangutans', 'monkeys'} }; note
y = [20, 14, 23];

data = struct('x', x, 'y', y, ...
  'type', 'bar');options
response = plotly({data});
url = response.url

Basic Bar Chart

Grouped Bar Chart

Toggle Notes and Options
categories = { {'giraffes', 'orangutans', 'monkeys'} };  note
SF = struct('name', 'SF Zoo', ...
  'x', categories, ...
  'y', [20, 14, 23], ...
  'type', 'bar');
LA = struct('name', 'LA Zoo', ...
  'x', categories, ...
  'y', [12,18,29], ...
  'type', 'bar');
layout = struct(...
  'barmode', 'group', ...
  'xaxis', struct('type', 'category'), ...
  'categories', categories);
response = plotly({LA, SF}, struct('layout',layout))
url = response.url
filename = response.filename% options

Grouped Bar Chart

Stacked Bar Chart

Toggle Notes and Options
[...]	% ... SF and LA data from above
layout = struct('barmode', 'stack',...%   options

	'xaxis', struct('type', 'category'),...
	'categories', categories)
response = plotly({SF, LA}, struct('layout',layout))

url = response.url
filename = response.filename

Stacked Bar Chart

Styling Bar Charts

Toggle Notes and Options
categories={ {'giraffes', 'orangutans', 'monkeys'} }; %note
SF = struct('name', 'SF Zoo', ...
  'x', categories, ...
  'y', [20, 14, 23], ...
  'type', 'bar', ...
  'marker', struct(... %note
    'color', 'orange',... %options
    'line', struct('color', 'grey',... %note
      'width', 3)));

LA = struct('name', 'LA Zoo', ...
  'x', categories, ...
  'y', [12,18,29], ...
  'type', 'bar', ...
  'marker', struct('color', 'rgb(111, 168, 220)', ...
    'line', struct('color', 'grey', ...
      'width', 3)));

layout = struct(...
  'title', 'Animal Population', ...
  'barmode', 'group', ... %options
  'yaxis', struct('name', '# of animals (thousands)'), ...
  'xaxis', struct('type', 'category'), ...
  'categories', categories, ...
  'bargap', 0.25, ... %note
  'bargroupgap', 0.3, ... %note
  'bardir', 'v') %options

response = plotly({LA, SF}, struct('layout',layout))
url = response.url
filename = response.filename

Styling Bar Charts

Basic Error Bars

Toggle Notes and Options
data = struct('x', [0, 1, 2], ...
  'y', [6, 10, 2], ...
  'error_y', struct('type', 'data', ... options
    'array', [1,2,3], ...
    'visible', true));
response = plotly({data});
url = response.url
filename = response.filename

Basic Error Bars

Percentage, Constant or Square Root

Toggle Notes and Options
data = struct('x', [0, 1, 2], ...
  'y', [6, 8, 4], ...
  'error_y', struct('type', 'percent', ... options
    'value', 50, ... note
    'visible', true));
response = plotly({data});
url = response.url
filename = response.filename

Percentage, Constant or Square Root

Bar Chart with Error Bars

Toggle Notes and Options
categories = { {'Trial 1', 'Trial 2', 'Trial 3'} };note
control = struct('x', categories, ...
  'y', [3, 6, 4], ...
  'error_y', struct('type', 'data', ... options
 	'array', [1, 0.5, 1.5], ... note
	'visible', true), ...
  'name', 'Control', ...
  'type', 'bar');

exp = struct('x', categories, ...
  'y', [4, 7, 3], ...
  'error_y', struct('type', 'data', ...
    'array', [0.5, 1, 2], ...
	'visible', true), ...
  'name', 'Experiment', ...
  'type', 'bar');

layout = struct('barmode', 'group');

response = plotly({control, exp}, struct('layout', layout));
url = response.url
filename = response.filename

Bar Chart with Error Bars

Basic Box Plot

Toggle Notes and Options
box1 = struct('y', [0,1,2,4], ...
	'type', 'box');
box2 = struct('y', [1,2,4,5,8], ...
	'type', 'box');
response = plotly({box1, box2});
url = response.url
filename = response.filename

Basic Box Plot

Box Plot with Jitter

Toggle Notes and Options
box = struct('y', randn(50,1), ...
	'type', 'box', ...
	'boxpoints', 'all', ...  options
	'jitter', 0.3, ...  	note
	'pointpos', -1.8);	 note
response = plotly({box});
url = response.url
filename = response.filename

Box Plot with Jitter

Basic Histogram

Toggle Notes and Options
x = randn(500, 1); % normally distributed vector
data = struct('x', x, ...
	'type', 'histogramx');
response = plotly({data});
url = response.url
filename = response.filename

Basic Histogram

Stacked Histogram

Toggle Notes and Options
x0 = randn(500, 1);
x1 = randn(500, 1)+1;
data0 = struct('x', x0, ...
	'type', 'histogramx');
data1 = struct('x', x1, ...
	'type', 'histogramx');
layout = struct('barmode', 'stack')	 options

response = plotly({data0, data1}, struct('layout',layout))
url = response.url
filename = response.filename

Stacked Histogram

Overlaid Histogram

Toggle Notes and Options
[...] % data0, data1 from the above example
layout = struct('barmode', 'overlay')  options
response = plotly({data0, data1}, struct('layout',layout))
url = response.url
filename = response.filename

Overlaid Histogram

Styling Histograms

Toggle Notes and Options
x0 = randn(500, 1);
x1 = randn(500, 1)+1;
data0 = struct('x', x0, ...
  'type', 'histogramx', ...
  'name', 'control', ...
  'marker',struct( ... % note
    'color', 'rgba(255, 0, 255,0.75)', ... % options
    'opacity', 0.75, ...
    'line', struct('color', 'grey', ...note
      'width', 0)), ...
  'autobinx', false, ...
  'xbins',struct( ...
    'start', -3.2, ...
    'end', 2.8, ...
    'size', 0.2), ...
  'histnorm', 'count'); % options
data1 = struct('x', x1, ...
  'name', 'experiment', ...
  'type', 'histogramx', ...
  'marker',struct( ...
    'color', 'rgba(255, 217, 102, 0.75)',...
    'opacity', 0.75), ...
  'autobinx', false, ...
  'xbins',struct( ...
    'start', -1.8, ...
    'end', 4.2, ...
    'size', 0.2));

layout = struct('barmode', 'overlay', ...% options
  'bargap', 0.25, ...% note
  'bargroupgap', 0.3, ...% note
  'bardir', 'v', ...% options
  'title', 'Sampled Results', ...
  'xaxis', struct('title', 'Value'), ...
  'yaxis', struct('title', 'Count'));
response = plotly({data0, data1}, struct('layout',layout))
url = response.url
filename = response.filename

Styling Histograms

2D Histogram

Toggle Notes and Options
x = randn(500, 1);
y = randn(500, 1)+1;
data = struct('x', x, 'y', y, ...
	'type', 'histogram2d')
response = plotly({data})
url = response.url
filename = response.filename

2D Histogram

2D Histogram Options

Toggle Notes and Options
x = randn(500, 1);
y = randn(500, 1)+1;
data = struct('x', x, 'y', y, ...
  'type', 'histogram2d', ...
  'autobinx', false, ...
  'xbins', struct( ...
    'start', -3, ...
    'end', 3, ...
    'size', 0.1), ...
  'autobiny', false, ...
  'ybins', struct( ...
    'start', -2.5, ...
    'end', 4, ...
    'size', 0.1), ...
  'zauto', false, ...
  'zmin', 0, ...
  'zmax', 0.4, ...
  'histnorm', 'probability');options
response = plotly({data})
url = response.url
filename = response.filename

2D Histogram Options

Basic Heatmap

Toggle Notes and Options
% z is a matrix
z = [1  20 30;
     20 1  60;
     30 60 1  ];
data = struct('z', z, ...
	    'type', 'heatmap')

% plot
response = plotly({data});
url = response.url;
filename = response.filename;

Basic Heatmap

Labelled Heatmap

Toggle Notes and Options
x = { {'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'} };
y = { {'Morning', 'Afternoon', 'Evening'} };
z = [1. 20. 30 50 1;
     20. 1. 60 80 30;
     30. 60. 1. -10 20];
data = struct(
  'x', x, ...
  'y', y, ...
  'z', z, ...
  'type', 'heatmap')

response = plotly({data});
url = response.url;
filename = response.filename;

Labelled Heatmap

Bar Chart with Line Plot

Toggle Notes and Options
x0 = linspace(0, 5, 15);
y0 = sin(x0) + rand(1,15);
data0 = struct('x', x0, 'y', y0, ...
	'type', 'scatter')

x1 = [0, 1, 2, 3, 4, 5];
y1 = [1, 0.5, 0.7, -1.2, 0.3, 0.4];
data1 = struct('x', x1,'y', y1, ...
	'type', 'bar');

response = plotly({data0, data1})
url = response.url
filename = response.filename

Bar Chart with Line Plot

2D Histogram with Scatter Overlay

Toggle Notes and Options
x0 = randn(100,1)./5. + 0.5;
y0 = randn(100,1)./5. + 0.5;

x1 = randn(80,1)/7. + 0.1;
y1 = randn(80,1)/8. + 1.1;

x = [x0;x1];
y = [y0;y1];

data0 = struct('x', x0, ...
  'y', y0, ...
  'marker',
  	struct('symbol','circle'), ...
  'type', 'scatter', ...
  'mode', 'markers');
data1 = struct('x', x1, ...
  'y', y1,  ...
  'marker', ...
  	struct('symbol', 'cross'), ...
  'type', 'scatter', ...
  'mode', 'markers');

data_hist = struct('x', x, ...
  'y', y, ...
  'type','histogram2d')

response = plotly({data0,data1,data_hist})

2D Histogram with Scatter Overlay

Legend Visibility

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,3,6,4,5,2,3,5,4]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,7,8,3,6,3,3,4]

plotly(x,y,x2,y2);

% By default, when there are more than two traces,
% 'showlegend' is set to true.

layout = struct(...
  'showlegend', false ...
  )

response = plotlylayout(layout);
url = response.url
filename = response.filename
Legend Visibility

Legend Position Inside

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,3,6,4,5,2,3,5,4]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,7,8,3,6,3,3,4]

plotly(x,y,x2,y2);

% Position the legend inside the graph by assigning x and y values of <= 1.
% e.g :
% {'x' , 0, 'y' , 0} -- Bottom Left
% {'x' , 1, 'y' , 0} -- Bottom Right
% {'x' , 1, 'y' , 1} -- Top Right
% {'x' , 0, 'y' , 1} -- Top Left
% {'x' , .5, 'y' , 0} -- Bottom Center
% {'x' , .5, 'y' , 1} -- Top Center

legendstyle = struct('x' , 1, 'y' , 1);

% set the legend style
layout.legend = legendstyle;
response = plotlylayout(layout);
url = response.url
filename = response.filename

Legend Position Inside

Legend Position Outside

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8];
y = [0,3,6,4,5,2,3,5,4];
x2 = [0,1,2,3,4,5,6,7,8];
y2 = [0,4,7,8,3,6,3,3,4];

plotly(x,y,x2,y2);

% Position the legend outside of the graph by assigning one of the x and y values to either 100 or -100.
% e.g :
% {'x' , 100, 'y' , 0} -- Outside Right Bottom
% {'x' , 100, 'y' , 1} -- Outside Right Top
% {'x' , 100, 'y' , .5} -- Outside Right Middle
% {'x' , 0 , 'y' , -100} -- Under Left
% {'x' , 0.5, 'y' , -100} -- Under Center
% {'x' , 1, 'y' , -100} -- Under Right

legendstyle = struct('x' , 100, 'y' , 1);

% set the legend style
layout.legend = legendstyle;
response = plotlylayout(layout);
url = response.url
filename = response.filename

Legend Position Outside

Styling the Legend

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8];
y = [0,3,6,4,5,2,3,5,4];
x2 = [0,1,2,3,4,5,6,7,8];
y2 = [0,4,7,8,3,6,3,3,4];

plotly(x,y,x2,y2)

legendstyle = struct( ...
  'x' , 0, ...
  'y' , 1, ...
  'bgcolor' , '#E2E2E2', ... options
  'bordercolor' , '#FFFFFF', ...options
  'borderwidth' , 2, ...
  'traceorder' , 'normal', ...options
  'font' , struct( ...
    'color' , '#000', ...options
    'family' , 'sans-serif', ...options
    'size' , 12));...

% set the legend style
layout.legend = legendstyle;
response = plotlylayout(layout);
url = response.url
filename = response.filename

Styling the Legend

Legend Labels

Toggle Notes and Options
trace0  = struct( ...
    'x', [0,1,2,3], ...
    'y', [0,2,4,6], ...
    'name', 'Blue Trace' ...
    ), ...

trace1 = struct( ...
    'x', [0,1,2,3], ...
    'y', [8,4,2,0], ...
    'name', 'Orange Trace' ...
    ) ...

response = plotly({trace0, trace1});
url = response.url
filename = response.filename

Legend Labels

Basic Text Chart

Toggle Notes and Options
trace1 = struct(...
      'x', [0,1,2], 'y', [1,1,1], ...
      'name', 'Lines, Markers and Text', ...
      'text', { {'Text A', 'Text B', 'Text C'} }, ...
      'type', 'scatter', ...
      'mode', 'lines+markers+text', ...
      'textposition', 'top' ...
      );

trace2 = struct(...
      'x', [0,1,2], 'y', [2,2,2],...
      'name', 'Markers and Text',...
      'text', { {'Text D', 'Text E', 'Text F'} },...
      'type', 'scatter',...
      'mode', 'markers+text',...
      'textposition', 'bottom'...
      );
trace3 = struct(...
      'x', [0,1,2], 'y', [3,3,3],...
      'name', 'Lines and Text',...
      'text', { {'Text G', 'Text H', 'Text I'} },...
      'type', 'scatter',...
      'mode', 'lines+text',...
      'textposition' , 'bottom'...
      );

response = plotly({trace1, trace2, trace3});

%hide legend
layout = struct(...
  'showlegend',false...
)
response = plotlylayout(layout);

url = response.url
filename = response.filename
dos(['open ' response.url])

Basic Text Chart

Styling Text Charts

Toggle Notes and Options
trace1 = struct(...
      'x', [0,1,2], 'y', [1,1,1], ...
      'name', 'Lines, Markers and Text', ...
      'text', { {'Text A', 'Text B', 'Text C'} }, ...
      'type', 'scatter', ...
      'mode', 'lines+markers+text', ...
      'textposition', 'top', ...
      'textfont' , struct(...
        'color', '#1f77b4', ...options
        'family', 'sans serif', ...options
        'size', 18 ...
      )...
    );
trace2 = struct(...
      'x', [0,1,2], 'y', [2,2,2], ...
      'name', 'Lines and Text', ...
      'text', { {'Text G', 'Text H', 'Text I'} }, ...
      'type', 'scatter', ...
      'mode', 'lines+markers+text', ...
      'textposition' , 'bottom', ...
      'textfont' , struct(...
        'color', '#ff7f0e', ...options
        'family', 'sans serif', ...options
        'size', 18 ...
      )...
    );

response = plotly({trace1, trace2});

%hide legend
layout = struct(...
  'showlegend',false...
)
response = plotlylayout(layout);

url = response.url
filename = response.filename
dos(['open ' response.url])

Styling Text Charts

Axes Booleans

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8];
y = [8,7,6,5,4,3,2,1,0];
x2 = [0,1,2,3,4,5,6,7,8];
y2 = [0,1,2,3,4,5,6,7,8];



axesstyle = struct( ...
      'autorange' , true, ...
      'autotick' , true, ...
      'showgrid' , false, ...
      'showline' , false, ...note
      'showticklabels' , false, ...
      'zeroline' , false, ...
      'ticks' , '' ...options
);

layout = struct( ...
      'xaxis' , axesstyle, ...
      'yaxis' , axesstyle, ...
      'showlegend' , false ...
);


response = plotly(x,y,x2,y2,struct('layout', layout));
url = response.url
filename = response.filename

Axes Booleans

Linear and Log Axes

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8];
y = [8,7,6,5,4,3,2,1,0];
x2 = [0,1,2,3,4,5,6,7,8];
y2 = [0,1,2,3,4,5,6,7,8];


axesstyle = struct( ...
    'autorange' , true, ...
    'type' , 'log', ...options
);

layout = struct( ...
    'xaxis' , axesstyle, ...
    'yaxis' , axesstyle ...
);

response = plotly(x,y,x2,y2,struct('layout', layout));
url = response.url
filename = response.filename

Linear and Log Axes

Manual Range

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8];
y = [8,7,6,5,4,3,2,1,0];
x2 = [0,1,2,3,4,5,6,7,8];
y2 = [0,1,2,3,4,5,6,7,8];


axesstyle = struct( ...
    'range' , [2,5] ...options
);

layout = struct( ...
    'xaxis' , axesstyle, ...
    'yaxis' , axesstyle ...
);


response = plotly(x,y,x2,y2,struct('layout', layout));
url = response.url
filename = response.filename

Manual Range

Range Mode

Toggle Notes and Options
x = [2,4,6];
y = [-3,0,3];


layout = struct( ...
    'showlegend' , false, ...
    'xaxis' , struct( ...
        'autorange' , true, ...
        'rangemode' , 'tozero' ...options
    ), ...
    'yaxis' , struct( ...
        'autorange' , true, ...
        'rangemode' , 'nonnegative' ...options
    ) ...
);


response = plotly(x,y,struct('layout', layout));
url = response.url
filename = response.filename

Range Mode

Axes Lines

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8];
y = [8,7,6,5,4,3,2,1,0];
x2 = [0,1,2,3,4,5,6,7,8];
y2 = [0,1,2,3,4,5,6,7,8];


axesstyle = struct( ...
    'showline' , true, ...note
    'mirror' , 'ticks', ...optionsnote
    'linecolor' , '#636363', ...options
    'linewidth' , 6, ...
    'showgrid' , true, ...note
    'gridcolor' , '#bdbdbd', ...options
    'gridwidth' , 2, ...
    'zeroline' , true, ...note
    'zerolinecolor' , '#969696', ...options
    'zerolinewidth' , 4 ...
);

layout = struct( ...
  'xaxis' , axesstyle, ...
  'yaxis' , axesstyle ...
);


response = plotly(x,y,x2,y2,struct('layout', layout));
url = response.url
filename = response.filename

Axes Lines

Axes Ticks

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8];
y = [8,7,6,5,4,3,2,1,0];
x2 = [0,1,2,3,4,5,6,7,8];
y2 = [0,1,2,3,4,5,6,7,8];

axesstyle = struct( ...
      'autotick' , false, ...
      'tick0' , 0, ...note
      'dtick' , .25, ...note
      'ticks' , 'outside', ...options
      'tickcolor' , '#000', ...options
      'ticklen' , 8, ...
      'tickwidth' , 4 ...
);

layout = struct( ...
  'xaxis' , axesstyle, ...
  'yaxis' , axesstyle ...
);

response = plotly(x,y,x2,y2,struct('layout', layout));
url = response.url
filename = response.filename

Axes Ticks

Axes Labels

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8];
y = [8,7,6,5,4,3,2,1,0];
x2 = [0,1,2,3,4,5,6,7,8];
y2 = [0,1,2,3,4,5,6,7,8];

axesstyle = struct( ...
      'title' , 'AXIS TITLE', ...
      'titlefont' , struct( ...
        'color' , 'lightgrey', ...options
        'family' , 'Arial, sans-serif', ...options
        'size' , 18 ...
      ), ...
      'showticklabels' , true, ...
      'tickfont' , struct( ...
        'color' , 'black', ...options
        'family' , 'Old Standard TT, serif', ...options
        'size' , 14 ...
      ), ...
      'tickangle' , 45, ...options
      'showexponent' , 'All', ...options
      'exponentformat' , 'e' ...options
);

layout = struct( ...
  'xaxis' , axesstyle, ...
  'yaxis' , axesstyle ...
);

response = plotly(x,y,x2,y2,struct('layout', layout));
url = response.url
filename = response.filename

Axes Labels

Reversed Axes

Toggle Notes and Options
x = [1,2] ...
y = [1,2] ...

layout = struct( ...
    'xaxis', struct( ...
      'autorange', 'reversed' ...
    ) ...
)

response = plotly(x,y,struct('layout', layout));
url = response.url
filename = response.filename

Reversed Axes

Date Axes

Toggle Notes and Options
%Plotly understands dates and times in format
%YYYY-MM-DD HH:MM:SS (ie, 2009-10-04 22:23:00)

x =  {'2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'};
y =  [1,3,6];

response = plotly(x,y);
url = response.url;
filename = response.filename;

Date Axes

Simple Double Axes

Toggle Notes and Options
data = { ...
   struct( ...
    'x',[1,2,3], ...
    'y',[40,50,60], ...
      'name','yaxis data' ...
   ),
   struct( ...
      'x',[2,3,4], ...
      'y',[4,5,6], ...
      'yaxis','y2', ... % this will reference the yaxis2 object in the layout object
      'name', 'yaxis2 data' ...
   )    ...
};

layout = struct(...
   'yaxis',struct( ...
      'title', 'yaxis title'... % optional
   ), ...
   'yaxis2', struct( ...
      'title', 'yaxis2 title', ... % optional
      'titlefont',struct( ...
         'color','rgb(148, 103, 189)' ...
      ), ...
      'tickfont',struct( ...
         'color','rgb(148, 103, 189)' ...
      ), ...
      'overlaying','y', ...
      'side','right' ...
   ), ...
   'title', 'Double Y Axis Example' ...
);


response = plotly(data, struct('layout',layout))
url = response.url
filename = response.filename

Simple Double Axes

Simple Multiple Axes

Toggle Notes and Options
c = { {'#1f77b4', % muted blue
    '#ff7f0e', % safety orange
    '#2ca02c', % cooked asparagus green
    '#d62728', % brick red
    '#9467bd', % muted purple
    '#8c564b', % chestnut brown
    '#e377c2', % raspberry yogurt pink
    '#7f7f7f', % middle gray
    '#bcbd22', % curry yellow-green
    '#17becf'} }; %blue-teal

data = { ...
   struct( ...
      'x',[1,2,3], ...
      'y',[4,5,6], ...
      'name','yaxis1 data' ...
   ), ...
   struct( ...
      'x',[2,3,4], ...
      'y',[40,50,60], ...
      'name','yaxis2 data', ...
      'yaxis','y2' ... %this references the 'yaxis2' object in layout
   ), ...
   struct( ...
      'x',[3,4,5], ...
      'y',[400,500,600], ...
      'name','yaxis3 data', ...
      'yaxis','y3' ...
    ), ...
    struct( ...
    'x',[4,5,6], ...
    'y',[40000,50000,60000], ...
    'name','yaxis4 data', ...
    'yaxis','y4' ...
   ), ...
    struct( ...
    'x',[5,6,7], ...
    'y',[400000,500000,600000], ...
    'name','yaxis5 data', ...
    'yaxis','y5' ...
   ), ...
   struct( ...
    'x',[6,7,8], ...
    'y',[4000000,5000000,6000000], ...
    'name','yaxis6 data', ...
    'yaxis','y6' ...
   )...
}

layout = struct( ...
    'width',800, ...
    'xaxis', struct( ...
        'domain',[0.3,0.7] ...
    ), ...
   'yaxis',struct( ...
      'title', 'yaxis title', ...
      'titlefont', struct( ...
         'color',c{1} ...
      ), ...
      'tickfont', struct( ...
         'color',c{1} ...
      ) ...
   ), ...
   'yaxis2', struct( ...
      'overlaying','y', ...
      'side','left', ...
      'anchor','free', ...
      'position',0.15, ...
      'title', 'yaxis2 title', ...
      'titlefont', struct( ...
         'color',c{2} ...
      ), ...
      'tickfont', struct( ...
         'color',c{2} ...
      ) ...
   ), ...
   'yaxis3', struct( ...
      'overlaying','y', ...
      'side','left', ...
      'anchor','free', ...
      'position',0, ...
      'title', 'yaxis3 title', ...
      'titlefont', struct( ...
         'color',c{3} ...
      ), ...
      'tickfont', struct( ...
         'color',c{3} ...
      ) ...
   ), ...
   'yaxis4', struct( ...
      'overlaying','y', ...
      'side','right', ...
      'anchor','x', ...
      'title', 'yaxis4 title', ...
      'titlefont', struct( ...
         'color',c{4} ...
      ), ...
      'tickfont', struct( ...
         'color',c{4} ...
      ) ...
   ), ...
   'yaxis5', struct( ...
      'overlaying','y', ...
      'side','right', ...
      'anchor','free', ...
      'position',0.85, ...
      'title', 'yaxis5 title', ...
      'titlefont', struct( ...
         'color',c{5} ...
      ), ...
      'tickfont', struct( ...
         'color',c{5} ...
      ) ...
   ), ...
   'yaxis6', struct( ...
      'overlaying','y', ...
      'side','right', ...
      'anchor','free', ...
      'position',1.0, ...
      'title', 'yaxis6 title', ...
      'titlefont', struct( ...
         'color',c{6} ...
      ), ...
      'tickfont', struct( ...
         'color',c{6} ...
      ) ...
   ), ...
   'title', 'multiple y-axes example' ...
)

response = plotly(data, struct('layout',layout))
url = response.url
filename = response.filename

Simple Multiple Axes

Simple Subplot

Toggle Notes and Options
data = { ...
   struct( ...
    'x',[1,2,3], ...
    'y',[4,5,6] ...
   ), ...
   struct( ...
      'x',[20,30,40], ...
      'y',[50,60,70], ...
      'xaxis','x2', ...
      'yaxis','y2' ...
   ) ...
}

layout = struct( ...
    'xaxis', struct( ...
        'domain',[0,0.45] ... % i.e. let the first x-axis span the first 45% of the plot width
    ), ...
    'xaxis2', struct( ...
        'domain',[0.55,1] ... % i.e. let the second x-axis span the latter 45% of the plot width
    ), ...
    'yaxis2', struct( ...
        'anchor','x2' ... % i.e. bind the second y-axis to the start of the second x-axis
    ) ...
)

response = plotly(data, struct('layout',layout))
url = response.url
filename = response.filename

Simple Subplot

Custom Sized Subplot

Toggle Notes and Options
data = {
   struct( ...
    'x',[1,2,3], ...
    'y',[4,5,6] ...
   ), ...
   struct( ...
      'x',[20,30,40], ...
      'y',[50,60,70], ...
      'xaxis','x2', ...
      'yaxis','y2' ...
   ) ...
}

layout = struct( ...
    'xaxis', struct( ...
        'domain',[0,0.7] ... % i.e. let the first x-axis span the first 70% of the plot width
    ), ...
    'xaxis2', struct( ...
        'domain',[0.8,1] ... % i.e. let the second x-axis span the latter 20% of the plot width
    ), ...
    'yaxis2', struct( ...
        'anchor','x2' ... % i.e. bind the second y-axis to the start of the second x-axis
    ) ...
)

response = plotly(data, struct('layout',layout))
url = response.url
filename = response.filename

Custom Sized Subplot

Multiple Subplots

Toggle Notes and Options
data = { ...
   struct( ...
    'x',[1,2,3], ...
    'y',[4,5,6] ...
   ), ...
   struct( ...
      'x',[20,30,40], ...
      'y',[50,60,70], ...
      'xaxis','x2', ...
      'yaxis','y2' ...
   ), ...
   struct( ...
      'x',[300,400,500], ...
      'y',[600,700,800], ...
      'xaxis','x3', ...
      'yaxis','y3' ...
   ), ...
   struct( ...
      'x',[4000,5000,6000], ...
      'y',[7000,8000,9000], ...
      'xaxis','x4', ...
      'yaxis','y4' ...
   ) ...
}

layout = struct( ...
    'xaxis',struct( ...
        'domain',[0,0.45] ... % let the first x-axis span the first 45% of the plot width
    ), ...
    'yaxis',struct( ...
        'domain',[0,0.45] ... % % and let the first y-axis span the first 45% of the plot height
    ), ...
    'xaxis2',struct( ...
        'domain',[0.55,1] ... % and let the second x-axis span the latter 45% of the plot width
    ), ...
    'yaxis2',struct( ...
        'domain',[0,0.45], ... % and let the second y-axis span the first 45% of the plot height
        'anchor','x2' ... % bind the horizontal position of the second y-axis to the start of the second x-axis
    ), ...
    'xaxis3',struct( ...
        'domain',[0,0.45], ...
        'anchor','y3' ... % bind the vertical position of this axis to the start of yaxis3
    ), ...
    'yaxis3',struct( ...
        'domain',[0.55,1] ...
    ), ...
    'xaxis4',struct( ...
        'domain',[0.55,1], ...
        'anchor','y4' ... % bind the vertical position of this axis to the start of yaxis4
    ), ...
    'yaxis4',struct( ...
        'domain',[0.55,1], ...
        'anchor','x4' ... % bind the horizontal position of this axis to the start of xaxis4
    ) ...
)


response = plotly(data, struct('layout',layout))
url = response.url
filename = response.filename

Multiple Subplots

Subplots with Shared Axes

Toggle Notes and Options
data = {
   struct( ...
    'x',[1,2,3], ...
    'y',[2,3,4] ...
   ), ...
   struct( ...
      'x',[20,30,40], ...
      'y',[5,5,5], ...
      'xaxis','x2', ...
      'yaxis','y' ...
   ), ...
   struct( ...
      'x',[2,3,4], ...
      'y',[600,700,800], ...
      'xaxis','x', ...
      'yaxis','y3' ...
   ), ...
   struct( ...
      'x',[4000,5000,6000], ...
      'y',[7000,8000,9000], ...
      'xaxis','x4', ...
      'yaxis','y4' ...
   ) ...
}

layout = struct( ...
    'xaxis',struct( ...
        'domain',[0,0.45] ... % let the first x-axis span the first 45% of the plot width
    ), ...
    'yaxis',struct( ...
        'domain',[0,0.45] ... % and let the first y-axis span the first 45% of the plot height
    ), ...
    'xaxis2',struct( ...
        'domain',[0.55,1] ... % and let the second x-axis span the latter 45% of the plot width
    ), ...
    'yaxis3',struct( ...
        'domain',[0.55,1] ...
    ), ...
    'xaxis4',struct( ...
        'domain',[0.55,1], ...
        'anchor','y4' ... % bind the vertical position of this axis to the start of yaxis4
    ), ...
    'yaxis4',struct( ...
        'domain',[0.55,1], ...
        'anchor','x4' ... % bind the horizontal position of this axis to the start of xaxis4
    ) ...
)

response = plotly(data, struct('layout',layout))
url = response.url
filename = response.filename

Subplots with Shared Axes

Stacked Subplots

Toggle Notes and Options
data = { ...
         struct('x', [0,1,2], 'y', [10,11,12]), ...
         struct('x', [2,3,4], 'y', [100,110,120], 'yaxis', 'y2', 'xaxis', 'x2'), ...
         struct('x', [3,4,5], 'y', [1000,1100,1200], 'yaxis', 'y3', 'xaxis', 'x3') ...
}

layout = struct( ...
    'yaxis', struct('domain', [0,0.8/3.]), ...
    'yaxis2', struct('domain',[0.8/3+0.1,2*0.8/3+0.1]), ...
    'yaxis3', struct('domain',[2*0.8/3+0.2,1]), ...
    'xaxis2', struct('anchor','y2'), ...
    'xaxis3', struct('anchor','y3'), ...
    'legend', struct('traceorder', 'reversed') ...
)

response = plotly(data, struct('layout',layout))
url = response.url
filename = response.filename

Stacked Subplots

Stacked Subplots with Coupled X-Axis

Toggle Notes and Options
data = { ...
         struct('x', [0,1,2], 'y', [10,11,12]), ...
         struct('x', [2,3,4], 'y', [100,110,120], 'yaxis', 'y2'), ...
         struct('x', [3,4,5], 'y', [1000,1100,1200], 'yaxis', 'y3') ...
}

layout=struct( ...
    'yaxis', struct('domain', [0,1./3.]), ...
    'yaxis2', struct('domain',[1./3,2./3.]), ...
    'yaxis3', struct('domain',[2./3.,1]), ...
    'legend', struct('traceorder', 'reversed') ...
)

response = plotly(data, struct('layout',layout))
url = response.url
filename = response.filename

Stacked Subplots with Coupled X-Axis

Simple Inset

Toggle Notes and Options
data = { ...
   struct(...
    'x',[1,2,3], ...
    'y',[4,3,2] ...
   ), ...
   struct(...
      'x',[20,30,40], ...
      'y',[30,40,50], ...
      'xaxis','x2', ...
      'yaxis','y2' ...
   ) ...
}

layout = struct(...
    'xaxis2', struct(...
        'domain', [0.6, 0.95], ...
        'anchor', 'y2' ...
    ), ...
    'yaxis2',struct(...
        'domain', [0.6, 0.95], ...
        'anchor', 'x2' ...
    ) ...
)

response = plotly(data, struct('layout',layout))
url = response.url
filename = response.filename

Simple Inset

Plot and Margin Size

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,2,3,4,5,6,7,8]

layout = struct( ...
          'autosize', false, ...
          'height', 500, ...
          'width', 500, ...
          'margin', struct( ...
                    't',100, ...
                    'b',100, ...
                    'r',50, ...
                    'l',50, ...
                    'pad',4 ... % space between border and gridlines
                  ), ...
          'plot_bgcolor', '#c7c7c7', ...
          'paper_bgcolor', '#7f7f7f' ...
)

response = plotly(x,y, struct('layout',layout))
url = response.url
filename = response.filename

Plot and Margin Size

Global Font

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,2,3,4,5,6,7,8]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [1,0,3,2,5,4,7,6,8]

layout = struct( ...
     'title', 'Global Font', ...
     'font', struct( ...
          'color', '#7f7f7f', ...
          'family', 'Courier New, monospace', ...
          'size', 18 ...
     ) ...
)



response = plotly(x,y,x2,y2, struct('layout',layout))
url = response.url
filename = response.filename

Global Font

Titles, Axes Names and Trace Names

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,2,3,4,5,6,7,8]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [1,0,3,2,5,4,7,6,8]

data = { ...
     struct( ...
          'x', x, ...
          'y', y, ...
          'name','Name of Trace 1' ...
          ), ...
     struct( ...
          'x', x2, ...
          'y', y2, ...
          'name','Name of Trace 2' ...
          ) ...
}


layout = struct( ...
     'title', 'Plot Title', ...
     'xaxis', struct( ...
          'title','x Axis', ...
          'titlefont', struct( ...
               'color','#7f7f7f', ...
               'family','Courier New, monospace', ...
               'size',18 ...
          ) ...
     ), ...
     'yaxis', struct( ...
          'title','y Axis', ...
          'titlefont', struct( ...
               'color','#7f7f7f', ...
               'family','Courier New, monospace', ...
               'size',18 ...
          ) ...
     ) ...
)


response = plotly(x,y,x2,y2, struct('layout',layout))
url = response.url
filename = response.filename

Titles, Axes Names and Trace Names

Simple Annotation

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,3,2,4,3,4,6,5]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,5,1,2,2,3,4,2]


layout = struct( ...
    'showlegend', false, ...
    'annotations', {struct( ...
        'text', 'Annotation Text', ...
        'xref', 'x', ...
        'yref', 'y', ...
        'x', 2, ...
        'y', 5, ...
        'ax', 0, ...
        'ay', -40, ...
        'showarrow', true, ...
        'arrowhead', 7 ...
    )} ...
)

response = plotly(x,y,x2,y2, struct('layout',layout))
url = response.url
filename = response.filename

Simple Annotation

Multiple Annotations

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,3,2,4,3,4,6,5]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,5,1,2,2,3,4,2]


layout = struct( ...
    'showlegend', false, ...
    'annotations', {struct( ...
        'text', 'Annotation Text', ...
        'xref', 'x', ...
        'yref', 'y', ...
        'x', 2, ...
        'y', 5, ...
        'ax', 0, ...
        'ay', -40, ...
        'showarrow', true, ...
        'arrowhead', 7 ...
    ), ...
    struct( ...
        'text', 'Annotation Text 2', ...
        'xref', 'x', ...
        'yref', 'y', ...
        'x', 4, ...
        'y', 4, ...
        'ax', 0, ...
        'ay', -40, ...
        'showarrow', true, ...
        'arrowhead', 7 ...
    )} ...
)

response = plotly(x,y,x2,y2, struct('layout',layout))
url = response.url
filename = response.filename

Multiple Annotations

Styling Annotations

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,3,2,4,3,4,6,5]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,5,1,2,2,3,4,2]


layout = struct( ...
    'showlegend', false, ...
    'annotations', {struct( ...
        'text', 'max=5', ...
        'xref', 'x', ...
        'yref', 'y', ...
        'x', 2, ...
        'y', 5, ...
        'ax', 20, ...
        'ay', -30, ...
        'arrowhead', 2, ...
        'arrowsize', 1, ...
        'arrowwidth', 2, ...
        'arrowcolor', '#636363', ...
        'bgcolor', '#ff7f0e', ...
        'bordercolor', '#c7c7c7', ...
        'borderpad', 4, ...
        'borderwidth', 2, ...
        'font', struct( ...
            'color', '#ffffff', ...
            'family', 'Courier New, monospace', ...
            'size', 16 ...
        ), ...
        'opacity', 0.8, ...
        'showarrow', true, ...
        'align', 'center' ...
    )} ...
)

response = plotly(x,y,x2,y2, struct('layout',layout))
url = response.url
filename = response.filename

Styling Annotations

Simple Bubblechart

Toggle Notes and Options
data = { ...
    struct( ...
    'x', [1,2,3,4], ...
    'y', [10,11,12,13], ...
    'marker',struct( ...
        'size', [12, 22, 32, 42], ... % diameter
        'color', { {'hsl(0,100,40)', 'hsl(33,100,40)', 'hsl(66,100,40)', 'hsl(99,100,40)'} }, ...
        'opacity',[.60, .70, .80, .90] ...
     ), ...
     'mode', 'markers' ...
     ), ...
     struct( ...
    'x', [1,2,3,4], ...
    'y', [11,12,13,14], ...
    'marker',struct( ...
        'color', 'rgb(31, 119, 180)', ...
        'size', 18, ...
        'symbol', { {'circle', 'square', 'diamond', 'cross'} } ...
     ), ...
     'mode', 'markers' ...
     ), ...
     struct( ...
    'x', [1,2,3,4], ...
    'y', [12,13,14,15], ...
    'marker',struct( ...
        'size', 18, ...
        'line',struct( ...
            'color', { {'rgb(120,120,120)', 'rgb(120,120,120)', 'red', 'rgb(120,120,120} }, ...
            'width', [2, 2, 6, 2] ...
        ) ...
    ), ...
    'mode', 'markers' ...
    ) ...
} ...

layout = struct(...
    'showlegend', false ...
)

response = plotly(data, struct('layout',layout))
url = response.url
filename = response.filename

Simple Bubblechart

Private Graph

Toggle Notes and Options
x = [0,2,4]
y = [0,4,2]

response = plotly(x,y, struct('world_readable',false)) %defaults to true
url = response.url
filename = response.filename

Private Graph

Public Graph

Toggle Notes and Options
x = [0,2,4]
y = [0,4,2]

response = plotly(x,y, struct('world_readable',true))
url = response.url
filename = response.filename

Public Graph

File Naming

Toggle Notes and Options
x = [0,2,4]
y = [0,4,2]

response = plotly(x,y, struct('filename','myplotlygraph'))
%or
response = plotly(x,y, struct(...
'filename','myfolder/myplotlygraph'))

url = response.url
filename = response.filename
File Naming

Data Visibility

Toggle Notes and Options
data = { ...
  struct( ...
    'x', [0,1,2,3], ...
    'y', [0,2,4,6], ...
    'visible', true ...
    ), ...

  struct( ...
    'x', [0,1,2,3], ...
    'y', [8,4,2,0], ...
    'visible', false ...
    ) ...
 } ...

response = plotly(data)
url = response.url
filename = response.filename

Data Visibility

New Graph

plotly([1,2], [3,4], ...
	struct('filename','new plot', ...
	'fileopt', 'new'))

API RESPONSE:

         url: 'https://plot.ly/~demos/1053'
     message: [1x0 char]
     warning: [1x0 char]
    filename: 'new plot'
       error: [1x0 char]
plotly([1,2], [3,4], ...
	struct('filename','new plot', ...
	'fileopt', 'new'))
Check out the filename and url in the responses. We specified the same filename in both calls, but since we used the fileopt 'new', our second call appended '(1)' to the filename and created a new unique url for that graph. The first graph was not overwritten.

API RESPONSE:

         url: 'https://plot.ly/~demos/1054'
     message: [1x0 char]
     warning: [1x0 char]
    filename: 'new plot (1)'
       error: [1x0 char]

Overwrite

The overwrite option will save the plot with the specified filename no matter what. If a plot already exists under the same name, it will overwrite it and create a revision. If the plot with that filename doesn't exist, it will create it!
py.plot([1,2], [3,4], filename='same plot', fileopt='overwrite')

plotly([1,2], [3,4], ...
	struct('filename', 'same plot', ...
	'fileopt', 'overwrite'))

API RESPONSE:

         url: 'https://plot.ly/~demos/1055'
     message: [1x0 char]
     warning: [1x0 char]
    filename: 'same plot'
       error: [1x0 char]
plotly([10,20], [30,40], ...
	struct('filename', 'same plot', ...
	'fileopt', 'overwrite'))

API RESPONSE:

         url: 'https://plot.ly/~demos/1055'
     message: [1x0 char]
     warning: [1x0 char]
    filename: 'same plot'
       error: [1x0 char]

Append

The "append" fileopt will append the data that you supplied as new traces. If the filename doesn't exist, it will create a new file with that data.
plotly([1,2], [1,2], ...
	struct('filename', 'append plot', ...
	'fileopt', 'append'))
Here we're starting with one trace.
plotly([1,2], [3,4], ...
	struct('filename', 'append plot', ...
	'fileopt', 'append'))

Here we are appending a new trace with points (1,3) and (2,4).
plotly([1, 2], [4, 5], [1, 2], [5, 6], ...
	struct('filename', 'append plot', ...
	'fileopt', 'append'))
Here we are appending two new traces at points (1,4), (2,5) and (1,5), (2,6).

Extend

The "extend" fileopt will extend existing traces with your new data.
plotly([1,2], [1, 2], [1, 2], [2, 3], [1, 2], [3, 4], ...
	struct('filename', 'extend plot', ...
	'fileopt', 'extend'))
If there is no data in the plot, 'extend' will create new traces.
plotly([3,4], [2, 1], [3, 4], [3, 2], [3, 4], [4, 3], ...
	struct('filename', 'extend plot', ...
	'fileopt', 'extend'))
If there is data in the plot, the existing traces will be extended with the data in the order that it is supplied.
plotly([4,5], [2, 3], ...
	struct('filename', 'extend plot', ...
	'fileopt', 'extend', ...
	'traces' , [1]))
You can also choose which trace to extend with the "traces" argument. Here we extend the second trace. (traces=[1])
plotly([5,6], [3,3], [4, 5], [1, 1], ...
	struct('filename', 'extend plot', ...
	'fileopt', 'extend', ...
	'traces' , [2,0]))
The traces option accepts an array as an argument. Here we extend the 3rd trace in the plot with the first data set that we supply, and the 1st trace in the plot with the second data set.

Setting Style

A simple example:
>> plotlystyle({struct('type','bar'), struct('type','scatter','marker',struct('symbol','square', 'color','marker'))})
This sets the first data trace to a bar chart and the second data trace to a scatter plot with purple square scatter points.

>> plotlystyle({data1,...,datan]}, kwargs)
{data1,...} is a cell array of structs
datai is a Plotly formatted data struct that customizes the style of the i'th trace. It is identical to the datai structs used in plotly(data1,...) except that it doesn't contain the keys x or y (i.e. it doesn't contain any data).

kwargs is an optional struct with the following optional keys:
kwargs.filename: filename of the plot inside your plotly account
kwargs.traces: an array that specifies which traces to style. If not specified, then traces are styled in the order of the data structs or, if supplied, applied to the trace specified by the datai.name value.

Setting Layout

A simple example:
plotlylayout({'title':'Hello World'})
This sets your plot's title to Hello World.
The general syntax is
plotlylayout(layout, kwargs)
layout is a Plotly formatted layout dictionary that customizes the style of the layout, the axes, and the legend.

kwargs represents optional arguments. Accepted arguments are:
filename: filename of the plot inside your plotly account. If not specified, then the style is applied to the last plot that was made in your API session.

File Sharing

x = [0,2,4]
y = [0,4,2]


response = plotly(x,y, struct(...
'filename','lab_results/experiment1'))

url = response.url
filename = response.filename

When you share a folder in the Plotly tool, files created within that folder using the API are automatically shared.

In this case user demos has shared the folder lab_results with batman and robin.

When demos saves a file (experiment1 inside lab_results, batman

IFrames

Formal Syntax

A simple example:
>> plotly([0,1],[10,11])
or in an alternate syntax
>> plotly({struct('x',[0,1],'y',[10,11]})
The general plotting syntax is
>> plotly(x1, y1,...,xn,yn, kwargs)
or
>> plotly({data1,...,datan}, kwargs)
x1, y1 are arrays with numbers or cell arrays with strings as elements.

{data1,...} is a cell array and data1 is a struct with at least the fields x and y, i.e.
datai = struct('x', x1, 'y', y1)
but can contain more fields with styling and chart-type data. For example,
data1=struct('x', [0,1],'y', [10,11],'name','Exp Results', 'type','scatter', 'marker',struct('symbol','square',
'color','purple'))
specifies a scatter trace with purple square data markers that is named Exp Results.

kwargs is an optional struct with the following optional keys:
kwargs.filename: filename of the plot inside your plotly account
kwargs.fileopt: file-options: 'new', 'overwrite', or 'append'
kwargs.layout: a Plotly formatted layout struct describing layout options.
kwargs.style: a Plotly formatted style struct describing the style of all the data traces.
kwargs.world_readable: a boolean. If true, then the graph will be public. If false, then only you can see it. Default is true.

Basic Line Plot

Toggle Notes and Options
(x0,y0) = [1,2,3,4], [10,15,13,17]
(x1,y1) = [2,3,4,5], [16,5,11,9]
response = Plotly.plot([[x0 y0] [x1 y1]])
url = response["url"]
filename = response["filename"]

Basic Line Plot

Line with Scatter

Toggle Notes and Options
trace0 = ["x"=> [1,2,3,4],
          "y"=> [10,15,13,17],
          "type"=> "scatter",
          "mode"=> "markers"]

trace1 = ["x"=> [2,3,4,5],
          "y"=> [16,5,11,9],
          "type"=> "scatter",
          "mode"=> "lines"]

trace2 = ["x"=> [1,2,3,4],
          "y"=> [12,9,15,12],
          "type"=> "scatter",
          "mode"=> "lines+markers"]

response = Plotly.plot([trace0, trace1, trace2])
url = response["url"]
filename = response["filename"]

Line with Scatter

Styling Line and Scatter

Toggle Notes and Options
(x0,y0) = [1,2,3], [4,5,6]
(x1,y1) = [1,2,3], [2,10,12]

# plotly"s data dictionaries
data1 = ["x"=> x0,
	"y"=> y0,
	"type"=>"scatter",

	"name"=>"Experiment",
	"line"=>[
		"color"=>"rgb(3,78,123)",
		"width"=>6,
		"dash"=>"dot"
	],
	"marker"=>[
		"opacity"=>1.0,
	  "symbol"=>"square",
    "size"=>12,
		"color"=>"rgb(54,144,192)",
		"line"=>[
			"width"=>3,
			"color"=>"darkblue"]
		]
]

data2 = ["x"=>x1,
	"y"=>y1,
	"type"=>"scatter",
	"name"=>"Control",
	"line"=>["color"=>"purple",
		"width"=>4,
		"dash"=>"dashdot"],
	"marker"=>["opacity"=>0.9,
		"symbol"=>"cross",
		"size"=>16,
		"color"=>"fuchsia",
		"line"=>["color"=>"",
			"width"=>0],
	]
]

response = Plotly.plot(["Experiment" => data1, "Control" => data2])

Styling Line and Scatter

Basic Area Plot

Toggle Notes and Options
p = ["x"=> [1,2,3,4],
  "y"=> [0, 2, 3, 5],
  "fill"=> "tozeroy"] options


l = ["x"=> [1,2,3,4],
  "y"=> [3,5,1,7],
  "fill"=> "tonexty"]

response = Plotly.plot(["pancho"=>p, "lefty"=>l])
url = response["url"]
filename = response["filename"]

Basic Area Plot

Basic Bar Chart

Toggle Notes and Options
x0 = ["giraffes", "orangutans", "monkeys"] note
y0 = [20, 14, 23];
data = ["x"=> x0, "y"=> y0,
	"type"=> "bar"] options
response = Plotly.plot([data])
url = response["url"]
filename = response["filename"]

Basic Bar Chart

Grouped Bar Chart

Toggle Notes and Options
categories = ["giraffes", "orangutans", "monkeys"]
SF = ["name"=> "SF Zoo",
	  "x"=> categories,
      "y"=> [20, 14, 23],
      "type"=> "bar"]
LA = ["name"=> "LA Zoo",
  	  "x"=> categories,
      "y"=> [12,18,29],
      "type"=> "bar"]
layout = [
	  "barmode"=> "group", options
	  "xaxis"=> ["type"=> "category"],
	  "categories"=> categories]
response = Plotly.plot(["LA Zoo"=> LA, "SF Zoo"=>SF], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Grouped Bar Chart

Stacked Bar Chart

Toggle Notes and Options
[...]	# ... SF and LA data from above
layout = ["barmode"=> "stack",  options
	"xaxis"=> ["type"=> "category"],
	"categories"=> categories]
response = Plotly.plot(["LA Zoo" => LA, "SF Zoo" => SF], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Stacked Bar Chart

Styling Bar Charts

Toggle Notes and Options
categories=["giraffes", "orangutans", "monkeys"]
SF = ["name"=> "SF Zoo",
  "x"=> categories,
  "y"=> [20, 14, 23],
  "type"=> "bar",
  "marker"=>[  note
    "color"=> "orange", options
    "line"=> ["color"=> "grey", note
      "width"=> 3]]
  ]

LA = ["name"=> "LA Zoo",
  "x"=> categories,
  "y"=> [12,18,29],
  "type"=> "bar",
  "marker"=> ["color"=> "rgb(111, 168, 220)",
    "line"=> ["color"=> "grey",
      "width"=> 3]]
  ]

layout = [
  "title"=> "Animal Population",
  "barmode"=> "group", options
  "yaxis"=> ["name"=> "# of animals (thousands)"],
  "xaxis"=> ["type"=> "category"],
  "categories"=> categories,
  "bargap"=> 0.25,note
  "bargroupgap"=> 0.3,note
  "bardir"=> "v"] options

response = Plotly.plot(["LA Zoo" => LA, "SF Zoo" => SF], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Styling Bar Charts

Basic Error Bars

Toggle Notes and Options
data = ["x"=> [0,1,2],
  "y"=> [6,10,2],
  "error_y"=> ["type"=> "data", options
	"array"=> [1, 2, 3],
	"visible"=> true]]
response = Plotly.plot([data])
url = response["url"]
filename = response["filename"]

Basic Error Bars

Percentage, Constant or Square Root

Toggle Notes and Options
data = ["x"=> [0,1,2],
  "y"=> [6,8,4],
  "error_y"=> ["type"=> "percent",options
    "value"=> 50, note
    "visible"=> true]]
response = Plotly.plot([data])
url = response["url"]
filename = response["filename"]

Percentage, Constant or Square Root

Bar Chart with Error Bars

Toggle Notes and Options
categories = ["Trial 1", "Trial 2", "Trial 3"]
control = ["x"=> categories,
  "y"=> [3, 6, 4],
  "type"=> "bar",
  "marker"=>["color"=> "rgb(74, 134, 232)"],
  "error_y"=> ["type"=> "data",
    "array"=> [1, 0.5, 1.5],
    "visible"=> true,
	"color"=> "rgb(67, 67, 67)"]]
exp = ["x"=> categories,
  "y"=> [4, 7, 3],
  "type"=> "bar",
  "marker"=>["color"=>"rgb(111, 168, 220)"],
  "error_y"=> ["type"=> "data",options
    "array"=> [0.5, 1, 2], note
	"visible"=> true,
	"color"=> "rgb(67, 67, 67)"]]
layout = ["barmode"=> "group"]

response = Plotly.plot(["Control" => control, "Experiment" => exp], ["layout"=>layout])
url = response["url"]
filename = response["filename"]

Bar Chart with Error Bars

Basic Box Plot

Toggle Notes and Options
box1 = ["y"=> [0, 1, 2, 4],
  	"type"=> "box"]
box2 = ["y"=> [1,2,4,5,8],
	"type"=> "box"]
response = Plot.plot([box1, box2])
url = response["url"]
filename = response["filename"]

Basic Box Plot

Box Plot with Jitter

Toggle Notes and Options
box = ["y"=> randn(50),
    "type"=> "box",
    "boxpoints"=> "all", options
    "jitter"=> 0.3,   note
    "pointpos"=> -1.8]  note
response = Plotly.plot([box])
url = response["url"]
filename = response["filename"]

Box Plot with Jitter

Basic Histogram

Toggle Notes and Options
x = randn(500) # normally distributed vector
data = ["x"=> x,
	"type"=> "histogramx"]
response = Plotly.plot([data])
url = response["url"]
filename = response["filename"]

Basic Histogram

Stacked Histogram

Toggle Notes and Options
x0 = randn(500)
x1 = randn(500)+1
data0 = ["x"=> x0,
	"type"=> "histogramx"]
data1 = ["x"=> x1,
	"type"=> "histogramx"]
layout = ["barmode"=> "stack"] options
response = Plotly.plot([data0, data1], ["layout"=>layout])
url = response["url"]
filename = response["filename"]

Stacked Histogram

Overlaid Histogram

Toggle Notes and Options
[...] # data0, data1 from the above example
layout = ["barmode"=> "overlay"]  options
response = Plotly.plot([data0, data1], ["layout"=>layout])
url = response["url"]
filename = response["filename"]

Overlaid Histogram

Styling Histograms

Toggle Notes and Options
x0 = randn(500)
x1 = randn(500)+1
data0 = ["x"=> x0,
  "type"=> "histogramx",
  "name"=> "control",
  "marker"=>[note
    "color"=> "fuchsia",options
    "opacity"=> 0.75,
    "line"=> ["color"=> "grey",note
      "width"=> 0]],
  "autobinx"=> false,
  "xbins"=>[
    "start"=> -3.2,
    "end"=> 2.8,
    "size"=> 0.2],
  "histnorm"=> "count"options
]
data1 = ["x"=> x1,
  "name"=> "experiment",
  "type"=> "histogramx",
  "marker"=>[
    "color"=> "rgb(255, 217, 102)",
    "opacity"=> 0.75],
  "autobinx"=> false,
  "xbins"=>[
    "start"=> -1.8,
    "end"=> 4.2,
    "size"=> 0.2]]
layout = ["barmode"=> "overlay",options
  "bargap"=> 0.25,note
  "bargroupgap"=> 0.3,note
  "bardir"=> "v",options
  "title"=> "Sampled Results",
  "xaxis"=> ["title"=> "Value"],
  "yaxis"=> ["title"=> "Count"]]
response = Plotly.plot([data0, data1], ["layout"=>layout])
url = response["url"]
filename = response["filename"]

Styling Histograms

2D Histogram

Toggle Notes and Options
x = randn(500)
y = randn(500)+1
data = ["x"=> x, "y"=> y,
	"type"=> "histogram2d"]
response = Plotly.plot([data])
url = response["url"]
filename = response["filename"]

2D Histogram

2D Histogram Options

Toggle Notes and Options
x = randn(500)
y = randn(500)+1
data = ["x"=> x,
	"y"=> y,
	"type"=> "histogram2d",
	"autobinx"=> false,
	"xbins"=> [
		"start"=> -3,
		"end"=> 3,
		"size"=> 0.1
	],
	"autobiny"=> false,
	"ybins"=> [
		"start"=> -2.5,
		"end"=> 4,
		"size"=> 0.1
	],
	"scl"=> {[0,"rgb(12,51,131)"],
		[0.25,"rgb(10,136,186)"],
		[0.5,"rgb(242,211,56)"],
		[0.75,"rgb(242,143,56)"],
		[1,"rgb(217,30,30)"]},
	"histnorm"=> "probability"
]

layout =  [
	"xaxis"=>[
		"range"=>[-2,2],
		"autorange"=>false
	],"yaxis"=>[
		"range"=>[-1,3],
		"autorange"=>false
		],
	"width"=>520,"height"=>380,
	"autosize"=>false
	]

response = Plotly.plot([data],["layout"=>layout])
url = response["url"]
filename = response["filename"]

2D Histogram Options

Basic Heatmap

Toggle Notes and Options
z = {[1., 20., 30 ],
     [20., 1., 60 ],
     [30., 60., 1.]}
data = ["z"=> z,
	"type"=> "heatmap"]
response = Plotly.plot([data])
url = response["url"]
filename = response["filename"]

Basic Heatmap

Labelled Heatmap

Toggle Notes and Options
x = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
y = ["Morning", "Afternoon", "Evening"]
z = {[1., 20., 30, 50, 1],
     [20., 1., 60, 80, 30 ],
     [30., 60., 1., -10, 20]}
data = ["x"=> x,
	"y"=> y,
	"z"=> z,
	"type"=> "heatmap"]
response = Plotly.plot([data])
url = response["url"]
filename = response["filename"]

Labelled Heatmap

Bar Chart with Line Plot

Toggle Notes and Options
x0 = linspace(0, 5, 15)
y0 = sin(x0) + rand(15)
data0 = ["x"=> x0,"y"=> y0,
	"type"=> "scatter"]

x1 = [0, 1, 2, 3, 4, 5]
y1 = [1, 0.5, 0.7, -1.2, 0.3, 0.4]
data1 = ["x"=> x1,"y"=> y1,
	"type"=> "bar"]

response = Plotly.plot([data0, data1])
url = response["url"]
filename = response["filename"]

Bar Chart with Line Plot

2D Histogram with Scatter Overlay

Toggle Notes and Options
using Distributions

x0 = randn(100)/5. + 0.5
y0 = randn(100)/5. + 0.5

x1=[rand(Distributions.Rayleigh()) for x=1:80]/7. + 0.1
y1=[rand(Distributions.Rayleigh()) for x=1:80]/8. + 1.1

y = cat(1,y0,y1])
x = cat(1,x0,x1)

data0 = ["x"=> x0, "y"=> y0,
  "marker"=>["symbol"=>"circle"],
  "type"=> "scatter", "mode"=> "markers"]
data1 = ["x"=> x1, "y"=> y1,
  "marker"=>["symbol"=>"cross"],
  "type"=> "scatter", "mode"=> "markers"]

data_hist = ["x"=> x, "y"=> y,
  "type"=>"histogram2d"]

response = Plotly.plot([data0,data1,data_hist])
url = response["url"]
filename = response["filename"]

2D Histogram with Scatter Overlay

Legend Visibility

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,3,6,4,5,2,3,5,4]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,7,8,3,6,3,3,4]

Plotly.plot([[x y] [x2 y2]])

layout = [
  "showlegend"=>false, # Legend visibility defaults to true when there is more than once trace.
]

response = Plotly.layout(layout)
url = response["url"]
filename = response["filename"]

Legend Visibility

Legend Position Inside

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,3,6,4,5,2,3,5,4]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,7,8,3,6,3,3,4]

Plotly.plot([[x y] [x2 y2]])

# Position the legend inside the graph by assigning x and y values of <= 1.
# e.g :
# ["x" => 0, "y" => 0] -- Bottom Left
# ["x" => 1, "y" => 0] -- Bottom Right
# ["x" => 1, "y" => 1] -- Top Right
# ["x" => 0, "y" => 1] -- Top Left
# ["x" => .5, "y" => 0] -- Bottom Center
# ["x" => .5, "y" => 1] -- Top Center


legendstyle = ["x" => 1, "y" => 1]

# place legend into layout
layoutstyle = ["legend"=> legendstyle]

response = Plotly.layout(layoutstyle)
url = response["url"]
filename = response["filename"]

Legend Position Inside

Legend Position Outside

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,3,6,4,5,2,3,5,4]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,7,8,3,6,3,3,4]

Plotly.plot([[x y] [x2 y2]])

# Position the legend outside of the graph by assigning one of the x and y values to either 100 or -100.
# e.g :
# ["x" => 100, "y" => 0] -- Outside Right Bottom
# ["x" => 100, "y" => 1] -- Outside Right Top
# ["x" => 100, "y" => .5] -- Outside Right Middle
# ["x" => 0, "y" => -100] -- Under Left
# ["x" => 0.5, "y" => -100] -- Under Center
# ["x" => 1, "y" => -100] -- Under Right


legendstyle = ["x" => 100, "y" => 1]

# place legend into layout
layoutstyle = ["legend"=> legendstyle]

response = Plotly.layout(layoutstyle)
url = response["url"]
filename = response["filename"]

Legend Position Outside

Styling the Legend

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,3,6,4,5,2,3,5,4]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,7,8,3,6,3,3,4]

Plotly.plot([[x y] [x y2]])

legendstyle = [
  "x" => 0,
  "y" => 1,
  "bgcolor" => "#E2E2E2",
  "bordercolor" => "#FFFFFF",
  "borderwidth" => 2,
  "traceorder" => "normal",
  "font" => [
    "color" => "#000",
    "family" => "sans-serif",
    "size" => 12
    ]
]


# place legend into layout
layoutstyle = ["legend"=> legendstyle]

response = Plotly.layout(layoutstyle)
url = response["url"]
filename = response["filename"]

Styling the Legend

Legend Labels

Toggle Notes and Options
trace0  = [
  "x"=> [0,1,2,3],
  "y"=> [0,2,4,6],
  "name"=> "Blue Trace"
]

trace1 = [
  "x"=> [0,1,2,3],
  "y"=> [8,4,2,0],
  "name"=> "Orange Trace"
]

Plotly.plot([trace0, trace1])

Legend Labels

Basic Text Chart

Toggle Notes and Options
trace1 = [
      "x"=> [0,1,2], "y"=> [1,1,1],
      "name"=> "Lines, Markers and Text",
      "text"=> ["Text A", "Text B", "Text C"],
      "type"=> "scatter",
      "mode"=> "lines+markers+text",
      "textposition"=> "top"
    ]
trace2 =  [
      "x"=> [0,1,2], "y"=> [2,2,2],
      "name"=> "Markers and Text",
      "text"=> ["Text D", "Text E", "Text F"],
      "type"=> "scatter",
      "mode"=> "markers+text",
      "textposition"=> "bottom"
    ]
trace3 =  [
      "x"=> [0,1,2], "y"=> [3,3,3],
      "name"=> "Lines and Text",
      "text"=> ["Text G", "Text H", "Text I"],
      "type"=> "scatter",
      "mode"=> "lines+text",
      "textposition" => "bottom"
    ]

Plotly.plot([trace1, trace2, trace3])

#hide legend
layout = [
  "showlegend"=>false,
]

response = Plotly.layout(layout)
url = response["url"]
filename = response["filename"]

Basic Text Chart

Styling Text Charts

Toggle Notes and Options
trace1 = [
      "x"=> [0,1,2], "y"=> [1,1,1],
      "name"=> "Lines, Markers and Text",
      "text"=> ["Text A", "Text B", "Text C"],
      "type"=> "scatter",
      "mode"=> "lines+markers+text",
      "textposition"=> "top",
      "textfont" => [
        "color"=> "#1f77b4",
        "family"=> "sans serif",
        "size"=> 18
      ]
    ]
trace2 = [
      "x"=> [0,1,2], "y"=> [2,2,2],
      "name"=> "Lines and Text",
      "text"=> ["Text G", "Text H", "Text I"],
      "type"=> "scatter",
      "mode"=> "lines+markers+text",
      "textposition" => "bottom",
      "textfont" => [
        "color"=> "#1f77b4",options
        "family"=> "sans serif",options
        "size"=> 18
      ]
    ]

Plotly.plot([trace1,trace2])

#hide legend
layout = [
  "showlegend"=>false,
]

response = Plotly.layout(layout)
url = response["url"]
filename = response["filename"]

Styling Text Charts

Axes Booleans

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]

axesstyle = [
      "autorange" => true,
      "autotick" => true,
      "showgrid" => false,
      "showline" => false,note
      "showticklabels" => false,
      "zeroline" => false,
      "ticks" => ""options
]

layout = [
    "xaxis" => axesstyle,
    "yaxis" => axesstyle,
    "showlegend" => false
]


response = Plotly.plot([[x y] [x2 y2]], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Axes Booleans

Linear and Log Axes

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]


axesstyle = [
    "autorange" => true,
    "type" => "log",options
]

layout = [
    "xaxis" => axesstyle,
    "yaxis" => axesstyle,
    "showlegend" => false
]

response = Plotly.plot([[x y] [x2 y2]], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Linear and Log Axes

Manual Range

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]


axesstyle = [
    "range" => [2,5]options
]

layout = [
    "xaxis" => axesstyle,
    "yaxis" => axesstyle,
]


response = Plotly.plot([[x y] [x2 y2]], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Manual Range

Range Mode

Toggle Notes and Options
x = [2,4,6]
y = [-3,0,3]


layout = [
    "showlegend" => false,
    "xaxis" => [
        "autorange" => true,
        "rangemode" => "tozero"options
    ],
    "yaxis" => [
        "autorange" => true,
        "rangemode" => "nonnegative"options
    ]
]


response = Plotly.plot([x y], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Range Mode

Axes Lines

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]


axesstyle = [
    "showline" => true,note
    "mirror" => "ticks",optionsnote
    "linecolor" => "#636363",options
    "linewidth" => 6,

    "showgrid" => true,note
    "gridcolor" => "#bdbdbd",options
    "gridwidth" => 2,

    "zeroline" => true,note
    "zerolinecolor" => "#969696",options
    "zerolinewidth" => 4
]

layout = [
  "xaxis" => axesstyle,
  "yaxis" => axesstyle,
]


response = Plotly.plot([[x y] [x2 y2]], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Axes Lines

Axes Ticks

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]

axesstyle = [
      "autotick" => false,
      "tick0" => 0,note
      "dtick" => .25,note
      "ticks" => "outside",options
      "tickcolor" => "#000",options
      "ticklen" => 8,note
      "tickwidth" => 4
]

layout = [
  "xaxis" => axesstyle,
  "yaxis" => axesstyle,
]

response = Plotly.plot([[x y] [x2 y2]], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Axes Ticks

Axes Labels

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [8,7,6,5,4,3,2,1,0]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,1,2,3,4,5,6,7,8]

axesstyle = [
        "title" => "AXIS TITLE",

      "titlefont" => [
        "color" => "lightgrey",options
        "family" => "Arial, sans-serif",options
        "size" => 18
      ],

      "showticklabels" => true,
      "tickfont" => [
        "color" => "black",options
        "family" => "Old Standard TT, serif",options
        "size" => 14
      ],

      "tickangle" => 45,options

      "showexponent" => "All",options
      "exponentformat" => "e",options
]

layout = [
  "xaxis" => axesstyle,
  "yaxis" => axesstyle,
]

response = Plotly.plot([[x y] [x2 y2]], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Axes Labels

Reversed Axes

Toggle Notes and Options
x = [1,2]
y = [1,2]

layout = [
    "xaxis"=> [
      "autorange"=> "reversed"
    ]
]

response = Plotly.plot([x y], ["filename" => "myplotlygraph2", "layout" => layout])
url = response["url"]

Reversed Axes

Date Axes

Toggle Notes and Options
#Plotly understands dates and times in format YYYY-MM-DD HH:MM:SS (ie, 2009-10-04 22:23:00)

x = ["2013-10-04 22:23:00", "2013-11-04 22:23:00", "2013-12-04 22:23:00"];
y = [1,3,6];

data = ["x"=> x, "y"=> y]

response = Plotly.plot([data])
url = response["url"]
filename = response["filename"]

Date Axes

Simple Double Axes

Toggle Notes and Options
data = [
   [
   "x"=>[1,2,3],
   "y"=>[40,50,60],
   "name"=>"yaxis data"
   ],
   [
   "x"=>[2,3,4],
   "y"=>[4,5,6],
   "yaxis"=>"y2", # this will reference the yaxis2 object in the layout object
   "name"=> "yaxis2 data"
   ]
];
layout = [
   "yaxis"=>[
      "title"=> "yaxis title", # optional
   ],
   "yaxis2"=>[
      "title"=> "yaxis2 title", # optional
      "titlefont"=>[
         "color"=>"rgb(148, 103, 189)"
      ],
      "tickfont"=>[
         "color"=>"rgb(148, 103, 189)"
      ],
      "overlaying"=>"y",
      "side"=>"right",
   ],
   "title"=> "Double Y Axis Example",
]


response = Plotly.plot([data], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Simple Double Axes

Simple Multiple Axes

Toggle Notes and Options
c = [
      "#1f77b4", # muted blue
      "#ff7f0e", # safety orange
      "#2ca02c", # cooked asparagus green
      "#d62728", # brick red
      "#9467bd", # muted purple
      "#8c564b", # chestnut brown
      "#e377c2", # raspberry yogurt pink
      "#7f7f7f", # middle gray
      "#bcbd22", # curry yellow-green
      "#17becf"]; #blue-teal

data = [
    [
    "x"=>[1,2,3],
    "y"=>[4,5,6],
    "name"=>"yaxis1 data"
   ],
   [
      "x"=>[2,3,4],
      "y"=>[40,50,60],
      "name"=>"yaxis2 data",
      "yaxis"=>"y2" # this references the "yaxis2" object in layout
   ],
   [
      "x"=>[3,4,5],
      "y"=>[400,500,600],
      "name"=>"yaxis3 data",
      "yaxis"=>"y3"
    ],
    [
    "x"=>[4,5,6],
    "y"=>[40000,50000,60000],
    "name"=>"yaxis4 data",
    "yaxis"=>"y4"
   ],
    [
    "x"=>[5,6,7],
    "y"=>[400000,500000,600000],
    "name"=>"yaxis5 data",
    "yaxis"=>"y5"
   ],
    [
    "x"=>[6,7,8],
    "y"=>[4000000,5000000,6000000],
    "name"=>"yaxis6 data",
    "yaxis"=>"y6"
   ],
]

layout = [
    "width"=>800,
    "xaxis"=>[
        "domain"=>[0.3,0.7]
    ],
   "yaxis"=>[
      "title"=> "yaxis title",
      "titlefont"=>[
         "color"=>c[1]
      ],
      "tickfont"=>[
         "color"=>c[1]
      ],
   ],
   "yaxis2"=>[
      "overlaying"=>"y",
      "side"=>"left",
      "anchor"=>"free",
      "position"=>0.15,

      "title"=> "yaxis2 title",
      "titlefont"=>[
         "color"=>c[2]
      ],
      "tickfont"=>[
         "color"=>c[2]
      ],
   ],
   "yaxis3"=>[
      "overlaying"=>"y",
      "side"=>"left",
      "anchor"=>"free",
      "position"=>0,

      "title"=> "yaxis3 title",
      "titlefont"=>[
         "color"=>c[3]
      ],
      "tickfont"=>[
         "color"=>c[3]
      ],
   ],

   "yaxis4"=>[
      "overlaying"=>"y",
      "side"=>"right",
      "anchor"=>"x",

      "title"=> "yaxis4 title",
      "titlefont"=>[
         "color"=>c[4]
      ],
      "tickfont"=>[
         "color"=>c[4]
      ],
   ],

   "yaxis5"=>[
      "overlaying"=>"y",
      "side"=>"right",
      "anchor"=>"free",
      "position"=>0.85,

      "title"=> "yaxis5 title",
      "titlefont"=>[
         "color"=>c[5]
      ],
      "tickfont"=>[
         "color"=>c[5]
      ],
   ],

   "yaxis6"=>[
      "overlaying"=>"y",
      "side"=>"right",
      "anchor"=>"free",
      "position"=>1.0,

      "title"=> "yaxis6 title",
      "titlefont"=>[
         "color"=>c[6]
      ],
      "tickfont"=>[
         "color"=>c[6]
      ],
    ],
    "title"=> "multiple y-axes example"
]



response = Plotly.plot([data], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Simple Multiple Axes

Simple Subplot

Toggle Notes and Options
data = [
    [
    "x"=>[1,2,3],
    "y"=>[4,5,6],
   ],
   [
      "x"=>[20,30,40],
      "y"=>[50,60,70],
      "xaxis"=>"x2",
      "yaxis"=>"y2"
   ]
]

layout = [
    "xaxis"=>[
        "domain"=>[0,0.45] # i.e. let the first x-axis span the first 45% of the plot width
    ],
    "xaxis2"=>[
        "domain"=>[0.55,1] # i.e. let the second x-axis span the latter 45% of the plot width
    ],
    "yaxis2"=>[
        "anchor"=>"x2" # i.e. bind the second y-axis to the start of the second x-axis
    ]
]

response = Plotly.plot([data], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Simple Subplot

Custom Sized Subplot

Toggle Notes and Options
data = [
    [
    "x"=>[1,2,3],
    "y"=>[4,5,6],
   ],
   [
      "x"=>[20,30,40],
      "y"=>[50,60,70],
      "xaxis"=>"x2",
      "yaxis"=>"y2"
   ]
]

layout = [
    "xaxis"=>[
        "domain"=>[0,0.7] # i.e. let the first x-axis span the first 70% of the plot width
    ],
    "xaxis2"=>[
        "domain"=>[0.8,1] # i.e. let the second x-axis span the latter 20% of the plot width
    ],
    "yaxis2"=>[
        "anchor"=>"x2" # i.e. bind the second y-axis to the start of the second x-axis
    ]
]

response = Plotly.plot([data], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Custom Sized Subplot

Multiple Subplots

Toggle Notes and Options
data = [
    [
    "x"=>[1,2,3],
    "y"=>[4,5,6],
   ],
   [
      "x"=>[20,30,40],
      "y"=>[50,60,70],
      "xaxis"=>"x2",
      "yaxis"=>"y2"
   ],
   [
      "x"=>[300,400,500],
      "y"=>[600,700,800],
      "xaxis"=>"x3",
      "yaxis"=>"y3"
   ],
   [
      "x"=>[4000,5000,6000],
      "y"=>[7000,8000,9000],
      "xaxis"=>"x4",
      "yaxis"=>"y4"
   ]
]

layout = [
    "xaxis"=>[
        "domain"=>[0,0.45] # let the first x-axis span the first 45% of the plot width
    ],
    "yaxis"=>[
        "domain"=>[0,0.45] # # and let the first y-axis span the first 45% of the plot height
    ],
    "xaxis2"=>[
        "domain"=>[0.55,1] # and let the second x-axis span the latter 45% of the plot width
    ],
    "yaxis2"=>[
        "domain"=>[0,0.45], # and let the second y-axis span the first 45% of the plot height
        "anchor"=>"x2" # bind the horizontal position of the second y-axis to the start of the second x-axis
    ],
    "xaxis3"=>[
        "domain"=>[0,0.45],
        "anchor"=>"y3" # bind the vertical position of this axis to the start of yaxis3
    ],
    "yaxis3"=>[
        "domain"=>[0.55,1],
    ],
    "xaxis4"=>[
        "domain"=>[0.55,1],
        "anchor"=>"y4", # bind the vertical position of this axis to the start of yaxis4
    ],
    "yaxis4"=>[
        "domain"=>[0.55,1],
        "anchor"=>"x4" # bind the horizontal position of this axis to the start of xaxis4
    ]
]

response = Plotly.plot([data], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Multiple Subplots

Subplots with Shared Axes

Toggle Notes and Options
data = [
    [
    "x"=>[1,2,3],
    "y"=>[2,3,4],
   ],
   [
      "x"=>[20,30,40],
      "y"=>[5,5,5],
      "xaxis"=>"x2",
      "yaxis"=>"y"
   ],
   [
      "x"=>[2,3,4],
      "y"=>[600,700,800],
      "xaxis"=>"x",
      "yaxis"=>"y3"
   ],
   [
      "x"=>[4000,5000,6000],
      "y"=>[7000,8000,9000],
      "xaxis"=>"x4",
      "yaxis"=>"y4"
   ]
]

layout = [
    "xaxis"=>[
        "domain"=>[0,0.45] # let the first x-axis span the first 45% of the plot width
    ],
    "yaxis"=>[
        "domain"=>[0,0.45] # and let the first y-axis span the first 45% of the plot height
    ],
    "xaxis2"=>[
        "domain"=>[0.55,1] # and let the second x-axis span the latter 45% of the plot width
    ],
    "yaxis3"=>[
        "domain"=>[0.55,1],
    ],
    "xaxis4"=>[
        "domain"=>[0.55,1],
        "anchor"=>"y4", # bind the vertical position of this axis to the start of yaxis4
    ],
    "yaxis4"=>[
        "domain"=>[0.55,1],
        "anchor"=>"x4" # bind the horizontal position of this axis to the start of xaxis4
    ]
]

response = Plotly.plot([data], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Subplots with Shared Axes

Stacked Subplots

Toggle Notes and Options
data = [
    ["x"=> [0,1,2], "y"=> [10,11,12]],
    ["x"=> [2,3,4], "y"=> [100,110,120], "yaxis"=> "y2", "xaxis"=> "x2"],
    ["x"=> [3,4,5], "y"=> [1000,1100,1200], "yaxis"=> "y3", "xaxis"=> "x3"]
]

layout=[
    "yaxis"=> ["domain"=> [0,0.8/3.]],
    "yaxis2"=> ["domain"=>[0.8/3+0.1,2*0.8/3+0.1]],
    "yaxis3"=> ["domain"=>[2*0.8/3+0.2,1]],
    "xaxis2"=> ["anchor"=>"y2"],
    "xaxis3"=> ["anchor"=>"y3"],
    "legend"=> ["traceorder"=> "reversed"]
]


response = Plotly.plot([data], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Stacked Subplots

Stacked Subplots with Coupled X-Axis

Toggle Notes and Options
data = [
    ["x"=> [0,1,2], "y"=> [10,11,12]],
    ["x"=> [2,3,4], "y"=> [100,110,120], "yaxis"=> "y2"],
    ["x"=> [3,4,5], "y"=> [1000,1100,1200], "yaxis"=> "y3"]
]

layout=[
    "yaxis"=> ["domain"=> [0,1./3.]],
    "yaxis2"=> ["domain"=>[1./3,2./3.]],
    "yaxis3"=> ["domain"=>[2./3.,1]],
    "legend"=> ["traceorder"=> "reversed"]
]

response = Plotly.plot([data], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Stacked Subplots with Coupled X-Axis

Simple Inset

Toggle Notes and Options
data = [
    [
    "x"=>[1,2,3],
    "y"=>[4,3,2],
   ],
   [
      "x"=>[20,30,40],
      "y"=>[30,40,50],
      "xaxis"=>"x2",
      "yaxis"=>"y2"
   ]
]
layout = [
    "xaxis2"=> [
        "domain"=> [0.6, 0.95],
        "anchor"=> "y2"
    ],
    "yaxis2"=>[
        "domain"=> [0.6, 0.95],
        "anchor"=> "x2"
    ]
]

response = Plotly.plot([data], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Simple Inset

Plot and Margin Size

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,2,3,4,5,6,7,8]

layout = [
          "autosize"=> false,
          "height"=> 500,
          "width"=> 500,
          "margin"=> [
                    "t"=>100,
                    "b"=>100,
                    "r"=>50,
                    "l"=>50,
                    "pad"=>4 # space between border and gridlines
                  ],
          "plot_bgcolor"=> "#c7c7c7",
          "paper_bgcolor"=> "#7f7f7f"
]

response = Plotly.plot([x y], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Plot and Margin Size

Global Font

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,2,3,4,5,6,7,8]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [1,0,3,2,5,4,7,6,8]

layout = ["title"=> "Global Font",
          "font"=> ["color"=> "#7f7f7f",
                   "family"=> "Courier New, monospace",
                   "size"=> 18]
]

response = Plotly.plot([x y x2 y2], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Global Font

Titles, Axes Names and Trace Names

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,2,3,4,5,6,7,8]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [1,0,3,2,5,4,7,6,8]

data = [
     ["x"=> x,
     "y"=> y,
     "name"=>"Name of Trace 1"
     ],
     ["x"=> x2,
     "y"=> y2,
     "name"=>"Name of Trace 2"
     ]
]

layout = [

     "title"=> "Plot Title",
     "xaxis"=> [
          "title"=>"x Axis",
          "titlefont"=> [
               "color"=>"#7f7f7f",
               "family"=>"Courier New, monospace",
               "size"=>18
          ]
     ],
     "yaxis"=> [
          "title"=>"y Axis",
          "titlefont"=> [
               "color"=>"#7f7f7f",
               "family"=>"Courier New, monospace",
               "size"=>18
          ]
     ]
]

response = Plotly.plot([data], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Titles, Axes Names and Trace Names

Simple Annotation

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,3,2,4,3,4,6,5]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,5,1,2,2,3,4,2]


layout = [
    "showlegend"=> false,
    "annotations"=> [[
        "text"=> "Annotation Text",
        "xref"=> "x",
        "yref"=> "y",
        "x"=> 2,
        "y"=> 5,
        "ax"=> 0,
        "ay"=> -40,
        "showarrow"=> true,
        "arrowhead"=> 7
    ]]
]

response = Plotly.plot([x y x2 y2], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Simple Annotation

Multiple Annotations

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,3,2,4,3,4,6,5]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,5,1,2,2,3,4,2]


layout = [
    "showlegend"=> false,
    "annotations"=> [[
        "text"=> "Annotation Text",
        "xref"=> "x",
        "yref"=> "y",
        "x"=> 2,
        "y"=> 5,
        "ax"=> 0,
        "ay"=> -40,
        "showarrow"=> true,
        "arrowhead"=> 7
    ],
    [
        "text"=> "Annotation Text 2",
        "xref"=> "x",
        "yref"=> "y",
        "x"=> 4,
        "y"=> 4,
        "ax"=> 0,
        "ay"=> -40,
        "showarrow"=> true,
        "arrowhead"=> 7
    ]]
]

response = Plotly.plot([x y x2 y2], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Multiple Annotations

Styling Annotations

Toggle Notes and Options
x = [0,1,2,3,4,5,6,7,8]
y = [0,1,3,2,4,3,4,6,5]
x2 = [0,1,2,3,4,5,6,7,8]
y2 = [0,4,5,1,2,2,3,4,2]


layout = [
    "showlegend"=> false,
    "annotations"=> [[
        "text"=> "max=5",
        "xref"=> "x",
        "yref"=> "y",
        "x"=> 2,
        "y"=> 5,
        "ax"=> 20,
        "ay"=> -30,
        "arrowhead"=> 2,
        "arrowsize"=> 1,
        "arrowwidth"=> 2,
        "arrowcolor"=> "#636363",
        "bgcolor"=> "#ff7f0e",
        "bordercolor"=> "#c7c7c7",
        "borderpad"=> 4,
        "borderwidth"=> 2,
        "font"=> [
            "color"=> "#ffffff",
            "family"=> "Courier New, monospace",
            "size"=> 16
        ],
        "opacity"=> 0.8,
        "showarrow"=> true,
        "align"=> "center"
    ]]
]


response = Plotly.plot([x y x2 y2], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Styling Annotations

Simple Bubblechart

Toggle Notes and Options
data = [
    ["x"=> [1,2,3,4],
     "y"=> [10,11,12,13],
     "marker"=>[
        "size"=> [12, 22, 32, 42], # diameter
        "color"=> ["hsl(0,100,40)", "hsl(33,100,40)", "hsl(66,100,40)", "hsl(99,100,40)"],
        "opacity"=>[.60, .70, .80, .90],
     ],
     "mode"=> "markers"
     ],
     ["x"=> [1,2,3,4],
     "y"=> [11,12,13,14],
     "marker"=>[
        "color"=> "rgb(31, 119, 180)",
        "size"=> 18,
        "symbol"=> ["circle", "square", "diamond", "cross"]
     ],
     "mode"=> "markers"
     ],
     ["x"=> [1,2,3,4],
     "y"=> [12,13,14,15],
     "marker"=>[
        "size"=> 18,
        "line"=>[
            "color"=> ["rgb(120,120,120)", "rgb(120,120,120)", "red", "rgb(120,120,120)"],
            "width"=> [2, 2, 6, 2]
        ]
     ],
     "mode"=> "markers"
     ]
]

layout = [
    "showlegend"=> false
]

response = Plotly.plot([data], ["layout" => layout])
url = response["url"]
filename = response["filename"]

Simple Bubblechart

Private Graph

Toggle Notes and Options
x = [0,2,4]
y = [0,4,2]

response = Plotly.plot([x y], ["world_readable" => false])
url = response["url"]
filename = response["filename"]

Private Graph

Public Graph

Toggle Notes and Options
x = [0,2,4]
y = [0,4,2]

response = Plotly.plot([x y], ["world_readable" => true])
url = response["url"]
filename = response["filename"]

Public Graph

File Naming

Toggle Notes and Options
x = [0,2,4]
y = [0,4,2]

response = Plotly.plot([x y], ["filename" => 'myplotlygraph'])
#or
response = Plotly.plot([x y], ["filename" => 'myfolder/myplotlygraph'])
url = response["url"]
filename = response["filename"]
File Naming

Data Visibility

Toggle Notes and Options
data = [
trace0  = [
    "x"=> [0,1,2,3],
    "y"=> [0,2,4,6],
    "visible"=> true
    ],

trace1 = [
    "x"=> [0,1,2,3],
    "y"=> [8,4,2,0],
    "visible"=> false
    ]
 ]

response = Plotly.plot([data])
url = response["url"]
filename = response["filename"]
Data Visibility

New Graph

Plotly.plot({[1,2], [3,4]},
    ["filename"=>"new plot",
    "fileopt"=>"new"])

API RESPONSE:

["url"=>"http://plot.ly/~demos/1056",
"filename"=>"new plot",
"error"=>"","message"=>"",
"warning"=>""]
Plotly.plot({[1,2], [3,4]},
    ["filename"=>"new plot",
    "fileopt"=>"new"])
Check out the filename and url in the responses. We specified the same filename in both calls, but since we used the fileopt 'new', our second call appended '(1)' to the filename and created a new unique url for that graph. The first graph was not overwritten.

API RESPONSE:

["url"=>"http://plot.ly/~demos/1057",
"filename"=>"new plot (1)",
"error"=>"","message"=>"",
"warning"=>""]

Overwrite

The overwrite option will save the plot with the specified filename no matter what. If a plot already exists under the same name, it will overwrite it and create a revision. If the plot with that filename doesn't exist, it will create it!
Plotly.plot({[1,2], [3,4]},
    ["filename"=>"same plot",
    "fileopt"=>"overwrite"])

API RESPONSE:

["url"=>"http://plot.ly/~demos/1055",
"filename"=>"same plot",
"error"=>"","message"=>"",
"warning"=>""]
Plotly.plot({[10,20], [30,40]},
    ["filename"=>"same plot",
    "fileopt"=>"overwrite"])

API RESPONSE:

["url"=>"http://plot.ly/~demos/1055",
"filename"=>"same plot",
"error"=>"","message"=>"",
"warning"=>""]

Append

The "append" fileopt will append the data that you supplied as new traces. If the filename doesn't exist, it will create a new file with that data.
Plotly.plot({[1,2], [1,2]},
    ["filename"=>"append plot",
    "fileopt"=>"append"])
Here we're starting with one trace.
Plotly.plot({[1,2], [3,4]},
    ["filename"=>"append plot",
    "fileopt"=>"append"])
Here we are appending a new trace with points (1,3) and (2,4).
Plotly.plot({[1,2], [4,5], [1,2], [5,6]},
    ["filename"=>"append plot",
    "fileopt"=>"append"])
Here we are appending two new traces at points (1,4), (2,5) and (1,5), (2,6).

Extend

The "extend" fileopt will extend existing traces with your new data.
Plotly.plot({[1,2], [1, 2], [1, 2], [2, 3], [1, 2], [3, 4]},
    ["filename"=>"extend plot",
    "fileopt"=>"extend"])
If there is no data in the plot, 'extend' will create new traces.
Plotly.plot({[3,4], [2, 1], [3, 4], [3, 2], [3, 4], [4, 3]},
    ["filename"=>"extend plot",
    "fileopt"=>"extend"])
If there is data in the plot, the existing traces will be extended with the data in the order that it is supplied.
Plotly.plot({[4,5], [2, 3]},
    ["filename"=>"extend plot",
    "fileopt"=>"extend",
    "traces"=>[1]])
You can also choose which trace to extend with the "traces" kwarg. Here we extend the second trace. (traces=[1])
Plotly.plot({[5,6], [3,3], [4, 5], [1, 1]},
    ["filename"=>"extend plot",
    "fileopt"=>"extend",
    "traces"=>[2,0]])
The traces option accepts an array as an argument. Here we extend the 3rd trace in the plot with the first data set that we supply, and the 1st trace in the plot with the second data set.

Setting Style


A simple example:
Plotly.style([["type"=>"bar"], ["type"=>"scatter","marker"=>["symbol"=>"square", "color"=>"marker"]]])
This sets the first data trace to a bar chart and the second data trace to a scatter plot with purple square scatter points.

The general syntax is
Plotly.style({style1[,style2,...]}, opts::Dict)
stylei is a Plotly formatted Dict that customizes the style of the i'th trace. It is identical to the datai dictionaries used in Plotly.plot except that it doesn't contain the keys x or y.

opts is a Dict containing optional arguments. Accepted arguments are:
filename: filename of the plot inside your plotly account. If not specified, then the style is applied to the last plot that was made in your API session.
traces: a list that specifies which traces to style. If not specified, then traces are styled in the order of the data dicts or, if supplied, applied to the trace specified by the datai["name"] value.

Setting Layout

A simple example:
Plotly.layout(["title"=>"Hello World"])
This sets your plot's title to Hello World.
The general syntax is
Plotly.layout(layout, opts::Dict)
layout is a Plotly formatted layout Dict that customizes the style of the layout, the axes, and the legend.

opts is a Dict containing optional arguments. Accepted arguments are:
filename: filename of the plot inside your plotly account. If not specified, then the style is applied to the last plot that was made in your API session.

File Sharing

x = [0,2,4]
y = [0,4,2]

response = Plotly.plot([x y], ["filename" => 'lab_results/experiment1'])
url = response["url"]
filename = response["filename"]

When you share a folder in the Plotly tool, files created within that folder using the API are automatically shared.

In this case user demos has shared the folder lab_results with batman and robin.

When demos saves a file (experiment1 inside lab_results, batman

IFrames

Formal Syntax

A simple example:
Plotly.plot({[0,1],[10,11]})
The general plotting syntax is
Plotly.plot({x1, y1[,x2,y2,...]}, opts::Dict)
xi, yi are arrays with numbers or characters as elements. or
Plotly.plot({data1[,data2,...]}, **kwargs)
datai is a Plotly formatted data Dict that is at least ["x"=> xi, "y"=> xi] but can contain more styling and chart-type data. For example,
data1=["x"=>[0,1],"y"=>[10,11],"name"=>"Exp Results", "type"=>"scatter", "marker"=>["symbol"=>"square","color"=>"purple"]]
specifies a scatter trace with purple square data markers that is named Exp Results.

opts is a Dict containing optional arguments. Accepted arguments are:
filename: filename of the plot inside your plotly account
fileopt: file-options: 'new', 'overwrite', or 'append'
layout: a Plotly formatted layout dict describing layout options.
style: a Plotly formatted style dict describing the style of all the data traces.
world_readable: a boolean. If true, then the graph will be public. If false, then only you can see it. Default is true.

Basic Line Plot

Toggle Notes and Options
x0 <- c(1,2,3,4)
y0 <- c(10,15,13,17)
x1 <- c(2,3,4,5)
y1 <- c(16,5,11,9)
response <- p$plotly(x0, y0, x1, y1)
url <- response$url
filename <- response$filename
Basic Line Plot

Line with Scatter

Toggle Notes and Options
trace0 <- list(
  x = c(1,2,3,4),
  y = c(10,15,13,17),
  type = 'scatter',
  mode = 'markers')

trace1 <- list(
  x = c(2,3,4,5),
  y = c(16,5,11,9),
  type = 'scatter',
  mode = 'lines')

trace2 <- list(
  x = c(1,2,3,4),
  y = c(12,9,15,12),
  type = 'scatter',
  mode = 'lines+markers')

response <- p$plotly(trace0, trace1, trace2)
url <- response$url
filename <- response$filename
Line with Scatter

Styling Line and Scatter

Toggle Notes and Options
x1 <- c(1,2,3)
y1 <- c(4,5,6)
x2 <- c(1,2,3)
y2 <- c(2,10,12)

data1 <- list(
	x = x1,
	y = y1,
	name = 'Experiment',
	line = list(color='rgb(3,78,123)',
		width = 6,
		dash = 'dot'),
	marker = list(opacity=1.0,
		symbol = 'square',
		size = 12,
		color = 'rgb(54,144,192)',
		line = list(width=3,
			color = 'lightblue')))

data2 <- list(
	x = x2,
	y = y2,
	name = 'Control',
	line = list(
    color = 'purple',
		width = 4,
		dash = 'dashdot'),
	marker = list(
    opacity = 0.9,
		symbol = 'cross',
		size = 16,
		color = 'fuchsia',
		line = list(
      width = 0,
			color = '')))

response <- p$plotly(data1,data2)

# url and filename
url <- response$url
filename <- response$filename

Styling Line and Scatter

Basic Area Plot

Toggle Notes and Options
trace0 <- list(
  x = c(1,2,3,4),
  y = c(0,2,3,5),
  fill = 'tozeroy'); options

trace1 <- list(
  x = c(1,2,3,4),
  y = c(3,5,1,7),
  fill = 'tonexty');

response <- p$plotly(trace0, trace1)
url <- response$url
filename <- response$filename

Basic Area Plot

Basic Bar Chart

Toggle Notes and Options
x1 <- c('giraffes','orangutans','monkeys')note
y1 <- c(20,14,23)
data <- list(
x = x1,
y = y1,
type = 'bar')options

response <- p$plotly(data)

# url and filename
url <- response$url
filename <- response$filename

Basic Bar Chart

Grouped Bar Chart

Toggle Notes and Options
categories <- c('giraffes', 'orangutans', 'monkeys')

SF <- list(name='SF Zoo',
	x=categories,
	y=c(20, 14, 23),
	type='bar')

LA <- list(name='LA Zoo',
	x=categories,
	y=c(12,18,29),
	type='bar')

layout <- list(
	barmode='group',
	xaxis=list(type='category'),
	categories=categories)

response <- p$plotly(LA, SF, kwargs=list(layout=layout))
url <- response$url
filename <- response$filename

Grouped Bar Chart

Stacked Bar Chart

Toggle Notes and Options
[...]	# ... SF and LA data from above

layout <- list(
barmode='stack',  options
xaxis <- list(
type = 'category'),
categories = categories)

response <- p$plotly(SF, LA, kwargs=list(layout=layout))
url <- response$url
filename <- response$filename

Stacked Bar Chart

Styling Bar Charts

Toggle Notes and Options
categories <- list('giraffes', 'orangutans', 'monkeys')

SF <- list(name='SF Zoo',
  x = categories,
  y = c(20, 14, 23),
  type = 'bar',
  marker = list(
    color = 'orange',
    line = list(color = 'grey',
      width = 3)));

LA <- list(name = 'LA Zoo',
  x = categories,
  y = c(12,18,29),
  type = 'bar',
  marker = list(
    color = 'rgb(111, 168, 220)',
    line = list(
      color = 'grey',
      width = 3)))

layout <- list(
  title = 'Animal Population',
  barmode = 'group',
  yaxis = list(name='# of animals (thousands)'),
  xaxis = list(type='category'),
  categories = categories,
  bargap = 0.25,
  bargroupgap = 0.3,
  bardir = 'v')

response <- p$plotly(LA, SF, kwargs = list(layout=layout))
url <- response$url
filename <- response$filename

Styling Bar Charts

Basic Error Bars

Toggle Notes and Options
data <- list(
  x = c(0,1,2),
  y = c(6,10,2),
  error_y = list(
    type='data', options
    array = c(1,2,3),
    visible = TRUE));
response <- p$plotly(data);
url <- response$url
filename <- response$filename

Basic Error Bars

Percentage, Constant or Square Root

Toggle Notes and Options
data <- list(
  x = c(0,1,2),
  y = c(6,8,4),
  error_y = list(
    type = 'percent', options
    value = 50, note
    visible = TRUE));
response <- p$plotly(data);
url <- response$url
filename <- response$filename

Percentage, Constant or Square Root

Bar Chart with Error Bars

Toggle Notes and Options
categories <- c('Trial 1', 'Trial 2', 'Trial 3')
control <- list(
  x = categories,
  y = c(3, 6, 4),
  type = 'bar',
  name = 'Control',
  error_y = list(
    type='data',
    array = c(1, 0.5, 1.5),  note
    visible = TRUE))

exp <- list(
  x = categories,
  y = c(4, 7, 3),
  type = 'bar',
  name = 'Experiment',
  error_y = list(
    type='data',
    array = c(0.5, 1, 2),
    visible = TRUE));

layout <- list(barmode = 'group')

response <- p$plotly(control, exp, kwargs = list(layout=layout));
url <- response$url
filename <- response$filename

Bar Chart with Error Bars

Basic Box Plot

Toggle Notes and Options
box1 <- list(
  y = c(0,1,2,4),
  type = 'box')
box2 <- list(
  y = c(1,2,4,8),
 	type = 'box')

response <- p$plotly(list(box1,box2))
url <- response$url
filename <- response$filename

Basic Box Plot

Box Plot with Jitter

Toggle Notes and Options
box <- list(
  y = rnorm(50),
	type = 'box',
	boxpoints = 'all', options
	jitter = 0.3, note
	pointpos = -1.8) note

response <- p$plotly(list(box))
url <- response$url
filename <- response$filename

Box Plot with Jitter

Basic Histogram

Toggle Notes and Options
x <- rnorm(500) # normally distributed vector
data = list(
  x = x,
	type = 'histogramx');

response <- p$plotly(data);
url <- response$url
filename <- response$filename

Basic Histogram

Stacked Histogram

Toggle Notes and Options
x0 <- rnorm(500)
x1 <- rnorm(500)+1

data0 <- list(
  x = x0,
	type = 'histogramx')

data1 <- list(
  x = x1,
	type = 'histogramx')

layout <- list(barmode = 'stack') options

response <- p$plotly(data0, data1, kwargs=list(layout=layout))
url <- response$url
filename <- response$filename

Stacked Histogram

Overlaid Histogram

Toggle Notes and Options
[...] # data0, data1 from the above example

layout <- list(barmode = 'overlay')  options
response <- p$plotly(data0, data1, kwargs=list(layout=layout))
url <- response$url
filename <- response$filename

Overlaid Histogram

Styling Histograms

Toggle Notes and Options
x0 <- rnorm(500)
x1 <- rnorm(500)+1

data0 <- list(
  x = x0,
  type = 'histogramx',
  name = 'control',
  marker = list(  note
    color = 'fuchsia', options
    opacity = 0.75,
    line = list(
      color = 'grey',  note
      width = 0)),
  autobinx = FALSE,
  xbins = list(
    start = -3.2,
    end = 2.8,
    size = 0.2,
    histnorm = 'count')) options

data1 <- list(
  x = x1,
  name = 'experiment',
  type = 'histogramx',
  marker = list(
    color = 'rgb(255, 217, 102)',
    opacity = 0.75),
  autobinx = FALSE,
  xbins = list(
    start = -1.8,
    end = 4.2,
    size = 0.2))

layout <- list(
  barmode = 'overlay', options
  bargap = 0.25, note
  bargroupgap = 0.3, note
  bardir = 'v', options
  title = 'Sampled Results',
  xaxis = list(title='Value'),
  yaxis = list(title='Count'))

response <- p$plotly(data0, data1, kwargs=list(layout=layout))
url <- response$url
filename <- response$filename

Styling Histograms

2D Histogram

Toggle Notes and Options
x <- rnorm(500)
y <- rnorm(500)+1

data <- list(
  x = x,
  y = y,
	type = 'histogram2d')

response <- p$plotly(data)
url <- response$url
filename <- response$filename

2D Histogram

2D Histogram Options

Toggle Notes and Options
x <- rnorm(500);
y <- rnorm(500)+1;

data <- list(
  x = x,
  y = y,
  type = 'histogram2d',
  autobinx = FALSE,
  xbins = list(
    start = -3,
    end = 3,
    size = 0.5),
  autobiny = FALSE,
  ybins = list(
    start = -2.5,
    end = 4,
    size = 0.5),
  zauto = FALSE,
  zmin = 0,
  zmax = 0.4,
  histnorm = 'probability')options

response <- p$plotly(data)
url <- response$url
filename <- response$filename

2D Histogram Options

Basic Heatmap

Toggle Notes and Options
z <- matrix(c(10,20,30,20,1,60,30,60,1), nrow=3, ncol=3)
data <- list(
  z = z,
  type = 'heatmap')

response <- p$plotly(data)
url <- response$url
filename <- response$filename

Basic Heatmap

Labelled Heatmap

Toggle Notes and Options
x <- c('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday')
y <- c('Morning', 'Afternoon', 'Evening')
z <- matrix(c(10,20,30,50,1,20,1,60,80,30,30,60,1,-10,20), nrow=3, ncol=5)

data <- list(
  x = x,
  y = y,
  z = z,
  type = 'heatmap')

response <- p$plotly(data)
url <- response$url
filename <- response$filename

Labelled Heatmap

Bar Chart with Line Plot

Toggle Notes and Options
x0 <- seq(0, 5, len=15)
y0 <- sin(x0) + runif(15)
data0 <- list(
  x = x0,
  y = y0,
	type = 'scatter')

x1 <- c(0, 1, 2, 3, 4, 5)
y1 <- c(1, 0.5, 0.7, -1.2, 0.3, 0.4)

data1 <- list(
  x = x1,
  y = y1,
	type = 'bar')

response <- p$plotly(data0, data1)
url <- response$url
filename <- response$filename

Bar Chart with Line Plot

2D Histogram with Scatter Overlay

Toggle Notes and Options
x0 <- rnorm(100)/5. + 0.5;
y0 <- rnorm(100)/5. + 0.5;

x1 <- rnorm(80)/7. + 0.1;
y1 <- rnorm(80)/8. + 1.1;

x <- c(x0,x1);
y <- c(y0,y1);

data0 <- list(
  x = x0,
  y = y0,
  marker = list(symbol='circle'),
  type = 'scatter', mode='markers')
data1 <- list(
  x = x1,
  y = y1,
  marker = list(symbol='cross'),
  type = 'scatter', mode='markers')

data_hist <- list(
  x = x,
  y = y,
  type = 'histogram2d')

response <- p$plotly(data0,data1,data_hist)
url <- response$url
filename <- response$filename

2D Histogram with Scatter Overlay

Legend Visibility

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(0,3,6,4,5,2,3,5,4)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,4,7,8,3,6,3,3,4)

# By default, when there is more than one trace, showlegend is set to TRUE.
layout <- list(
  'showlegend' = FALSE
);

response <- p$plotly(x,y,x2,y2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename
Legend Visibility

Legend Position Inside

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(0,3,6,4,5,2,3,5,4)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,4,7,8,3,6,3,3,4)



# Position the legend inside the graph by assigning x and y values of <= 1.
# e.g =
# list("x" = 0, "y" = 0) -- Bottom Left
# list("x" = 1, "y" = 0) -- Bottom Right
# list("x" = 1, "y" = 1) -- Top Right
# list("x" = 0, "y" = 1) -- Top Left
# list("x" = .5, "y" = 0) -- Bottom Center
# list("x" = .5, "y" = 1) -- Top Center

legendstyle <- list("x" = 1, "y" = 1)

layoutstyle <- list(legend = legendstyle)


response <- p$plotly(x,y,x2,y2, kwargs=list(layout = layoutstyle));

# url and filename
url <- response$url
filename <- response$filename

Legend Position Inside

Legend Position Outside

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(0,3,6,4,5,2,3,5,4)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,4,7,8,3,6,3,3,4)


# Position the legend outside of the graph by assigning one of the x and y values to either 100 or -100.
# e.g =
# list("x" = 100, "y" = 0) -- Outside Right Bottom
# list("x" = 100, "y" = 1) -- Outside Right Top
# list("x" = 100, "y" = .5) -- Outside Right Middle
# list("x" = 0, "y" = -100) -- Under Left
# list("x" = 0.5, "y" = -100) -- Under Center
# list("x" = 1, "y" = -100) -- Under Right

legendstyle <- list("x" = 100, "y" = 1)

layoutstyle <- list(legend = legendstyle)

response <- p$plotly(x,y,x2,y2, kwargs=list(layout = layoutstyle));

# url and filename
url <- response$url
filename <- response$filename

Legend Position Outside

Styling the Legend

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(0,3,6,4,5,2,3,5,4)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,4,7,8,3,6,3,3,4)



legendstyle = list(
  "x" = 0,
  "y" = 1,
  "bgcolor" = "#E2E2E2",
  "bordercolor" = "#FFFFFF",
  "borderwidth" = 2,
  "traceorder" = "normal",
  "font" = list(
    "color" = "#000",
    "family" = "sans-serif",
    "size" = 12)
)


layoutstyle <- list(legend=legendstyle)

response <- p$plotly(x,y,x2,y2, kwargs=list(layout=layoutstyle));

# url and filename
url <- response$url
filename <- response$filename

Styling the Legend

Legend Labels

Toggle Notes and Options
trace0  = list(
    "x"<- c(0,1,2,3),
    "y"<- c(0,2,4,6),
    "name"= "Blue Trace"
    )

trace1 = list(
    "x"<- c(0,1,2,3),
    "y"<- c(8,4,2,0),
    "name" = "Orange Trace"
    )

response <- p$plotly(trace0, trace1);
# url and filename
url <- response$url
filename <- response$filename

Legend Labels

Basic Text Chart

Toggle Notes and Options
trace1 <- list(
      "x"<- c(0,1,2),
      "y"<- c(1,1,1),
      "name"= "Lines, Markers and Text",
      "text"<- c("Text A", "Text B", "Text C"),
      "type" = "scatter",
      "mode" = "lines+markers+text",
      "textposition" = "top"
    )
trace2 <- list(
      "x"<- c(0,1,2),
      "y"<- c(2,2,2),
      "name" = "Markers and Text",
      "text"<- c("Text D", "Text E", "Text F"),
      "type" = "scatter",
      "mode" = "markers+text",
      "textposition" = "bottom"
    )
trace3 <- list(
      "x"<- c(0,1,2),
      "y"<- c(3,3,3),
      "name"= "Lines and Text",
      "text"<- c("Text G", "Text H", "Text I"),
      "type" = "scatter",
      "mode" = "lines+text",
      "textposition" = "bottom"
    )

#hide legend
layout <- list(
  'showlegend' = FALSE
)

response <- p$plotly(trace1, trace2, trace3, kwargs = list(layout=layout));
url <- response$url
filename <- response$filename

Basic Text Chart

Styling Text Charts

Toggle Notes and Options
trace1 <- list(
      "x" = c(0,1,2),
      "y" = c(1,1,1),
      "name" = "Lines, Markers and Text",
      "text" = c("Text A", "Text B", "Text C"),
      "type" = "scatter",
      "mode" = "lines+markers+text",
      "textposition" = "top",
      "textfont" = list(
        "color" = "#1f77b4",options
        "family" = "sans serif",options
        "size" = 18)
)

trace2 <- list(
      "x" = c(0,1,2), "y" = c(2,2,2),
      "name" = "Lines and Text",
      "text" =  c("Text G", "Text H", "Text I"),
      "type" = "scatter",
      "mode" = "lines+markers+text",
      "textposition" = "bottom",
      "textfont" = list(
        "color" = "#ff7f0e",options
        "family" = "sans serif",options
        "size"= 18)
)

#hide legend
layout <- list(
  'showlegend' = FALSE
);

response <- p$plotly(trace1, trace2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Styling Text Charts

Axes Booleans

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(8,7,6,5,4,3,2,1,0)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,1,2,3,4,5,6,7,8)

axesstyle <- list(
      'autorange' = TRUE,
      'autotick' = TRUE,
      'showgrid' = FALSE,
      'showline' = FALSE,note
      'showticklabels' = FALSE,
      'zeroline' = FALSE,
      'ticks'= ''options
);

layout <- list(
    'xaxis' = axesstyle,
    'yaxis' = axesstyle,
    'showlegend' = FALSE
);

response <- p$plotly(x,y,x2,y2, kwargs = list(layout = layout));
url <- response$url
filename <- response$filename

Axes Booleans

Linear and Log Axes

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(8,7,6,5,4,3,2,1,0)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,1,2,3,4,5,6,7,8)


axesstyle <- list(
    'autorange' = TRUE,
    'type' = 'log',options
)

layout <- list(
    'xaxis' = axesstyle,
    'yaxis' = axesstyle
)


response <- p$plotly(x,y,x2,y2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Linear and Log Axes

Manual Range

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(8,7,6,5,4,3,2,1,0)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,1,2,3,4,5,6,7,8)


axesstyle <- list(
    'range' = c(2,5)options
);

layout <- list(
    'xaxis' = axesstyle,
    'yaxis' = axesstyle
);


response <- p$plotly(x,y,x2,y2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename
Manual Range

Range Mode

Toggle Notes and Options
x <- c(2,4,6)
y <- c(-3,0,3)

layout <- list(
    'showlegend' = FALSE,
    'xaxis' = list(
        'autorange' = TRUE,
        'rangemode' = 'tozero'options
    ),
    'yaxis' = list(
        'autorange' = TRUE,
        'rangemode' = 'nonnegative'options
    )
);

response <- p$plotly(x,y, kwargs = list(layout=layout));
url <- response$url
filename <- response$filename

Range Mode

Axes Lines

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(8,7,6,5,4,3,2,1,0)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,1,2,3,4,5,6,7,8)

axesstyle <- list(
    'showline' = TRUE, note
    'mirror' = 'ticks',optionsnote
    'linecolor' = '#636363',options
    'linewidth' = 6,

    'showgrid' = TRUE, note
    'gridcolor' = '#bdbdbd',options
    'gridwidth' = 2,

    'zeroline' = TRUE, note
    'zerolinecolor' = '#969696',options
    'zerolinewidth' = 4
);

layout <- list(
  'xaxis' = axesstyle,
  'yaxis' = axesstyle
);

response <- p$plotly(x,y,x2,y2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename
Axes Lines

Axes Ticks

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(8,7,6,5,4,3,2,1,0)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,1,2,3,4,5,6,7,8)

axesstyle <- list(
      'autotick' = FALSE,
      'tick0' = 0,note
      'dtick' = .25,note
      'ticks' = 'outside',options
      'tickcolor' = '#000',options
      'ticklen' = 8,note
      'tickwidth' = 4
);

layout <- list(
  'xaxis' = axesstyle,
  'yaxis' = axesstyle
);

response <- p$plotly(x,y,x2,y2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename
Axes Ticks

Axes Labels

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(8,7,6,5,4,3,2,1,0)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,1,2,3,4,5,6,7,8)

axesstyle <- list(
      'title' = 'AXIS TITLE',
      'titlefont' = list(
        'color' = 'lightgrey',options
        'family' = 'Arial, sans-serif',options
        'size' = 18),
      'showticklabels' = TRUE,
      'tickfont' = list(
        'color' = 'black',options
        'family' = 'Old Standard TT, serif',options
        'size' = 14),
      'tickangle' = 45,options
      'showexponent' = 'All',options
      'exponentformat' = 'e'options
);

layout <- list(
  'xaxis' = axesstyle,
  'yaxis' = axesstyle
);

response <- p$plotly(x,y,x2,y2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Axes Labels

Reversed Axes

Toggle Notes and Options
x <- c(1,2)
y <- c(1,2)

layout <- list(
    'xaxis'= list(
      'autorange'= 'reversed'
    )
)

filename <- 'filename'
response <- p$plotly(x,y, kwargs=list(layout=layout,filename=filename));
url <- response$url

Reversed Axes

Date Axes

Toggle Notes and Options
#Plotly understands dates and times in format YYYY-MM-DD HH:MM:SS (ie, 2009-10-04 22:23:00)

x <- c('2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00')
y <- c(1,3,6)

response <- p$plotly(x,y)
url <- response$url
filename <- response$filename

Date Axes

Simple Double Axes

Toggle Notes and Options
trace1 <- list(
    "x" = c(1,2,3),
    "y" = c(40,50,60),
      "name" = "yaxis data"
)

trace2 <- list(
      "x" = c(2,3,4),
      "y" = c(4,5,6),
      "yaxis" = "y2", # this will reference the yaxis2 object in the layout object
      "name" = "yaxis2 data"
)

layout <- list (
   "yaxis" = list(
      "title" = "yaxis title" # optional
   ),
   "yaxis2" = list(
      "title" = "yaxis2 title", # optional
      "titlefont" = list(
         "color" ="rgb(148, 103, 189)"
      ),
      "tickfont" = list(
         "color" = "rgb(148, 103, 189)"
      ),
      "overlaying" = "y",
      "side" = "right"
   ),
   "title" = "Double Y Axis Example"
)

response <- p$plotly(trace1,trace2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename
Simple Double Axes

Simple Multiple Axes

Toggle Notes and Options
colors <- c(
    '#1f77b4', # muted blue
    '#ff7f0e', # safety orange
    '#2ca02c', # cooked asparagus green
    '#d62728', # brick red
    '#9467bd', # muted purple
    '#8c564b', # chestnut brown
    '#e377c2', # raspberry yogurt pink
    '#7f7f7f', # middle gray
    '#bcbd22', # curry yellow-green
    '#17becf'); #blue-teal


trace1 <- list(
    "x" = c(1,2,3),
    "y" = c(4,5,6),
    "name" = "yaxis1 data"
   )
trace2 <- list(
      "x" = c(2,3,4),
      "y" = c(40,50,60),
      "name" = "yaxis2 data",
      "yaxis" = "y2" # this references the "yaxis2" object in layout
   )
trace3 <- list(
      "x" = c(3,4,5),
      "y" = c(400,500,600),
      "name" = "yaxis3 data",
      "yaxis" = "y3"
    )
trace4 <- list(
    "x" = c(4,5,6),
    "y" = c(40000,50000,60000),
    "name" = "yaxis4 data",
    "yaxis" = "y4"
   )
trace5 <- list(
    "x" = c(5,6,7),
    "y" = c(400000,500000,600000),
    "name" = "yaxis5 data",
    "yaxis" = "y5"
   )
trace6 <- list(
    "x" = c(6,7,8),
    "y" = c(4000000,5000000,6000000),
    "name" = "yaxis6 data",
    "yaxis" = "y6"
   )

layout <- list(
    "width" = 800,
    "xaxis" = list(
        "domain" = c(0.3,0.7)
    ),
   "yaxis" = list(
      "title" =  "yaxis title",
      "titlefont" = list(
         "color" = colors[0]
      ),
      "tickfont" = list(
         "color" = colors[0]
      )
   ),
   "yaxis2" = list(
      "overlaying" = "y",
      "side" = "left",
      "anchor" = "free",
      "position" = 0.15,

      "title" =  "yaxis2 title",
      "titlefont" = list(
         "color" = colors[1]
      ),
      "tickfont" = list(
         "color" = colors[1]
      )
   ),
   "yaxis3" = list(
      "overlaying" = "y",
      "side" = "left",
      "anchor" = "free",
      "position" = 0,

      "title" =  "yaxis3 title",
      "titlefont" = list(
         "color" = colors[2]
      ),
      "tickfont" = list(
         "color" = colors[2]
      )
   ),

   "yaxis4" = list(
      "overlaying" = "y",
      "side" = "right",
      "anchor" = "x",

      "title" =  "yaxis4 title",
      "titlefont" = list(
         "color" = colors[3]
      ),
      "tickfont" = list(
         "color" = colors[3]
      )
   ),

   "yaxis5" = list(
      "overlaying" = "y",
      "side" = "right",
      "anchor" = "free",
      "position" = 0.85,

      "title" =  "yaxis5 title",
      "titlefont" = list(
         "color" = colors[4]
      ),
      "tickfont" = list(
         "color" = colors[4]
      )
   ),

   "yaxis6" = list(
      "overlaying" = "y",
      "side" = "right",
      "anchor" = "free",
      "position" = 1.0,

      "title" =  "yaxis6 title",
      "titlefont" = list(
         "color" = colors[5]
      ),
      "tickfont" = list(
         "color" = colors[5]
      )
    ),
    "title" =  "multiple y-axes example"
)


response <- p$plotly(trace1,trace2,trace3,trace4,trace5,trace6, kwargs = list(layout = layout));
url <- response$url
filename <- response$filename

Simple Multiple Axes

Simple Subplot

Toggle Notes and Options
trace1 <- list(
    "x" = c(1,2,3),
    "y" = c(4,5,6),
   ),
trace2 <- list(
      "x" = c(20,30,40),
      "y" = c(50,60,70),
      "xaxis" = "x2",
      "yaxis" = "y2"
   )


layout <- list(
    "xaxis" = list(
        "domain" = c(0,0.45) # i.e. let the first x-axis span the first 45% of the plot width
    ),
    "xaxis2" = list(
        "domain" = c(0.55,1) # i.e. let the second x-axis span the latter 45% of the plot width
    ),
    "yaxis2" = list(
        "anchor" = "x2" # i.e. bind the second y-axis to the start of the second x-axis
    )
)

response <- p$plotly(trace1,trace2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Simple Subplot

Custom Sized Subplot

Toggle Notes and Options
trace1 <- list(
    "x" = c(1,2,3),
    "y" = c(4,5,6),
   ),
   list(
      "x" = c(20,30,40),
      "y" = c(50,60,70),
      "xaxis" = "x2",
      "yaxis" = "y2"
   )


layout <- list(
    "xaxis" = list(
        "domain" = c(0,0.7) # i.e. let the first x-axis span the first 70% of the plot width
    ),
    "xaxis2" = list(
        "domain" = c(0.8,1) # i.e. let the second x-axis span the latter 20% of the plot width
    ),
    "yaxis2" = list(
        "anchor" = "x2" # i.e. bind the second y-axis to the start of the second x-axis
    )
)

response <- p$plotly(trace1,trace2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Custom Sized Subplot

Multiple Subplots

Toggle Notes and Options
trace1 <- list(
    "x" = c(1,2,3),
    "y" = c(4,5,6)
   )
trace2 <- list(
      "x" = c(20,30,40),
      "y" = c(50,60,70),
      "xaxis" = "x2",
      "yaxis" = "y2"
   )
trace3 <- list(
      "x" = c(300,400,500),
      "y" = c(600,700,800),
      "xaxis" = "x3",
      "yaxis" = "y3"
   )
trace4 <- list(
      "x" = c(4000,5000,6000),
      "y" = c(7000,8000,9000),
      "xaxis" = "x4",
      "yaxis" = "y4"
   )

layout <- list(
    "xaxis" = list(
        "domain"=c(0,0.45) # let the first x-axis span the first 45% of the plot width
    ),
    "yaxis" = list(
        "domain" = c(0,0.45) # # and let the first y-axis span the first 45% of the plot height
    ),
    "xaxis2" = list(
        "domain" = c(0.55,1) # and let the second x-axis span the latter 45% of the plot width
    ),
    "yaxis2" = list(
        "domain" = c(0,0.45), # and let the second y-axis span the first 45% of the plot height
        "anchor" = "x2" # bind the horizontal position of the second y-axis to the start of the second x-axis
    ),
    "xaxis3" = list(
        "domain" = c(0,0.45),
        "anchor" = "y3" # bind the vertical position of this axis to the start of yaxis3
    ),
    "yaxis3" = list(
        "domain" = c(0.55,1)
    ),
    "xaxis4" = list(
        "domain" = c(0.55,1),
        "anchor" = "y4" # bind the vertical position of this axis to the start of yaxis4
    ),
    "yaxis4" = list(
        "domain" = c(0.55,1),
        "anchor" = "x4" # bind the horizontal position of this axis to the start of xaxis4
    )
)

response <- p$plotly(trace1,trace2,trace3,trace4, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Multiple Subplots

Subplots with Shared Axes

Toggle Notes and Options
trace1 <- list(
    "x" = c(1,2,3),
    "y" = c(2,3,4)
   )
trace2 <- list(
      "x" = c(20,30,40),
      "y" = c(5,5,5),
      "xaxis" = "x2",
      "yaxis" = "y"
   )
trace3 <- list(
      "x" = c(2,3,4),
      "y" = c(600,700,800),
      "xaxis" = "x",
      "yaxis" = "y3"
   )
trace4 <- list(
      "x" = c(4000,5000,6000),
      "y" = c(7000,8000,9000),
      "xaxis" = "x4",
      "yaxis" = "y4"
   )


layout <- list(
    "xaxis" = list(
        "domain" = c(0,0.45) # let the first x-axis span the first 45% of the plot width
    ),
    "yaxis" = list(
        "domain" = c(0,0.45) # and let the first y-axis span the first 45% of the plot height
    ),
    "xaxis2" = list(
        "domain" = c(0.55,1) # and let the second x-axis span the latter 45% of the plot width
    ),
    "yaxis3" = list(
        "domain" = c(0.55,1)
    ),
    "xaxis4" = list(
        "domain" = c(0.55,1),
        "anchor" = "y4" # bind the vertical position of this axis to the start of yaxis4
    ),
    "yaxis4" = list(
        "domain" = c(0.55,1),
        "anchor" = "x4" # bind the horizontal position of this axis to the start of xaxis4
    )
)

response <- p$plotly(trace1,trace2,trace3,trace4, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Subplots with Shared Axes

Stacked Subplots

Toggle Notes and Options
trace1 <- list(
  'x' = c(0,1,2),
  'y' = c(10,11,12)
)
trace2 <- list(
  'x' = c(2,3,4),
  'y' = c(100,110,120),
  'yaxis'= 'y2',
  'xaxis'= 'x2'
)
trace3 <- list(
  'x' = c(3,4,5),
  'y' = c(1000,1100,1200),
  'yaxis'= 'y3',
  'xaxis'= 'x3'
)

layout=list(
    'yaxis' = list('domain' = c(0,0.8/3.)),
    'yaxis2' = list('domain' = c(0.8/3+0.1,2*0.8/3+0.1)),
    'yaxis3' = list('domain' = c(2*0.8/3+0.2,1)),
    'xaxis2' = list('anchor' = 'y2'),
    'xaxis3' = list('anchor' = 'y3'),
    'legend' = list('traceorder' = 'reversed')
)

response <- p$plotly(trace1,trace2,trace3, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Stacked Subplots

Stacked Subplots with Coupled X-Axis

Toggle Notes and Options
trace1 <- list(
  'x' = c(0,1,2),
  'y' = c(10,11,12)
)
trace2 <- list(
  'x' = c(2,3,4),
  'y' = c(100,110,120),
  'yaxis'= 'y2'
)
trace3 <- list(
  'x' = c(3,4,5),
  'y' = c(1000,1100,1200),
  'yaxis'= 'y3'
)

layout <- list(
    'yaxis' = list('domain' = c(0,1./3.)),
    'yaxis2' = list('domain' = c(1./3,2./3.)),
    'yaxis3' = list('domain' = c(2./3.,1)),
    'legend' = list('traceorder' = 'reversed')
)

response  <- p$plotly(trace1,trace2,trace3, kwargs=list(layout=layout));
url  <- response$url
filename  <- response$filename

Stacked Subplots with Coupled X-Axis

Simple Inset

Toggle Notes and Options
trace1 <- list(
    "x" = c(1,2,3),
    "y" = c(4,3,2),
   )
trace2 <- list(
      "x" = c(20,30,40),
      "y" = c(30,40,50),
      "xaxis" = "x2",
      "yaxis" = "y2"
   )

layout <- list(
    "xaxis2" = list(
        "domain" = c(0.6, 0.95),
        "anchor" = "y2"
    ),
    "yaxis2" = list(
        "domain" = c(0.6, 0.95),
        "anchor" = "x2"
    )
)

response <- p$plotly(trace1,trace2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Simple Inset

Plot and Margin Size

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(0,1,2,3,4,5,6,7,8)

layout <- list(
    'autosize' = FALSE,
    'height' = 500,
    'width' = 500,
    'margin' = list(
      't' = 100,
      'b' = 100,
      'r' = 50,
      'l' = 50,
      'pad' = 4 # space between border and gridlines
    ),
    "plot_bgcolor" = "#c7c7c7",
    "paper_bgcolor" = "#7f7f7f"
)


response <- p$plotly(x,y, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Plot and Margin Size

Global Font

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(0,1,2,3,4,5,6,7,8)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(1,0,3,2,5,4,7,6,8)

layout <- list(
    "title" = "Global Font",
    "font" = list(
      "color" = "#7f7f7f",
      "family" = "Courier New, monospace",
      "size" = 18
      )
)


response <- p$plotly(x,y,x2,y2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Global Font

Titles, Axes Names and Trace Names

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(0,1,2,3,4,5,6,7,8)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(1,0,3,2,5,4,7,6,8)

data <- list(
  list(
    'x' = x,
    'y' = y,
    'name' = 'Name of Trace 1'
  ),
  list(
    'x' = x2,
    'y' = y2,
    'name' = 'Name of Trace 2'
  )
)

layout <- list(
  "title" = "Plot Title",
  "xaxis" = list(
    "title" = "x Axis",
    "titlefont" = list(
      "color" = "#7f7f7f",
      "family" = "Courier New, monospace",
      "size" = 18
    )
  ),
  "yaxis" = list(
    "title" = "y Axis",
    "titlefont" = list(
      "color" = "#7f7f7f",
      "family" = "Courier New, monospace",
      "size" = 18
    )
  )
)


response <- p$plotly(data, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Titles, Axes Names and Trace Names

Simple Annotation

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(0,1,3,2,4,3,4,6,5)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,4,5,1,2,2,3,4,2)


layout <- list(
    "showlegend" = FALSE,
    "annotations" = list(list(
        "text" = "Annotation Text",
        "xref" = "x",
        "yref" = "y",
        "x" = 2,
        "y" = 5,
        "ax" = 0,
        "ay" = -40,
        "showarrow" = TRUE,
        "arrowhead" = 7
    ))
)

response <- p$plotly(x,y,x2,y2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Simple Annotation

Multiple Annotations

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(0,1,3,2,4,3,4,6,5)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,4,5,1,2,2,3,4,2)


layout <- list(
    "showlegend" = FALSE,
    "annotations" = list(list(
        "text" = "Annotation Text",
        "xref" = "x",
        "yref" = "y",
        "x" = 2,
        "y" = 5,
        "ax" = 0,
        "ay" = -40,
        "showarrow" = TRUE,
        "arrowhead" = 7
    ),
    list(
        "text" = "Annotation Text 2",
        "xref" = "x",
        "yref" = "y",
        "x" = 4,
        "y" = 4,
        "ax" = 0,
        "ay" = -40,
        "showarrow" = TRUE,
        "arrowhead" = 7
    ))
)

response <- p$plotly(x,y,x2,y2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Multiple Annotations

Styling Annotations

Toggle Notes and Options
x <- c(0,1,2,3,4,5,6,7,8)
y <- c(0,1,3,2,4,3,4,6,5)
x2 <- c(0,1,2,3,4,5,6,7,8)
y2 <- c(0,4,5,1,2,2,3,4,2)


layout <- list(
    "showlegend" = FALSE,
    "annotations" = list(list(
        "text" = "max=5",
        "xref" = "x",
        "yref" = "y",
        "x" = 2,
        "y" = 5,
        "ax" = 20,
        "ay" = -30,
        "arrowhead" = 2,
        "arrowsize" = 1,
        "arrowwidth" = 2,
        "arrowcolor" = "#636363",
        "bgcolor" = "#ff7f0e",
        "bordercolor" = "#c7c7c7",
        "borderpad" = 4,
        "borderwidth" = 2,
        "font" = list(
            "color" = "#ffffff",
            "family" = "Courier New, monospace",
            "size" = 16
        ),
        "opacity" = 0.8,
        "showarrow" = TRUE,
        "align" = "center"
    ))
)
response <- p$plotly(x,y,x2,y2, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Styling Annotations

Simple Bubblechart

Toggle Notes and Options
data <- list(
    list(
    'x' = c(1,2,3,4),
    'y' = c(10,11,12,13),
    'marker' = list(
        'size' =  c(12, 22, 32, 42), # diameter
        'color' = c('hsl(0,100,40)', 'hsl(33,100,40)', 'hsl(66,100,40)', 'hsl(99,100,40)'),
        'opacity' = c(.60, .70, .80, .90)
     ),
     'mode' = 'markers'
     ),
    list(
      'x' = c(1,2,3,4),
      'y' =  c(11,12,13,14),
      'marker' = list(
        'color'= 'rgb(31, 119, 180)',
        'size' = 18,
        'symbol' = c('circle', 'square', 'diamond', 'cross')
    ),
    'mode'= 'markers'
    ),
    list(
    'x' = c(1,2,3,4),
    'y' = c(12,13,14,15),
    'marker' = list(
        'size' = 18,
        'line' = list(
            'color' = c('rgb(120,120,120)', 'rgb(120,120,120)', 'red', 'rgb(120,120,120)'),
            'width' = c(2, 2, 6, 2)
        )
    ),
    'mode' = 'markers'
    )
)

layout <- list('showlegend'=FALSE)

response <- p$plotly(data, kwargs=list(layout=layout));
url <- response$url
filename <- response$filename

Simple Bubblechart

Private Graph

Toggle Notes and Options
x <- c(0,2,4)
y <- c(0,4,2)

response <- p$plotly(x,y, kwargs=list(world_readable=FALSE));
url <- response$url
filename <- response$filename

Private Graph

Public Graph

Toggle Notes and Options
x <- c(0,2,4)
y <- c(0,4,2)

response <- p$plotly(x,y, kwargs=list(world_readable=TRUE));
url <- response$url
filename <- response$filename

Public Graph

File Naming

Toggle Notes and Options
x <- c(0,2,4)
y <- c(0,4,2)

response <- p$plotly(x,y, kwargs=list(filename='myplotlygraph'));
#or
response <- p$plotly(x,y, kwargs=list(filename='myfolder/myplotlygraph'));

url <- response$url
filename <- response$filename
File Naming

Data Visibility

Toggle Notes and Options
data <- list(

  trace0  = list(
    'x' = c(0,1,2,3),
    'y' = c(0,2,4,6),
    'visible'= TRUE
  ),

  trace1 = list(
    'x' = c(0,1,2,3),
    'y' = c(8,4,2,0),
    'visible'= FALSE
 )
)
response <- p$plotly(data);
url <- response$url
filename <- response$filename

Data Visibility

New Graph

p$plotly(c(1,2), c(3,4),
	kwargs=list(filename='new plot',
	fileopt='new'))

API RESPONSE:

$url
[1] "https://plot.ly/~demos/1058"
$message
[1] ""
$warning
[1] ""
$filename
[1] "new plot"
$error
[1] ""
p$plotly(c(1,2), c(3,4),
	kwargs=list(filename='new plot',
	fileopt='new'))
Check out the filename and url in the responses. We specified the same filename in both calls, but since we used the fileopt 'new', our second call appended '(1)' to the filename and created a new unique url for that graph. The first graph was not overwritten.

API RESPONSE:

$url
[1] "https://plot.ly/~demos/1059"
$message
[1] ""
$warning
[1] ""
$filename
[1] "new plot (1)"
$error
[1] ""

Overwrite

The overwrite option will save the plot with the specified filename no matter what. If a plot already exists under the same name, it will overwrite it and create a revision. If the plot with that filename doesn't exist, it will create it!
p$plotly(c(1,2), c(3,4),
	kwargs=list(filename='same plot',
	fileopt='overwrite'))

API RESPONSE:

$url
[1] "https://plot.ly/~demos/1055"
$message
[1] ""
$warning
[1] ""
$filename
[1] "same plot"
$error
[1] ""
p$plotly(c(10,20), c(30,40),
	kwargs=list(filename='same plot',
	fileopt='overwrite'))

API RESPONSE:

$url
[1] "https://plot.ly/~demos/1055"
$message
[1] ""
$warning
[1] ""
$filename
[1] "same plot"
$error
[1] ""

Append

The "append" fileopt will append the data that you supplied as new traces. If the filename doesn't exist, it will create a new file with that data.
p$plotly(c(1,2), c(1,2),
	kwargs=list(filename='append plot',
	fileopt='append'))
Here we're starting with one trace.
p$plotly(c(1,2), c(3,4),
	kwargs=list(filename='append plot',
	fileopt='append'))
Here we are appending a new trace with points (1,3) and (2,4).
p$plotly(c(1,2), c(4,5), c(1,2), c(5,6),
	kwargs=list(filename='append plot',
	fileopt='append'))
Here we are appending two new traces at points (1,4), (2,5) and (1,5), (2,6).

Extend

The "extend" fileopt will extend existing traces with your new data.
p$plotly(c(1,2), c(1,2), c(1,2), c(2,3), c(1,2), c(3,4),
	kwargs=list(filename='extend plot',
	fileopt='extend'))
If there is no data in the plot, 'extend' will create new traces.
p$plotly(c(3,4), c(2,1), c(3,4), c(3,2), c(3,4), c(4,3),
	kwargs=list(filename='extend plot',
	fileopt='extend'))
If there is data in the plot, the existing traces will be extended with the data in the order that it is supplied.
p$plotly(c(4,5), c(2,3),
	kwargs=list(filename='extend plot',
	fileopt='extend',
	traces=list(1)))
You can also choose which trace to extend with the "traces" argument. Here we extend the second trace. (traces=[1])
p$plotly(c(5,6), c(3,3), c(4,5), c(1,1),
	kwargs=list(filename='extend plot',
	fileopt='extend',
	traces=list(2,0)))
The traces option accepts an array as an argument. Here we extend the 3rd trace in the plot with the first data set that we supply, and the 1st trace in the plot with the second data set.

Setting Style


A simple example:
p$style(list(type='bar'), list(type='scatter',marker=list(symbol='square', color='marker')))
This sets the first data trace to a bar chart and the second data trace to a scatter plot with purple square scatter points.

The general styling syntax is
> p$style(data1,...,datan, kwargs=kwargs)
datai is a Plotly formatted data list that customizes the style of the i'th trace.

kwargs is an optional keyed list with the following optional keys:
kwargs$filename: filename of the plot inside your plotly account
kwargs$traces: a vector that specifies which traces to style. If not specified, then traces are styled in the order of the data lists or, if supplied, applied to the trace specified by the datai$name value.

Setting Layout

A simple example:
p$layout({'title':'Hello World'})
This sets your plot's title to Hello World.
The general syntax is
p$layout(layout, kwargs)
layout is a Plotly formatted layout dictionary that customizes the style of the layout, the axes, and the legend.

kwargs represents optional arguments. Accepted arguments are:
filename: filename of the plot inside your plotly account. If not specified, then the style is applied to the last plot that was made in your API session.

File Sharing

x = c(0,2,4)
y = c(0,4,2)

p$plotly(x,y, kwargs=list(filename='lab_results/experiment1'));

When you share a folder in the Plotly tool, files created within that folder using the API are automatically shared.

In this case user demos has shared the folder lab_results with batman and robin.

When demos saves a file (experiment1 inside lab_results, batman

IFrames

Formal Syntax

A simple example:
> p$plotly(c(0,1), c(10,11))
or in an alternate syntax
> p$plotly(list(x=c(0,1),y=c(10,11))
The general plotting syntax is
> p$plotly(x1, y1,...,xn,yn, kwargs=kwargs)
or
> p$plotly(data1,...,datan, kwargs=kwargs)
x1, y1 are lists with numbers or chars as elements.
datai is a Plotly formatted list with at least the fields x and y, i.e. data1 = list(x=x1, y=y1) but can contain more fields with styling and chart-type data. For example,
data1=list(x=c(0,1),y=c(10,11),name='Exp Results', type='scatter', marker=list(symbol='square',color='purple'))
specifies a scatter trace with purple square data markers that is named Exp Results.

kwargs is an optional keyed list with the following optional keys:
kwargs$filename: filename of the plot inside your plotly account
kwargs$fileopt: file-options: 'new', 'overwrite', or 'append'
kwargs$layout: a Plotly formatted layout list describing layout options.
kwargs$style: a Plotly formatted style list describing the style of all the data traces.
kwargs$world_readable: a boolean. If TRUE, then the graph will be public. If FALSE, then only you can see it. Default is TRUE.

Basic Line Plot

Toggle Notes and Options
my $x0 = [1,2,3,4]; my $y0 = [10,15,13,17];
my $x1 = [2,3,4,5]; my $y1 = [16,5,11,9];
my $response = $py->plot($x0, $y0, $x1, $y1);
my $url = $response->{url};
my $filename = $response->{filename};

Basic Line Plot

Line with Scatter

Toggle Notes and Options
my $trace0 = {x => [1,2,3,4],
  y => [10,15,13,17],
  type => 'scatter',
  mode => 'markers'};

my $trace1 = {x => [2,3,4,5],
  y => [16,5,11,9],
  type => 'scatter',
  mode => 'lines'};

my $trace2 = {x => [1,2,3,4],
  y => [12,9,15,12],
  type => 'scatter',
  mode => 'lines+markers'};

my $response = $py->plot([$trace0, $trace1, $trace2]);
my $url = $response->{url};
my $filename = $response->{filename};

Line with Scatter

Styling Line and Scatter

Toggle Notes and Options
my $x1 = [1,2,3]; my $y1 = [4,5,6];
my $x2 = [1,2,3]; my $y2 = [2,10,12];

# plotly's data dictionaries
my $data1 = {x => $x1,
    y => $y1,
    type => "scatter",

    name => "Experiment",
    line => {
        color => "rgb(3,78,123)",
        width => 6,
        dash => "dot"
    },
    marker => {
        opacity => 1.0,
      symbol => "square",
    size => 12,
        color => "rgb(54,144,192)",
        line => {
            width => 3,
            color => "darkblue"}
        }
};

my $data2 = {x => $x2,
    y => $y2,
    type => "scatter",
    name => "Control",
    line => {color => "purple",
        width => 4,
        dash => "dashdot"},
    marker => {opacity => 0.9,
        symbol => "cross",
        size => 16,
        color => "fuchsia",
        line => {color => "",
            width => 0},
    }
};

my $response = $py->plot($data1, $data2);
my $url = $response->{url};
my $filename = $response->{filename};

Styling Line and Scatter

Basic Area Plot

Toggle Notes and Options
my $trace0 = {x => [1,2,3,4],
  y => [0, 2, 3, 5],
  fill => 'tozeroy'}; options

my $trace1 = {x => [1,2,3,4],
  y => [3,5,1,7],
  fill => 'tonexty'};

my $response = $py->plot([$trace0, $trace1]);
my $url = $response->{url};
my $filename = $response->{filename};

Basic Area Plot

Basic Bar Chart

Toggle Notes and Options
my $x0 = ['giraffes', 'orangutans', 'monkeys']; note
my $y0 = [20, 14, 23];
my $data = {x => $x0, y => $y0,
    type => 'bar'}; options
my $response = $py->plot([$data]);
my $url = $response->{url};
my $filename = $response->{filename};

Basic Bar Chart

Grouped Bar Chart

Toggle Notes and Options
my $categories = ['giraffes', 'orangutans', 'monkeys'];
my $SF = {name => 'SF Zoo',
    x => $categories,
    y => [20, 14, 23],
    type => 'bar'};
my $LA = {name => 'LA Zoo',
    x => $categories,
    y => [12,18,29],
    type => 'bar'};
my $layout = {
    barmode => 'group',options
    xaxis => {type => 'category'},
    categories => $categories};
my $response = $py->plot([$LA, $SF], layout=>$layout);
my $url = $response->{url};
my $filename = $response->{filename};

Grouped Bar Chart

Stacked Bar Chart

Toggle Notes and Options
[...]   # ... SF and LA data from above
my $layout = {barmode => 'stack',   options
    xaxis => {type => 'category'},
    categories => $categories};
my $response = $py->plot([$SF, $LA], layout=>$layout);
my $url = $response->{url};
my $filename = $response->{filename};

Stacked Bar Chart

Styling Bar Charts

Toggle Notes and Options
my $categories=['giraffes', 'orangutans', 'monkeys'];
my $SF = {name => 'SF Zoo',
  x => $categories,
  y => [20, 14, 23],
  type => 'bar',
  marker => {note
    color => 'orange', options
    line => {color => 'grey',  note
      width => 3}}
  };

my $LA = {name => 'LA Zoo',
  x => $categories,
  y => [12,18,29],
  type => 'bar',
  marker => {color => 'rgb(111, 168, 220)',
    line => {color => 'grey',
      width => 3}}
  };

my $layout = {
  title => 'Animal Population',
  barmode => 'group',options
  yaxis => {name => '# of animals (thousands)'},
  xaxis => {type => 'category'},
  categories => $categories,
  bargap => 0.25,note
  bargroupgap => 0.3,note
  bardir => 'v'};options

my $response = $py->plot([$LA, $SF], layout=>$layout);
my $url = $response->{url};
my $filename = $response->{filename};

Styling Bar Charts

Basic Error Bars

Toggle Notes and Options
my $data = {x => [0,1,2],
  y => [6,10,2],
  error_y => {type => 'data',options
    array => [1, 2, 3],
    visible => 1}};
my $response = $py->plot([$data]);
my $url = $response->{url};
my $filename = $response->{filename};

Basic Error Bars

Percentage, Constant or Square Root

Toggle Notes and Options
my $data = {x => [0,1,2],
  y => [6,8,4],
  error_y => {type => 'percent',options
    value => 50, note
    visible => 1}};
my $response = $py->plot([$data]);
my $url = $response->{url};
my $filename = $response->{filename};

Percentage, Constant or Square Root

Bar Chart with Error Bars

Toggle Notes and Options
my $categories = ['Trial 1', 'Trial 2', 'Trial 3'];
my $control = {x => $categories,
  y => [3, 6, 4],
  type => 'bar',
  marker => {color => 'rgb(74, 134, 232)'},
  error_y => {type => 'data',
    array => [1, 0.5, 1.5],
    visible => 1,
    color => 'rgb(67, 67, 67)'}};
my $exp = {x => $categories,
  y => [4, 7, 3],
  type => 'bar',
  marker => {color => 'rgb(111, 168, 220)'},
  error_y => {type => 'data',options
    array => [0.5, 1, 2], note
    visible => 1,
    color => 'rgb(67, 67, 67)'}};
my $layout = {barmode => 'group'};

my $response = $py->plot([$control, $exp], layout=>$layout);
my $url = $response->{url};
my $filename = $response->{filename};

Bar Chart with Error Bars

Basic Box Plot

Toggle Notes and Options
my $box1 = {y => [0, 1, 2, 4],
    type => 'box'};
my $box2 = {y => [1,2,4,5,8],
    type => 'box'};
my $response = $py->plot([$box1, $box2]);
my $url = $response->{url};
my $filename = $response->{filename};

Basic Box Plot

Box Plot with Jitter

Toggle Notes and Options
use PDL;
my $box = {y => random(50),
    type => 'box',
    boxpoints => 'all', options
    jitter => 0.3,   note
    pointpos => -1.8};  note
my $response = $py->plot([$box]);
my $url = $response->{url};
my $filename = $response->{filename};

Box Plot with Jitter

Basic Histogram

Toggle Notes and Options
use PDL;
my $x = grandom(500); # normally distributed vector
my $data = {x => $x,
    type => 'histogramx'};
my $response = $py->plot([$data]);
my $url = $response->{url};
my $filename = $response->{filename};

Basic Histogram

Stacked Histogram

Toggle Notes and Options
use PDL;
my $x0 = grandom(500);
my $x1 = grandom(500)+1;
my $data0 = {x => $x0,
    type => 'histogramx'};
my $data1 = {x => $x1,
    type => 'histogramx'};
my $layout = {barmode => 'stack'}; options
my $response = $py->plot([$data0, $data1], layout=>$layout);
my $url = $response->{url};
my $filename = $response->{filename};

Stacked Histogram

Overlaid Histogram

Toggle Notes and Options
[...] # data0, data1 from the above example
my $layout = {barmode => 'overlay'};  options
my $response = $py->plot([$data0, $data1], layout=>$layout);
my $url = $response->{url};
my $filename = $response->{filename};

Overlaid Histogram

Styling Histograms

Toggle Notes and Options
use PDL;
my $x0 = grandom(500);
my $x1 = grandom(500)+1;
my $data0 = {x => $x0,
  type => 'histogramx',
  name => 'control',
  marker => {note
    color => 'fuchsia',options
    opacity => 0.75,
    line => {color => 'grey',note
      width => 0}},
  autobinx => undef,
  xbins => {
    start => -3.2,
    end => 2.8,
    size => 0.2},
  histnorm => 'count'options
};
my $data1 = {x => $x1,
  name => 'experiment',
  type => 'histogramx',
  marker => {
    color => 'rgb(255, 217, 102)',
    opacity => 0.75},
  autobinx => undef,
  xbins => {
    start => -1.8,
    end => 4.2,
    size => 0.2}};

my $layout = {barmode => 'overlay',options
  bargap => 0.25,note
  bargroupgap => 0.3,note
  bardir => 'v',options
  title => 'Sampled Results',
  xaxis => {title => 'Value'},
  yaxis => {title => 'Count'}};
my $response = $py->plot([$data0, $data1], layout=>$layout);
my $url = $response->{url};
my $filename = $response->{filename};

Styling Histograms

2D Histogram

Toggle Notes and Options
use PDL;
my $x = grandom(500);
my $y = grandom(500)+1;
my $data = {x => $x, y => $y,
    type => 'histogram2d'};
my $response = $py->plot([$data]);
my $url = $response->{url};
my $filename = $response->{filename};

2D Histogram

2D Histogram Options

Toggle Notes and Options
use PDL;
my $x = grandom(500);
my $y = grandom(500)+1;
my $data = {x => $x,
    y => $y,
    type => 'histogram2d',
    autobinx => undef,
    xbins => {
        start => -3,
        end => 3,
        size => 0.1
    },
    autobiny => undef,
    ybins => {
        start => -2.5,
        end => 4,
        size => 0.1
    },
    scl => [[0,"rgb(12,51,131)"],
        [0.25,"rgb(10,136,186)"],
        [0.5,"rgb(242,211,56)"],
        [0.75,"rgb(242,143,56)"],
        [1,"rgb(217,30,30)"]],
    histnorm => 'probability'
};

my $layout =  {
    xaxis => {
        range => [-2,2],
        autorange => undef
    },yaxis => {
        range => [-1,3],
        autorange => undef
        },
    width => 520,height => 380,
    autosize => undef
    };

my $response = $py->plot([$data],layout=>$layout);
my $url = $response->{url};
my $filename = $response->{filename};

2D Histogram Options

Basic Heatmap

Toggle Notes and Options
my $z = [[1., 20., 30 ],
     [20., 1., 60 ],
     [30., 60., 1.]];
my $data = {z => $z,
    type => 'heatmap'};
my $response = $py->plot([$data]);
my $url = $response->{url};
my $filename = $response->{filename};

Basic Heatmap

Labelled Heatmap

Toggle Notes and Options
my $x = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
my $y = ['Morning', 'Afternoon', 'Evening'];
my $z = [[1., 20., 30, 50, 1],
     [20., 1., 60, 80, 30 ],
     [30., 60., 1., -10, 20]];
my $data = {x => $x,
    y => $y,
    z => $z,
    type => 'heatmap'};
my $response = $py->plot([$data]);
my $url = $response->{url};
my $filename = $response->{filename};

Labelled Heatmap

Bar Chart with Line Plot

Toggle Notes and Options
use PDL;
my $x0 = my $x0 = zeroes( 15 )->xlinvals( 0, 5 );
my $y0 = sin($x0) + random(15);
my $data0 = {x => $x0,y => $y0,
    type => 'scatter'};

my $x1 = [0, 1, 2, 3, 4, 5];
my $y1 = [1, 0.5, 0.7, -1.2, 0.3, 0.4];
my $data1 = {x => $x1,y => $y1,
    type => 'bar'};

my $response = $py->plot([$data0, $data1]);
my $url = $response->{url};
my $filename = $response->{filename};

Bar Chart with Line Plot

2D Histogram with Scatter Overlay

Toggle Notes and Options
use PDL;

my $x0 = grandom(100)/5. + 0.5;
my $y0 = grandom(100)/5. + 0.5;

my $x1 = grandom(80)/7. + 0.1;
my $y1 = grandom(80)/8. + 1.1;

my $y = append($y0, $y1);
my $x = append($x0, $x1);

my $data0 = {x => $x0, y => $y0,
  marker => {symbol => 'circle'},
  type => 'scatter', mode => 'markers'};
my $data1 = {x => $x1, y => $y1,
  marker => {symbol => 'cross'},
  type => 'scatter', mode => 'markers'};

my $data_hist = {x => $x, y => $y,
  type => 'histogram2d'};

my $response = $py->plot([$data0,$data1,$data_hist]);
my $url = $response->{url};
my $filename = $response->{filename};

2D Histogram with Scatter Overlay

Legend Visibility

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8];
my $y = [0,3,6,4,5,2,3,5,4];
my $x2 = [0,1,2,3,4,5,6,7,8];
my $y2 = [0,4,7,8,3,6,3,3,4];

# send to plotly
$py->plot($x1,$y1,$x2,$y2);

my $legendstyle = {x => 1, y => 1}

# place legend into layout
my $layoutstyle = {legend => $legendstyle};

my ($url, $filename) = $py->layout($layoutstyle);

Legend Visibility

Legend Position Inside

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8];
my $y = [0,3,6,4,5,2,3,5,4];
my $x2 = [0,1,2,3,4,5,6,7,8];
my $y2 = [0,4,7,8,3,6,3,3,4];

# send to plotly
$py->plot($x1,$y1,$x2,$y2);

# Position the legend inside the graph by assigning x and y values of <= 1.
# e.g :
# {x => 0, y => 0} -- Bottom Left
# {x => 1, y => 0} -- Bottom Right
# {x => 1, y => 1} -- Top Right
# {x => 0, y => 1} -- Top Left
# {x => .5, y => 0} -- Bottom Center
# {x => .5, y => 1} -- Top Center

my $legendstyle = {x => 1, y => 1}

# place legend into layout
my $layoutstyle = {legend => $legendstyle};

my ($url, $filename) = $py->layout($layoutstyle);

Legend Position Inside

Legend Position Outside

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8];
my $y = [0,3,6,4,5,2,3,5,4];
my $x2 = [0,1,2,3,4,5,6,7,8];
my $y2 = [0,4,7,8,3,6,3,3,4];

# send to plotly
$py->plot($x1,$y1,$x2,$y2);

# Position the legend outside of the graph by assigning one of the x and y values to either 100 or -100.
# e.g :
# {x => 100, y => 0} -- Outside Right Bottom
# {x => 100, y => 1} -- Outside Right Top
# {x => 100, y => .5} -- Outside Right Middle
# {x => 0, y => -100} -- Under Left
# {x => 0.5, y => -100} -- Under Center
# {x => 1, y => -100} -- Under Right

my $legendstyle = {x => 100, y => 1}

# place legend into layout
my $layoutstyle = {legend => $legendstyle};

my ($url, $filename) = $py->layout($layoutstyle);

Legend Position Outside

Styling the Legend

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8];
my $y = [0,3,6,4,5,2,3,5,4];
my $x2 = [0,1,2,3,4,5,6,7,8];
my $y2 = [0,4,7,8,3,6,3,3,4];

# send to plotly
$py->plot($x,$y,$x2,$y2);


legendstyle = (
  x => 0,
  y => 1,
  bgcolor => "#E2E2E2",
  bordercolor => "#FFFFFF",
  borderwidth => 2,
  traceorder => normal,
  font => (
    color => "#000",
    family => "sans-serif",
    size => 12
    )
)
# place legend into layout
my $layoutstyle = {legend => $legendstyle};

my ($url, $filename) = $py->layout($layoutstyle);

Styling the Legend

Legend Labels

Toggle Notes and Options
my $trace0  = {
    'x'=> [0,1,2,3],
    'y'=> [0,2,4,6],
    'name'=> 'Blue Trace'
    };

my $trace1 = {
    'x'=> [0,1,2,3],
    'y'=> [8,4,2,0],
    'name'=> 'Orange Trace'
    };

my $response = $py->plot([$trace0, $trace1]);

Legend Labels

Basic Text Chart

Toggle Notes and Options
my $trace1 = {
      x=> [0,1,2], y=> [1,1,1],
      name=> 'Lines, Markers and Text',
      text=> ['Text A', 'Text B', 'Text C'],
      type=> 'scatter',
      mode=> 'lines+markers+text',
      textposition=> 'top'
    };
my $trace2 = {
      x=> [0,1,2], y=> [2,2,2],
      name=> 'Markers and Text',
      text=> ['Text D', 'Text E', 'Text F'],
      type=> 'scatter',
      mode=> 'markers+text',
      textposition=> 'bottom'
    };
my $trace3 = {
      x=> [0,1,2], y=> [3,3,3],
      name=> 'Lines and Text',
      text=> ['Text G', 'Text H', 'Text I'],
      type=> 'scatter',
      mode=> 'lines+text',
      textposition => 'bottom'
    };

#hide legend
layout = {
  showlegend=>FALSE,
};

my $response = $py->plot([$trace1, $trace2, $trace3], layout=>layout);

Basic Text Chart

Styling Text Charts

Toggle Notes and Options
my $trace1 = {
      x=> [0,1,2], y=> [1,1,1],
      name=> 'Lines, Markers and Text',
      text=> ['Text A', 'Text B', 'Text C'],
      type=> 'scatter',
      mode=> 'lines+markers+text',
      textposition=> 'top right',
      textfont => {
        color=> '#1f77b4',
        family=> 'sans serif',
        size=> 18
      };
    };
my $trace2 = {
      x=> [0,1,2], y=> [2,2,2],
      name=> 'Lines and Text',
      text=> ['Text G', 'Text H', 'Text I'],
      type=> 'scatter',
      mode=> 'lines+markers+text',
      textposition => 'bottom',
      textfont => {
        color=> '#ff7f0e',
        family=> 'sans serif',
        size=> 18
      };
    };

#hide legend
layout = {
  showlegend=>FALSE,
};

my $response = $py->plot([$trace1, $trace2], layout=>layout);

Styling Text Charts

Axes Booleans

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8]
my $y = [8,7,6,5,4,3,2,1,0]
my $x2 = [0,1,2,3,4,5,6,7,8]
my $y2 = [0,1,2,3,4,5,6,7,8]

axesstyle = {
      'autorange'=> TRUE,
      'autotick'=> TRUE,
      'showgrid'=> FALSE,
      'showline'=> FALSE,note
      'showticklabels'=> FALSE,
      'zeroline'=> FALSE,
      'ticks'=> 'options
};

layout = {
    'xaxis'=> axesstyle,
    'yaxis'=> axesstyle,
    'showlegend'=> FALSE
};

my $response = $py->plot($x,$y,$x2,$y2, layout=>layout);

Axes Booleans

Linear and Log Axes

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8]
my $y = [8,7,6,5,4,3,2,1,0]
my $x2 = [0,1,2,3,4,5,6,7,8]
my $y2 = [0,1,2,3,4,5,6,7,8]


axesstyle = {
    'autorange'=> TRUE,
    'type'=> 'log',options
}

layout = {
    'xaxis'=> axesstyle,
    'yaxis'=> axesstyle,
}


my $response = $py->plot($x,$y,$x2,$y2, layout=>layout);

Linear and Log Axes

Manual Range

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8]
my $y = [8,7,6,5,4,3,2,1,0]
my $x2 = [0,1,2,3,4,5,6,7,8]
my $y2 = [0,1,2,3,4,5,6,7,8]


axesstyle = {
    'range'=> [2,5]options
}

layout = {
    'xaxis'=> axesstyle,
    'yaxis'=> axesstyle,
}


my $response = $py->plot($x,$y,$x2,$y2, layout=>layout);

Manual Range

Range Mode

Toggle Notes and Options
x = [2,4,6]
y = [-3,0,3]


layout = {
    'showlegend'=> FALSE,
    'xaxis'=> {
        'autorange'=> TRUE,
        'rangemode'=> 'tozero'options
    },
    'yaxis'=> {
        'autorange'=> TRUE,
        'rangemode'=> 'nonnegative'options
    }
}

my $response = $py->plot($x,$y, layout=>layout);

Range Mode

Axes Lines

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8]
my $y = [8,7,6,5,4,3,2,1,0]
my $x2 = [0,1,2,3,4,5,6,7,8]
my $y2 = [0,1,2,3,4,5,6,7,8]


axesstyle = {
    'showline'=> TRUE,note
    'mirror'=> 'ticks',optionsnote
    'linecolor'=> '#636363',options
    'linewidth'=> 6,

    'showgrid'=> TRUE, note
    'gridcolor'=> '#bdbdbd',options
    'gridwidth'=> 2,

    'zeroline'=> TRUE, note
    'zerolinecolor'=> '#969696',options
    'zerolinewidth'=> 4
}

layout = {
  'xaxis'=> axesstyle,
  'yaxis'=> axesstyle,
}


my $response = $py->plot($x,$y,$x2,$y2, layout=>layout);

Axes Lines

Axes Ticks

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8]
my $y = [8,7,6,5,4,3,2,1,0]
my $x2 = [0,1,2,3,4,5,6,7,8]
my $y2 = [0,1,2,3,4,5,6,7,8]

axesstyle = {
      'autotick'=> FALSE,
      'tick0'=> 0,note
      'dtick'=> .25,note
      'ticks'=> 'outside',options
      'tickcolor'=> '#000',options
      'ticklen'=> 8,note
      'tickwidth'=> 4
}

layout = {
  'xaxis'=> axesstyle,
  'yaxis'=> axesstyle,
}

my $response = $py->plot($x,$y,$x2,$y2, layout=>layout);

Axes Ticks

Axes Labels

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8];
my $y = [8,7,6,5,4,3,2,1,0];
my $x2 = [0,1,2,3,4,5,6,7,8];
my $y2 = [0,1,2,3,4,5,6,7,8];

axesstyle = {
        'title'=> 'AXIS TITLE',

      'titlefont'=> {
        'color'=> 'lightgrey',options
        'family'=> 'Arial, sans-serif',options
        'size'=> 18
      },

      'showticklabels'=> TRUE,
      'tickfont'=> {
        'color'=> 'black',options
        'family'=> 'Old Standard TT, serif',options
        'size'=> 14
      },

      'tickangle'=> 45,options

      'showexponent'=> 'All',options
      'exponentformat'=> 'e',options
}

layout = {
  'xaxis'=> axesstyle,
  'yaxis'=> axesstyle,
}

my $response = $py->plot($x,$y,$x2,$y2, layout=>layout);

Axes Labels

Reversed Axes

Toggle Notes and Options
my $x = [1,2];
my $y = [1,2];

my $layout = {
    'xaxis'=> {
      'autorange'=> 'reversed'
    }
};

$response = $py->plot($x,$y, layout=>layout);

Reversed Axes

Date Axes

Toggle Notes and Options
#Plotly understands dates and times in format YYYY-MM-DD HH:MM:SS (ie, 2009-10-04 22:23:00)

my $x = ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'];
my $y = [1,3,6];

my $response = $py->plot($x,$y);
my $url = $response->{url};
my $filename = $response->{filename};

Date Axes

Simple Double Axes

Toggle Notes and Options
my $data = {
   {
    "x"=>[1,2,3],
    "y"=>[40,50,60],
      "name"=>"yaxis data"
   },
   {
      "x"=>[2,3,4],
      "y"=>[4,5,6],
      "yaxis"=>"y2", # this will reference the yaxis2 object in the layout object
      "name"=> "yaxis2 data"
   }
};
my $layout = {
   "yaxis"=>{
      "title"=> "yaxis title", # optional
   },
   "yaxis2"=>{
      "title"=> "yaxis2 title", # optional
      "titlefont"=>{
         "color"=>"rgb(148, 103, 189)"
      },
      "tickfont"=>{
         "color"=>"rgb(148, 103, 189)"
      },
      "overlaying"=>"y",
      "side"=>"right",
   },
   "title"=> "Double Y Axis Example",
}


my $response = $py->plot([$data], layout=>$layout);

Simple Double Axes

Simple Multiple Axes

Toggle Notes and Options
my $colors = {"#1f77b4", # muted blue
                "#ff7f0e", # safety orange
                "#2ca02c", # cooked asparagus green
                "#d62728", # brick red
                "#9467bd", # muted purple
                "#8c564b", # chestnut brown
                "#e377c2", # raspberry yogurt pink
                "#7f7f7f", # middle gray
                "#bcbd22", # curry yellow-green
                "#17becf"}; #blue-teal

my $data = {
    {
    "x"=>[1,2,3],
    "y"=>[4,5,6],
    "name"=>"yaxis1 data"
   },
   {
      "x"=>[2,3,4],
      "y"=>[40,50,60],
      "name"=>"yaxis2 data",
      "yaxis"=>"y2" # this references the "yaxis2" object in layout
   },
   {
      "x"=>[3,4,5],
      "y"=>[400,500,600],
      "name"=>"yaxis3 data",
      "yaxis"=>"y3"
    },
    {
    "x"=>[4,5,6],
    "y"=>[40000,50000,60000],
    "name"=>"yaxis4 data",
    "yaxis"=>"y4"
   },
    {
    "x"=>[5,6,7],
    "y"=>[400000,500000,600000],
    "name"=>"yaxis5 data",
    "yaxis"=>"y5"
   },
    {
    "x"=>[6,7,8],
    "y"=>[4000000,5000000,6000000],
    "name"=>"yaxis6 data",
    "yaxis"=>"y6"
   },
}

my $layout = {
    "width"=>800,
    "xaxis"=>{
        "domain"=>[0.3,0.7]
    },
   "yaxis"=>{
      "title"=> "yaxis title",
      "titlefont"=>{
         "color"=>$colors[0]
      },
      "tickfont"=>{
         "color"=>$colors[0]
      },
   },
   "yaxis2"=>{
      "overlaying"=>"y",
      "side"=>"left",
      "anchor"=>"free",
      "position"=>0.15,

      "title"=> "yaxis2 title",
      "titlefont"=>{
         "color"=>$colors[1]
      },
      "tickfont"=>{
         "color"=>$colors[1]
      },
   },
   "yaxis3"=>{
      "overlaying"=>"y",
      "side"=>"left",
      "anchor"=>"free",
      "position"=>0,

      "title"=> "yaxis3 title",
      "titlefont"=>{
         "color"=>$colors[2]
      },
      "tickfont"=>{
         "color"=>$colors[2]
      },
   },

   "yaxis4"=>{
      "overlaying"=>"y",
      "side"=>"right",
      "anchor"=>"x",

      "title"=> "yaxis4 title",
      "titlefont"=>{
         "color"=>$colors[3]
      },
      "tickfont"=>{
         "color"=>$colors[3]
      },
   },

   "yaxis5"=>{
      "overlaying"=>"y",
      "side"=>"right",
      "anchor"=>"free",
      "position"=>0.85,

      "title"=> "yaxis5 title",
      "titlefont"=>{
         "color"=>$colors[4]
      },
      "tickfont"=>{
         "color"=>$colors[4]
      },
   },

   "yaxis6"=>{
      "overlaying"=>"y",
      "side"=>"right",
      "anchor"=>"free",
      "position"=>1.0,

      "title"=> "yaxis6 title",
      "titlefont"=>{
         "color"=>$colors[5]
      },
      "tickfont"=>{
         "color"=>$colors[5]
      },
    },
    "title"=> "multiple y-axes example"
}


my $response = $py->plot([$data], layout=>$layout);

Simple Multiple Axes

Simple Subplot

Toggle Notes and Options
my $data = {
    {
    "x"=>[1,2,3],
    "y"=>[4,5,6],
   },
   {
      "x"=>[20,30,40],
      "y"=>[50,60,70],
      "xaxis"=>"x2",
      "yaxis"=>"y2"
   }
}

my $layout = {
    "xaxis"=>{
        "domain"=>[0,0.45] # i.e. let the first x-axis span the first 45% of the plot width
    },
    "xaxis2"=>{
        "domain"=>[0.55,1] # i.e. let the second x-axis span the latter 45% of the plot width
    },
    "yaxis2"=>{
        "anchor"=>"x2" # i.e. bind the second y-axis to the start of the second x-axis
    }
}

my $response = $py->plot([$data], layout=>$layout);

Simple Subplot

Custom Sized Subplot

Toggle Notes and Options
my $data = {
    {
    "x"=>[1,2,3],
    "y"=>[4,5,6],
   },
   {
      "x"=>[20,30,40],
      "y"=>[50,60,70],
      "xaxis"=>"x2",
      "yaxis"=>"y2"
   }
}

my $layout = {
    "xaxis"=>{
        "domain"=>[0,0.7] # i.e. let the first x-axis span the first 70% of the plot width
    },
    "xaxis2"=>{
        "domain"=>[0.8,1] # i.e. let the second x-axis span the latter 20% of the plot width
    },
    "yaxis2"=>{
        "anchor"=>"x2" # i.e. bind the second y-axis to the start of the second x-axis
    }
}
my $response = $py->plot([$data], layout=>$layout);

Custom Sized Subplot

Multiple Subplots

Toggle Notes and Options
my $data = {
    {
    "x"=>[1,2,3],
    "y"=>[4,5,6],
   },
   {
      "x"=>[20,30,40],
      "y"=>[50,60,70],
      "xaxis"=>"x2",
      "yaxis"=>"y2"
   },
   {
      "x"=>[300,400,500],
      "y"=>[600,700,800],
      "xaxis"=>"x3",
      "yaxis"=>"y3"
   },
   {
      "x"=>[4000,5000,6000],
      "y"=>[7000,8000,9000],
      "xaxis"=>"x4",
      "yaxis"=>"y4"
   }
}

my $layout = {
    "xaxis"=>{
        "domain"=>[0,0.45] # let the first x-axis span the first 45% of the plot width
    },
    "yaxis"=>{
        "domain"=>[0,0.45] # # and let the first y-axis span the first 45% of the plot height
    },
    "xaxis2"=>{
        "domain"=>[0.55,1] # and let the second x-axis span the latter 45% of the plot width
    },
    "yaxis2"=>{
        "domain"=>[0,0.45], # and let the second y-axis span the first 45% of the plot height
        "anchor"=>"x2" # bind the horizontal position of the second y-axis to the start of the second x-axis
    },
    "xaxis3"=>{
        "domain"=>[0,0.45],
        "anchor"=>"y3" # bind the vertical position of this axis to the start of yaxis3
    },
    "yaxis3"=>{
        "domain"=>[0.55,1]
    },
    "xaxis4"=>{
        "domain"=>[0.55,1],
        "anchor"=>"y4" # bind the vertical position of this axis to the start of yaxis4
    },
    "yaxis4"=>{
        "domain"=>[0.55,1],
        "anchor"=>"x4" # bind the horizontal position of this axis to the start of xaxis4
    }
}
my $response = $py->plot([$data], layout=>$layout);

Multiple Subplots

Subplots with Shared Axes

Toggle Notes and Options
my $data = {
    {
    "x"=>[1,2,3],
    "y"=>[2,3,4]
   },
   {
      "x"=>[20,30,40],
      "y"=>[5,5,5],
      "xaxis"=>"x2",
      "yaxis"=>"y"
   },
   {
      "x"=>[2,3,4],
      "y"=>[600,700,800],
      "xaxis"=>"x",
      "yaxis"=>"y3"
   },
   {
      "x"=>[4000,5000,6000],
      "y"=>[7000,8000,9000],
      "xaxis"=>"x4",
      "yaxis"=>"y4"
   }
}

my $layout = {
    "xaxis"=>{
        "domain"=>[0,0.45] # let the first x-axis span the first 45% of the plot width
    },
    "yaxis"=>{
        "domain"=>[0,0.45] # and let the first y-axis span the first 45% of the plot height
    },
    "xaxis2"=>{
        "domain"=>[0.55,1] # and let the second x-axis span the latter 45% of the plot width
    },
    "yaxis3"=>{
        "domain"=>[0.55,1]
    },
    "xaxis4"=>{
        "domain"=>[0.55,1],
        "anchor"=>"y4" # bind the vertical position of this axis to the start of yaxis4
    },
    "yaxis4"=>{
        "domain"=>[0.55,1],
        "anchor"=>"x4" # bind the horizontal position of this axis to the start of xaxis4
    }
};
my $response = $py->plot([$data], layout=>$layout);

Subplots with Shared Axes

Stacked Subplots

Toggle Notes and Options
my $data = {
    {'x'=> [0,1,2], 'y'=> [10,11,12]},
    {'x'=> [2,3,4], 'y'=> [100,110,120], 'yaxis'=> 'y2', 'xaxis'=> 'x2'},
    {'x'=> [3,4,5], 'y'=> [1000,1100,1200], 'yaxis'=> 'y3', 'xaxis'=> 'x3'}
};

my $layout= {
    'yaxis'=> {'domain'=> [0,0.8/3.]},
    'yaxis2'=> {'domain'=>[0.8/3+0.1,2*0.8/3+0.1]},
    'yaxis3'=> {'domain'=>[2*0.8/3+0.2,1]},
    'xaxis2'=> {'anchor'=>'y2'},
    'xaxis3'=> {'anchor'=>'y3'},
    'legend'=> {'traceorder'=> 'reversed'}
};


my $response = $py->plot([$data], layout=>$layout);

Stacked Subplots

Stacked Subplots with Coupled X-Axis

Toggle Notes and Options
my $data = {
    {'x'=> [0,1,2], 'y'=> [10,11,12]},
    {'x'=> [2,3,4], 'y'=> [100,110,120], 'yaxis'=> 'y2'},
    {'x'=> [3,4,5], 'y'=> [1000,1100,1200], 'yaxis'=> 'y3'}
};
my $layout= {
    'yaxis'=> {'domain'=> [0,1./3.]},
    'yaxis2'=> {'domain'=>[1./3,2./3.]},
    'yaxis3'=> {'domain'=>[2./3.,1]},
    'legend'=> {'traceorder'=> 'reversed'}
};


my $response = $py->plot([$data], layout=>$layout);

Stacked Subplots with Coupled X-Axis

Simple Inset

Toggle Notes and Options
my $data = {
    {
    "x"=>[1,2,3],
    "y"=>[4,3,2],
   },
   {
      "x"=>[20,30,40],
      "y"=>[30,40,50],
      "xaxis"=>"x2",
      "yaxis"=>"y2"
   }
};

my $layout = {
    "xaxis2"=> {
        "domain"=> [0.6, 0.95],
        "anchor"=> "y2"
    },
    "yaxis2"=>{
        "domain"=> [0.6, 0.95],
        "anchor"=> "x2"
    }
};

my $response = $py->plot([$data], layout=>$layout);

Simple Inset

Plot and Margin Size

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8];
my $y = [0,1,2,3,4,5,6,7,8];

my $layout = {
          "autosize"=> False,
          "height"=> 500,
          "width"=> 500,
          "margin"=> {
                    "t"=>100,
                    "b"=>100,
                    "r"=>50,
                    "l"=>50,
                    "pad"=>4 # space between border and gridlines
                  },
          "plot_bgcolor"=> "#c7c7c7",
          "paper_bgcolor"=> "#7f7f7f"
};

my $response = $py->plot($x,$y, layout=>$layout);

Plot and Margin Size

Global Font

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8];
my $y = [0,1,2,3,4,5,6,7,8];
my $x2 = [0,1,2,3,4,5,6,7,8];
my $y2 = [1,0,3,2,5,4,7,6,8];

my $layout = {"title"=> "Global Font",
          "font"=> {"color"=> "#7f7f7f",
                   "family"=> "Courier New, monospace",
                   "size"=> 18}
};

my $response = $py->plot($x,$y, layout=>$layout);

Global Font

Titles, Axes Names and Trace Names

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8];
my $y = [0,1,2,3,4,5,6,7,8];
my $x2 = [0,1,2,3,4,5,6,7,8];
my $y2 = [1,0,3,2,5,4,7,6,8];

my $data = [{"x"=> x,
         "y"=> y,
         "name"=>"Name of Trace 1"
         },
        {"x"=> x2,
         "y"=> y2,
         "name"=>"Name of Trace 2"
         }
        ]

my $layout = {

"title"=> "Plot Title",
          "xaxis"=> {
              "title"=>"x Axis",
              "titlefont"=> {
                  "color"=>"#7f7f7f",
                  "family"=>"Courier New, monospace",
                  "size"=>18
              }
          },
          "yaxis"=> {
              "title"=>"y Axis",
              "titlefont"=> {
                  "color"=>"#7f7f7f",
                  "family"=>"Courier New, monospace",
                  "size"=>18
              }
          }
};

my $response = $py->plot([$data], layout=>$layout);

Titles, Axes Names and Trace Names

Simple Annotation

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8];
my $y = [0,1,3,2,4,3,4,6,5];
my $x2 = [0,1,2,3,4,5,6,7,8];
my $y2 = [0,4,5,1,2,2,3,4,2];


my $layout = {
    "showlegend"=> False,
    "annotations"=> [{
        "text"=> "Annotation Text",
        "xref"=> "x",
        "yref"=> "y",
        "x"=> 2,
        "y"=> 5,
        "ax"=> 0,
        "ay"=> -40,
        "showarrow"=> True,
        "arrowhead"=> 7
    }]
};

my $response = $py->plot($x,$y,$x2,$y2, layout=>$layout);

Simple Annotation

Multiple Annotations

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8];
my $y = [0,1,3,2,4,3,4,6,5];
my $x2 = [0,1,2,3,4,5,6,7,8];
my $y2 = [0,4,5,1,2,2,3,4,2];


my $layout = {
    "showlegend"=> False,
    "annotations"=> [{
        "text"=> "Annotation Text",
        "xref"=> "x",
        "yref"=> "y",
        "x"=> 2,
        "y"=> 5,
        "ax"=> 0,
        "ay"=> -40,
        "showarrow"=> True,
        "arrowhead"=> 7
    },
    {
        "text"=> "Annotation Text 2",
        "xref"=> "x",
        "yref"=> "y",
        "x"=> 4,
        "y"=> 4,
        "ax"=> 0,
        "ay"=> -40,
        "showarrow"=> True,
        "arrowhead"=> 7
    }]
};

my $response = $py->plot($x,$y,$x2,$y2, layout=>$layout);

Multiple Annotations

Styling Annotations

Toggle Notes and Options
my $x = [0,1,2,3,4,5,6,7,8];
my $y = [0,1,3,2,4,3,4,6,5];
my $x2 = [0,1,2,3,4,5,6,7,8];
my $y2 = [0,4,5,1,2,2,3,4,2];


my $layout = {
    "showlegend"=> False,
    "annotations"=> [{
        "text"=> "max=5",
        "xref"=> "x",
        "yref"=> "y",
        "x"=> 2,
        "y"=> 5,
        "ax"=> 20,
        "ay"=> -30,
        "arrowhead"=> 2,
        "arrowsize"=> 1,
        "arrowwidth"=> 2,
        "arrowcolor"=> "#636363",
        "bgcolor"=> "#ff7f0e",
        "bordercolor"=> "#c7c7c7",
        "borderpad"=> 4,
        "borderwidth"=> 2,
        "font"=> {
            "color"=> "#ffffff",
            "family"=> "Courier New, monospace",
            "size"=> 16
        },
        "opacity"=> 0.8,
        "showarrow"=> True,
        "align"=> "center"
    }]
};

my $response = $py->plot($x,$y,$x2,$y2, layout=>$layout);

Styling Annotations

Simple Bubblechart

Toggle Notes and Options
my $data = [
    {'x'=> [1,2,3,4],
     'y'=> [10,11,12,13],
     'marker'=>{
        'size'=> [12, 22, 32, 42], # diameter
        'color'=> ['hsl(0,100,40)', 'hsl(33,100,40)', 'hsl(66,100,40)', 'hsl(99,100,40)'],
        'opacity'=>[.60, .70, .80, .90],
     },
     'mode'=> 'markers'
     },
     {'x'=> [1,2,3,4],
     'y'=> [11,12,13,14],
     'marker'=>{
        'color'=> 'rgb(31, 119, 180)',
        'size'=> 18,
        'symbol'=> ['circle', 'square', 'diamond', 'cross']
     },
     'mode'=> 'markers'
     },
     {'x'=> [1,2,3,4],
     'y'=> [12,13,14,15],
     'marker'=>{
        'size'=> 18,
        'line'=>{
            'color'=> ['rgb(120,120,120)', 'rgb(120,120,120)', 'red', 'rgb(120,120,120)'],
            'width'=> [2, 2, 6, 2]
        }
     },
     'mode'=> 'markers'
     }
];

my $layout = {'showlegend'=>false};
my $response = $py->plot($x,$y,$x2,$y2, layout=>$layout);

Simple Bubblechart

Private Graph

Toggle Notes and Options
my $x = [0,2,4];
my $y = [0,4,2];

my $response = $py->plot($x,$y,$x2,$y2, world_readable=>false);

Private Graph

Public Graph

Toggle Notes and Options
my $x = [0,2,4];
my $y = [0,4,2];

my $response = $py->plot($x,$y,$x2,$y2, world_readable=>true);

Public Graph

File Naming

Toggle Notes and Options
my $x = [0,2,4];
my $y = [0,4,2];

my $response = $py->plot($x,$y,$x2,$y2, filename=>"myplotlygraph");
#or
my $response = $py->plot($x,$y,$x2,$y2, filename=>"myfolder/myplotlygraph");

File Naming

Data Visibility

Toggle Notes and Options
my $data = [
  {
    'x'=> [0,1,2,3],
    'y'=> [0,2,4,6],
    'visible'=> true
  },

  {
    'x'=> [0,1,2,3],
    'y'=> [8,4,2,0],
    'visible'=> false
  }
];

my $response = $py->plot($data);

Data Visibility

New Graph

$py->plot([1,2], [3,4],
    filename=>'new plot',
    fileopt=>'new');

API RESPONSE:

{u'error': u'',
 u'filename': u'new plot',
 u'message': u'',
 u'url': u'https://plot.ly/~IPython.Demo/497',
 u'warning': u''}
$py->plot([1,2], [3,4],
    filename=>'new plot',
    fileopt=>'new');
Check out the filename and url in the responses. We specified the same filename in both calls, but since we used the fileopt 'new', our second call appended '(1)' to the filename and created a new unique url for that graph. The first graph was not overwritten.

API RESPONSE:

{u'error': u'',
 u'filename': u'new plot (1)',
 u'message': u'',
 u'url': u'https://plot.ly/~IPython.Demo/498',
 u'warning': u''}

Overwrite

The overwrite option will save the plot with the specified filename no matter what. If a plot already exists under the same name, it will overwrite it and create a revision. If the plot with that filename doesn't exist, it will create it!
$py->plot([1,2], [3,4],
    filename=>'same plot',
    fileopt=>'overwrite');

API RESPONSE:

{u'error': u'',
 u'filename': u'same plot',
 u'message': u'',
 u'url': u'https://plot.ly/~IPython.Demo/494',
 u'warning': u''}
$py->plot([10,20], [30,40],
    filename=>'same plot',
    fileopt=>'overwrite');

API RESPONSE:

{u'error': u'',
 u'filename': u'same plot',
 u'message': u'',
 u'url': u'https://plot.ly/~IPython.Demo/494',
 u'warning': u''}

Append

The "append" fileopt will append the data that you supplied as new traces. If the filename doesn't exist, it will create a new file with that data.
$py->plot([1,2], [1,2],
    filename=>'append plot',
    fileopt=>'append');
Here we're starting with one trace.
$py->plot([1,2], [3,4],
    filename=>'append plot',
    fileopt=>'append');
Here we are appending a new trace with points (1,3) and (2,4).
$py->plot([1,2], [4,5], [1,2], [5,6],
    filename=>'append plot',
    fileopt=>'append');
Here we are appending two new traces at points (1,4), (2,5) and (1,5), (2,6).

Extend

The "extend" fileopt will extend existing traces with your new data.
$py->plot([1,2], [1, 2], [1, 2], [2, 3], [1, 2], [3, 4],
    filename=>'extend plot',
    fileopt=>'extend');
If there is no data in the plot, 'extend' will create new traces.
$py->plot([3,4], [2, 1], [3, 4], [3, 2], [3, 4], [4, 3],
    filename=>'extend plot',
    fileopt=>'extend');
If there is data in the plot, the existing traces will be extended in respective order.
$py->plot([4,5], [2, 3],
    filename=>'extend plot',
    fileopt=>'extend',
    traces=>[1]);
You can also choose which trace to extend with the "traces" argument. Here we extend the second trace. (traces=[1])
$py->plot([5,6], [3,3], [4, 5], [1, 1],
    filename=>'extend plot',
    fileopt=>'extend',
    traces=>[2,0]);

The traces option accepts an array as an argument. Here we extend the 3rd trace in the plot with the first data set that we supply, and the 1st trace in the plot with the second data set.

Setting Style

A simple example:
$py->style([{type=>'bar'}, {type=>'scatter',marker=>{symbol=>'square', color=>'marker'}}])
This sets the first data trace to a bar chart and the second data trace to a scatter plot with purple square scatter points.

The general syntax is
$py->style($style1[,$style2,...], %kwargs)
$stylei is a Plotly formatted hash that customizes the style of the i'th trace. It is identical to the $datai dictionaries used in $py->plot except that it doesn't contain the keys x or y.

%kwargs represents optional arguments. Accepted arguments are:
filename: filename of the plot inside your plotly account. If not specified, then the style is applied to the last plot that was made in your API session.
traces: an array reference that specifies which traces to style. If not specified, then traces are styled in the order of the data hashes or, if supplied, applied to the trace specified by the $datai->{name} value.

Setting Layout

A simple example:
$py->layout({title=>'Hello World'})
This sets your plot's title to Hello World.
The general syntax is
$py->layout($layout, %kwargs)
layout is a Plotly formatted layout hash that customizes the style of the layout, the axes, and the legend.

%kwargs represents optional arguments. Accepted arguments are:
filename: filename of the plot inside your plotly account. If not specified, then the style is applied to the last plot that was made in your API session.

File Sharing

my $x = [0,2,4];
my $y = [0,4,2];

my $response = $py->plot($x,$y,$x2,$y2, filename=>"lab_results/experiment1");

When you share a folder in the Plotly tool, files created within that folder using the API are automatically shared.

In this case user demos has shared the folder lab_results with batman and robin.

When demos saves a file (experiment1 inside lab_results, batman

IFrames

Formal Syntax

A simple example:
$py->plot([0,1],[10,11])
or in an alternate syntax
$py->plot([{x=>[0,1],y=>[10,11]}])
The general plotting syntax is
$py->plot($x1, $y1[,$x2,$y2,...], %kwargs)
or
$py->plot([$data1[,$data2,...]], %kwargs)
$xi, $yi are array references or PDL objects with numbers or characters as elements.

$datai is a Plotly formatted data hash that is at least {x => $xi, y => $xi} but can contain more styling and chart-type data. For example,
$data1={x=>[0,1],y=>[10,11],name=>'Exp Results', type=>'scatter', marker=>{symbol=>'square',color=>'purple'}}
specifies a scatter trace with purple square data markers that is named Exp Results.

%kwargs represents optional arguments. Accepted arguments are:
filename: filename of the plot inside your plotly account
fileopt: file-options: 'new', 'overwrite', or 'append'
layout: a Plotly formatted layout hash describing layout options.
style: a Plotly formatted style hash describing the style of all the data traces.
world_readable: 0 or 1. If 1, the graph is Public. If 0, only the creator can see the graph.

Basic Line Plot

Toggle Notes and Options
args= [
  [1,2,3,4], [10, 15, 13, 17],
  [2,3,4,5], [16, 5, 11, 9]
]

Basic Line Plot

Line with Scatter

Toggle Notes and Options
args= [
  {
    "x": [1, 2, 3, 4],
    "y": [10, 15, 13, 17],
    "type": "scatter",
    "mode": "markers"
  },
  {
    "x": [2, 3, 4, 5],
    "y": [16, 5, 11, 9],
    "type": "scatter",
    "mode": "lines"
  },
  {
    "x": [1, 2, 3, 4],
    "y": [12, 9, 15, 12],
    "type": "scatter",
    "mode": "lines+markers"
  }
]

Line with Scatter

Styling Line and Scatter

Toggle Notes and Options
args= [
 {
   "x":[1, 2, 3], note
   "y":[4, 5, 6],
   "type":"scatter", options
   "name":"Experiment",
   "line":{
     "color":"rgb(3,78,123)", options
     "width":6,
     "dash":"dot" options
   },
   "marker":{
     "opacity":1.0,
     "symbol":"square", options
     "size":12,
     "color":"rgb(54,144,192)",
     "line":{ note
      "width":3,
      "color":"darkblue"
     }
   }
  },
  {
   "x":[1, 2, 3],
   "y":[2, 10, 12],
   "type":"scatter",
   "name":"Control",
   "line":{
     "color":"purple",
     "width":4,
     "dash":"dashdot"
   },
   "marker":{
     "opacity":0.9,
     "symbol":"cross",
     "size":16,
     "color":"fuchsia",
     "line":{
      "color":"",
      "width":0
     }
   }
  }
]

Styling Line and Scatter

Basic Area Plot

Toggle Notes and Options
args= [
  {
    "x": [1, 2, 3, 4],
    "y": [0, 2, 3, 5],
    "fill": "tozeroy"  options
  },
  {
    "x": [1, 2, 3, 4],
    "y": [3, 5, 1, 7],
    "fill": "tonexty"
    }
]

Basic Area Plot

Basic Bar Chart

Toggle Notes and Options
args= [{
  "x": ["giraffes", "orangutans", "monkeys"], note
  "y": [20, 14, 23],
  "type": "bar" options
}]

Basic Bar Chart

Grouped Bar Chart

Toggle Notes and Options
{
  args=  [
    {
    "name": "SF Zoo",
    "x": ["giraffes", "orangutans", "monkeys"],
    "y": [20, 14, 23],
    "type": "bar"
    },
    {
    "name": "LA Zoo",
    "x": ["giraffes", "orangutans", "monkeys"],
    "y": [12, 18, 29],
    "type": "bar"
    }
  ],
  kwargs= {
    "layout":{
      "barmode": "group",options
      "xaxis": {"type": "category"},
      "categories": ["giraffes", "orangutans", "monkeys"]
    }
  }
}

Grouped Bar Chart

Stacked Bar Chart

Toggle Notes and Options
{
  args=  [
    {
    "name": "SF Zoo",
    "x": ["giraffes", "orangutans", "monkeys"],
    "y": [20, 14, 23],
    "type": "bar"
    },
    {
    "name": "LA Zoo",
    "x": ["giraffes", "orangutans", "monkeys"],
    "y": [12, 18, 29],
    "type": "bar"
    }
  ],
  kwargs= {
    "layout": {
        "barmode": "stack",options
        "xaxis": {"type": "category"},
        "categories": ["giraffes", "orangutans", "monkeys"]
    }
  }
}

Stacked Bar Chart

Styling Bar Charts

Toggle Notes and Options
{
  args= [
    {
      "name": "SF Zoo",
      "x": ["giraffes", "orangutans", "monkeys"],
      "y": [20, 14, 23],
      "type": "bar",
      "marker": { note
        "color": "orange", options
        "line": {note
          "color": "grey"
          }
        }
    },
  {
    "name": "LA Zoo",
    "x": ["giraffes", "orangutans", "monkeys"],
    "y": [12,18,29],
    "type": "bar",
    "marker": {
      "color": "blue",
        "line": {
            "color": "grey",
            "width": 3
          }
      }
    }
  ],
  kwargs= "layout": {
    "title": "Animal Population",
    "barmode": "group",options
    "yaxis": {"name": "# of animals (thousands)"}
    "xaxis": {"type": "category"},
    "categories": ["giraffes", "orangutans", "monkeys"],
    "bargap": 0.25,note
    "bargroupgap": 0.3,note
    "bardir": "v"
  }options
}

Styling Bar Charts

Basic Error Bars

Toggle Notes and Options
args= [
  {
    "x": [0, 1, 2],
    "y": [6, 10, 2],
    "error_y": {
      "type": "data",options
      "array": [1, 2, 3],note
      "visible": true
    }
  }
]

Basic Error Bars

Percentage, Constant or Square Root

Toggle Notes and Options
args= [
  {
    "x": [0, 1, 2],
    "y": [6, 10, 2],
    "error_y": {
      "type": "percent",options
      "value": 50,note
      "visible": true
    }
  }
]

Percentage, Constant or Square Root

Bar Chart with Error Bars

Toggle Notes and Options
{
  args= [
  {
    "x": ["Trial 1", "Trial 2", "Trial 3"],
    "y": [3, 6, 4],
    "name": "Control",
    "error_y": {
        "type": "data",
        "array": [1, 0.5, 1.5],
        "visible": true
      }
  },
  {
    "x": ["Trial 1", "Trial 2", "Trial 3"],
    "y": [4, 7, 3],
    "name": "Experimental",
    "error_y": {
      "type": "data",options
        "array": [0.5, 1, 2], note
      "visible": true
      }
  }
],
  kwargs= {
    layout: {
      "barmode": "group"
    }
  }
}

Bar Chart with Error Bars

Basic Box Plot

Toggle Notes and Options
args= [
  {
    "y": [0, 1, 2, 4],
    "type": "box"
  },
  {
    "y": [1, 2, 4, 5, 8],
    "type": "box"
  }
]

Basic Box Plot

Box Plot with Jitter

Toggle Notes and Options
args= [
  {
    "y": [...],
    "type": "box",
    "boxpoints": "all", options
    "jitter": 0.3,   note
    "pointpos": -1.8  note
  }
]

Box Plot with Jitter

Basic Histogram

Toggle Notes and Options
args= [
  {
    "x": [...],
    "type": "histogramx"
  }
]

Basic Histogram

Stacked Histogram

Toggle Notes and Options
{
  args= [
    {
      "x": [...],
      "type": "histogramx"
    },
    {
      "x": [...],
      "type": "histogramx"
    }
  ],
  kwargs= {
    "layout":
    {
      "barmode": "stacked" options
    }
  }

}

Stacked Histogram

Overlaid Histogram

Toggle Notes and Options
{
  args= [
    {
      "x": [...],
      "type": "histogramx"
    },
    {
      "x": [...],
      "type": "histogramx"
    }
  ],
  kwargs= {
    "layout":
    {
      "barmode": "stacked" options
    }
  }
}

Overlaid Histogram

Styling Histograms

Toggle Notes and Options
args= [
  {
    "x": [...],
    "type": "histogramx",
    "name": "control",
    "marker": {note
      "color": "fuchsia",options
      "opacity": 0.75,
      "line": {
        "color": "grey",note
        "width": 0
      }
    },
    "autobinx": False,
    "xbins": {
      "start": -3.2,
      "end": 2.8,
      "size": 0.2
    },
    "histnorm": "count"options
  },
  {
    "x": [...],
    "name": "experimental",
    "type": "histogramx",
    "marker": {
      "color": "rgb(255, 217, 102)",
      "opacity": 0.75
    },
    "autobinx": False,
    "xbins": {
      "start": -1.8,
      "end": 4.2,
      "size": 0.2
    }
  }
],
  kwargs= {
    "layout": {
      "barmode": "overlay",options
      "bargap": 0.25,note
      "bargroupgap": 0.3,note
      "bardir": "v",options
      "title": "Sampled Results",
      "xaxis": {
      "title": "Value"
      },
      "yaxis": {
        "title": "Count"
      }
    }
  }
}

Styling Histograms

2D Histogram

Toggle Notes and Options
args= [
  {
    "x": x,
    "y": y,
    "type": "histogram2d"
  }
]

2D Histogram

2D Histogram Options

Toggle Notes and Options
args= [
  {
  "x": x,
  "y": y,
  "type": "histogram2d",
  "autobinx": false,
  "xbins": {
    "start": -3,
    "end": 3,
    "size": 0.5
  }
  "autobiny": false,
  "ybins": {
    "start": -2.5,
    "end": 4,
    "size": 0.5
  }
  "zauto": false,
  "zmin": 0,
  "zmax": 0.4,
  "scl":note
    [[0, "rgb(8, 29, 88"],
      [0.25, "rgb(34, 94, 168)"],
      [0.5, "rgb(65, 182, 196)"],
      [0.75, "rgb(199, 233, 180)"],
      [1, "rgb(255, 255, 217)"]],
  "histnorm": "probability"options
  }
]

2D Histogram Options

Basic Heatmap

Toggle Notes and Options
args= [
  {
  "z": [[1, 20, 30],
       [20, 1, 60],
       [30, 60, 1]],
  "type": "heatmap"
  }
]

Basic Heatmap

Labelled Heatmap

Toggle Notes and Options
args= [
  {
    "x": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
    "y": ["Morning", "Afternoon", "Evening"],
    "z": [[1, 20, 30, 50, 1],
         [20, 1, 60, 80, 30],
         [30, 60, 1, -10, 20]],
    "type": "heatmap"
  }
]

Labelled Heatmap

Bar Chart with Line Plot

Toggle Notes and Options
args= [
  {
    "x": [...],
    "y": [...],
    "type": "scatter"
  },
  {
    "x": [0, 1, 2, 3, 4, 5],
    "y": [1, 0.5, 0.7, -1.2, 0.3, 0.4],
    "type": "bar"
  }
]

Bar Chart with Line Plot

2D Histogram with Scatter Overlay

Toggle Notes and Options
args= [
  {
    "x": x0,
    "y": y0,
    "marker": {
      "symbol": "circle"
    },
    "type": "scatter",
    "mode": "markers"
  },
  {
    "x": x1,
    "y": y1,
    "marker": {
      "symbol": "cross"
    },
    "type": "scatter",
    "mode": "markers"
  },
  {
    "x": [x0, x1],
    "y": [y0, y1],
    "type": "histogram2d"
  }
]

2D Histogram with Scatter Overlay

Legend Visibility

Toggle Notes and Options
args = [
[0,1,2,3,4,5,6,7,8],
[0,3,6,4,5,2,3,5,4],
[0,1,2,3,4,5,6,7,8],
[0,4,7,8,3,6,3,3,4]
]

# 'showlegend' defaults to True when there is more than one trace.
kwargs = {
  layout : {
    'showlegend':False,
  }
}

Legend Visibility

Legend Position Inside

Toggle Notes and Options
args = [
[0,1,2,3,4,5,6,7,8],
[0,3,6,4,5,2,3,5,4],
[0,1,2,3,4,5,6,7,8],
[0,4,7,8,3,6,3,3,4]
]

# Position the legend inside the graph by assigning x and y values of <= 1.
# e.g :
# {"x" : 0, "y" : 0} -- Bottom Left
# {"x" : 1, "y" : 0} -- Bottom Right
# {"x" : 1, "y" : 1} -- Top Right
# {"x" : 0, "y" : 1} -- Top Left
# {"x" : .5, "y" : 0} -- Bottom Center
# {"x" : .5, "y" : 1} -- Top Center

kwargs = {
  layout : {
    'showlegend':True,
    'legend' : {
      'x' : 1,
      'y' : 1
    }
  }
}

Legend Position Inside

Legend Position Outside

Toggle Notes and Options
args = [
[0,1,2,3,4,5,6,7,8],
[0,3,6,4,5,2,3,5,4],
[0,1,2,3,4,5,6,7,8],
[0,4,7,8,3,6,3,3,4]
]

# Position the legend outside of the graph by assigning one of the x and y values to either 100 or -100.
# e.g :
# {"x" : 100, "y" : 0} -- Outside Right Bottom
# {"x" : 100, "y" : 1} -- Outside Right Top
# {"x" : 100, "y" : .5} -- Outside Right Middle
# {"x" : 0, "y" : -100} -- Under Left
# {"x" : 0.5, "y" : -100} -- Under Center
# {"x" : 1, "y" : -100} -- Under Right

kwargs = {
  layout : {
    'showlegend':True,
    'legend' : {
      'x' : 100,
      'y' : 1
    }
  }
}

Legend Position Outside

Styling the Legend

Toggle Notes and Options
args = [
[0,1,2,3,4,5,6,7,8],
[0,3,6,4,5,2,3,5,4],
[0,1,2,3,4,5,6,7,8],
[0,4,7,8,3,6,3,3,4]
]

kwargs = {
  layout : {
      legend : {
      "x" : 0,
      "y" : 1,
      "bgcolor" : "#E2E2E2",options
      "bordercolor" : "#FFFFFF",options
      "borderwidth" : 2,
      "traceorder" : "normal",options
      "font" : {
        "color" : "#000",options
        "family" : "sans-serif",options
        "size" : 12
      },
      "showlegend" : true,note
    }
  }
}

Styling the Legend

Legend Labels

Toggle Notes and Options
args=[
  {
    "x": [0,1,2,3],
    "y": [0,2,4,6],
    "name": "Orange Trace"
  },

  {
    "x": [0,1,2,3],
    "y": [8,4,2,0],
    "name": "Blue Trace"
  }
]

Legend Labels

Basic Text Chart

Toggle Notes and Options
args = [{
      "x": [0,1,2], "y": [1,1,1],
      "name": "Lines, Markers and Text",
      "text": ["Text A", "Text B", "Text C"], note
      "type": "scatter",
      "mode": "lines+markers+text", options
      "textposition": "top"options
    },
    {
      "x": [0,1,2], "y": [2,2,2],
      "name": "Markers and Text",
      "text": ["Text D", "Text E", "Text F"],
      "type": "scatter",
      "mode": "markers+text",
      "textposition": "bottom"
    },
    {
      "x": [0,1,2], "y": [3,3,3],
      "name": "Lines and Text",
      "text": ["Text G", "Text H", "Text I"],
      "type": "scatter",
      "mode": "lines+text",
      "textposition" : "bottom"
    }]

#hide legend
kwargs = {
  layout : {
  'showlegend':False,
  }
}

Basic Text Chart

Styling Text Charts

Toggle Notes and Options
args = [{
      "x": [0,1,2], "y": [1,1,1],
      "name": "Lines, Markers and Text",
      "text": ["Text A", "Text B", "Text C"],
      "type": "scatter",
      "mode": "lines+markers+text",
      "textposition": "top right",
      "textfont" : {
        "color": "#1f77b4",options
        "family": "sans serif",options
        "size": 18
      }
    },
    {
      "x": [0,1,2], "y": [2,2,2],
      "name": "Lines and Text",
      "text": ["Text G", "Text H", "Text I"],
      "type": "scatter",
      "mode": "lines+markers+text",
      "textposition" : "bottom",
      "textfont" : {
        "color": "#ff7f0e",options
        "family": "sans serif",options
        "size": 18
      }
    }]

#hide legend
kwargs = {
  layout : {
  'showlegend':False,
  }
}

Styling Text Charts

Axes Booleans

Toggle Notes and Options
args = [
[0,1,2,3,4,5,6,7,8],
[8,7,6,5,4,3,2,1,0],
[0,1,2,3,4,5,6,7,8],
[0,1,2,3,4,5,6,7,8]
]

kwargs = {
  layout : {
    "xaxis" : {
      "autorange" : True,
      "autotick" : True,
      "showgrid" : False,
      "showline" : False,note
      "showticklabels" : False,
      "zeroline" : False,
      "ticks" : "" options
    },
    "yaxis" : {
      "autorange" : True,
      "autotick" : True,
      "showgrid" : False,
      "showline" : False,note
      "showticklabels" : False,
      "zeroline" : False,
      "ticks" : "" options
    }
  }
}

Axes Booleans

Linear and Log Axes

Toggle Notes and Options
args = [
[0,1,2,3,4,5,6,7,8],
[8,7,6,5,4,3,2,1,0],
[0,1,2,3,4,5,6,7,8],
[0,1,2,3,4,5,6,7,8]
]

kwawrgs = {
  layout : {
    "xaxis" : {
      "autorange" : True,
      "type" : "log",options
    },
    "yaxis" : {
      "autorange" : True,
      "type" : "log",options
    }
  }
}

Linear and Log Axes

Manual Range

Toggle Notes and Options
args = [
[0,1,2,3,4,5,6,7,8]
[8,7,6,5,4,3,2,1,0]
[0,1,2,3,4,5,6,7,8]
[0,1,2,3,4,5,6,7,8]
]

kwargs = {
  layout : {
    "xaxis" : {
      "range" : [2,5]options
    },
    "yaxis" : {
      "range" : [2,5]options
    }
  }
}

Manual Range

Range Mode

Toggle Notes and Options
args = [
[2,4,6],
[-3,0,3]
]

kwargs = {
  layout : {
    "showlegend" : False,
    "xaxis" : {
        "autorange" : True,
        "rangemode" : "tozero"options
    },
    "yaxis" : {
        "autorange" : True,
        "rangemode" : "nonnegative"options
    }
  }
}

Range Mode

Axes Lines

Toggle Notes and Options
args = [
[0,1,2,3,4,5,6,7,8],
[8,7,6,5,4,3,2,1,0],
[0,1,2,3,4,5,6,7,8],
[0,1,2,3,4,5,6,7,8]
]

kwargs = {
  layout : {
    "xaxis" : {
      "showline" : True,note
      "mirror" : "ticks",optionsnote
      "linecolor" : "#636363",options
      "linewidth" : 6,

      "showgrid" : True,note
      "gridcolor" : "#bdbdbd",options
      "gridwidth" : 2,

      "zeroline" : True, note
      "zerolinecolor" : "#969696",options
      "zerolinewidth" : 4
    },
    "yaxis" : {
      "showline" : True,note
      "mirror" : "ticks",optionsnote
      "linecolor" : "#636363",options
      "linewidth" : 6,

      "showgrid" : True,note
      "gridcolor" : "#bdbdbd",options
      "gridwidth" : 2,

      "zeroline" : True, note
      "zerolinecolor" : "#969696",options
      "zerolinewidth" : 4
    }
  }
}

Axes Lines

Axes Ticks

Toggle Notes and Options
args= [
[0,1,2,3,4,5,6,7,8],
[8,7,6,5,4,3,2,1,0],
[0,1,2,3,4,5,6,7,8],
[0,1,2,3,4,5,6,7,8]
]

kwargs = {
  layout : {
    "xaxis" : {
      "autotick" : False,
      "tick0" : 0,note
      "dtick" : .25,note
      "ticks" : "outside",options
      "tickcolor" : "#000",options
      "ticklen" : 8,note
      "tickwidth" : 4
    },
    "yaxis" : {
      "autotick" : False,
      "tick0" : 0,note
      "dtick" : .25,note
      "ticks" : "outside",options
      "tickcolor" : "#000",options
      "ticklen" : 8,note
      "tickwidth" : 4
    }
  }
}

Axes Ticks

Axes Labels

Toggle Notes and Options
args=[
[0,1,2,3,4,5,6,7,8],
[8,7,6,5,4,3,2,1,0],
[0,1,2,3,4,5,6,7,8],
[0,1,2,3,4,5,6,7,8]
]

kwargs={
  layout: {
    "xaxis": {
      "title" : "AXIS TITLE",

      "titlefont" : {
        "color" : "lightgrey",options
        "family" : "Arial, sans-serif",options
        "size" : 18
      },
      "showticklabels" : True,
      "tickfont" : {
        "color" : "black",options
        "family" : "Old Standard TT, serif",options
        "size" : 14
      },
      "tickangle" : 45,options
      "showexponent" : "All",options
      "exponentformat" : "e",options
    }
  },
  "yaxis": {
      "title" : "AXIS TITLE",

      "titlefont" : {
        "color" : "lightgrey",options
        "family" : "Arial, sans-serif",options
        "size" : 18
      },
      "showticklabels" : True,
      "tickfont" : {
        "color" : "black",options
        "family" : "Old Standard TT, serif",options
        "size" : 14
      },
      "tickangle" : 45,options
      "showexponent" : "All",options
      "exponentformat" : "e",options
    }
  }

Axes Labels

Reversed Axes

Toggle Notes and Options
args = [{
  "x": [1,2],
  "y": [1,2]
}];

kwargs = {
  "layout": {
    "xaxis": {
      "autorange": "reversed"
    }
  }
}

Reversed Axes

Date Axes

Toggle Notes and Options
#Plotly understands dates and times as strings in the format YYYY-MM-DD HH:MM:SS (e.g., "2009-10-04 22:23:00")

args = [
["2013-10-04 22:23:00", "2013-11-04 22:23:00", "2013-12-04 22:23:00"],
[1,3,6]
]

Date Axes

Simple Double Axes

Toggle Notes and Options
args=[{
      "x":[1,2,3],
      "y":[40,50,60],
      "name":"yaxis data"
   },
   {
      "x":[2,3,4],
      "y":[4,5,6],
      "yaxis":"y2",
      "name": "yaxis2 data"
   }];

kwargs={
"layout": {
   "title": "Double Y Axis Example",
   "yaxis": {
      "title": "yaxis title"
   },
   "yaxis2": {
      "title": "yaxis2 title",
      "titlefont": {
         "color": "rgb(148, 103, 189)"
      },
      "tickfont":{
         "color": "rgb(148, 103, 189)"
      },
      "overlaying":"y",
      "side":"right"
   }
}
}

Simple Double Axes

Simple Multiple Axes

Toggle Notes and Options
args=[{
    "x":[1,2,3],
    "y":[4,5,6],
    "name":"yaxis1 data"
   },
   {
      "x":[2,3,4],
      "y":[40,50,60],
      "name":"yaxis2 data",
      "yaxis":"y2"
   },
   {
      "x":[3,4,5],
      "y":[400,500,600],
      "name":"yaxis3 data",
      "yaxis":"y3"
    },
    {
    "x":[4,5,6],
    "y":[40000,50000,60000],
    "name":"yaxis4 data",
    "yaxis":"y4"
   },
    {
    "x":[5,6,7],
    "y":[400000,500000,600000],
    "name":"yaxis5 data",
    "yaxis":"y5"
   },
    {
    "x":[6,7,8],
    "y":[4000000,5000000,6000000],
    "name":"yaxis6 data",
    "yaxis":"y6"
   }]

kwargs={
"layout": {
    "width":800,
    "xaxis":{
        "domain":[0.3,0.7]
    },
   "yaxis": {
      "title": "yaxis title",
      "titlefont":{
         "color":"#1f77b4"
      },
      "tickfont": {
         "color":"#1f77b4"
      }
   },
   "yaxis2":{
      "overlaying":"y",
      "side":"left",
      "anchor":"free",
      "position":0.15,

      "title": "yaxis2 title",
      "titlefont":{
         "color":"#ff7f0e"
      },
      "tickfont":{
         "color":"#ff7f0e"
      }
   },
   "yaxis3":{
      "overlaying":"y",
      "side":"left",
      "anchor":"free",
      "position":0,

      "title": "yaxis3 title",
      "titlefont":{
         "color":"#2ca02c"
      },
      "tickfont":{
         "color":"#2ca02c"
      }
   },

   "yaxis4":{
      "overlaying":"y",
      "side":"right",
      "anchor":"x",

      "title": "yaxis4 title",
      "titlefont":{
         "color":"#d62728"
      },
      "tickfont":{
         "color":"#d62728"
      }
   },

   "yaxis5":{
      "overlaying":"y",
      "side":"right",
      "anchor":"free",
      "position":0.85,

      "title": "yaxis5 title",
      "titlefont":{
         "color":"#9467bd"
      },
      "tickfont":{
         "color":"#9467bd"
      }
   },

   "yaxis6":{
      "overlaying":"y",
      "side":"right",
      "anchor":"free",
      "position":1.0,

      "title": "yaxis6 title",
      "titlefont":{
         "color":"#8c564b"
      },
      "tickfont":{
         "color":"#8c564b"
      }
    },
    "title": "multiple y-axes example"
}}
Simple Multiple Axes

Simple Subplot

Toggle Notes and Options
args=[{
      "x":[1,2,3],
      "y":[4,5,6]
      },
      {
      "x":[20,30,40],
      "y":[50,60,70],
      "xaxis":"x2",
      "yaxis":"y2"
      }]

kwargs={
"layout": {
    "xaxis":{
        "domain":[0,0.45]
    },
    "xaxis2":{
        "domain":[0.55,1]
    },
    "yaxis2":{
        "anchor":"x2"
    }
}}

Simple Subplot

Custom Sized Subplot

Toggle Notes and Options
args=[{
   "x":[1,2,3],
   "y":[4,5,6]
   },
   {
   "x":[20,30,40],
   "y":[50,60,70],
   "xaxis":"x2",
   "yaxis":"y2"
   }]

kwargs={
"layout": {
    "xaxis": {
        "domain":[0,0.7]
    },
    "xaxis2": {
        "domain":[0.8,1]
    },
    "yaxis2": {
        "anchor":"x2"
    }
}}

Custom Sized Subplot

Multiple Subplots

Toggle Notes and Options
args= [{
   "x":[1,2,3],
   "y":[4,5,6]
   },
   {
   "x":[20,30,40],
   "y":[50,60,70],
   "xaxis":"x2",
   "yaxis":"y2"
   },
   {
   "x":[300,400,500],
   "y":[600,700,800],
   "xaxis":"x3",
   "yaxis":"y3"
   },
   {
   "x":[4000,5000,6000],
   "y":[7000,8000,9000],
   "xaxis":"x4",
   "yaxis":"y4"
   }
]

kwargs={
"layout": {
    "xaxis": {
        "domain":[0,0.45]
    },
    "yaxis": {
        "domain":[0,0.45]
    },
    "xaxis2": {
        "domain":[0.55,1]
    },
    "yaxis2": {
        "domain":[0,0.45],
        "anchor":"x2"
    },
    "xaxis3": {
        "domain":[0,0.45],
        "anchor":"y3"
    },
    "yaxis3": {
        "domain":[0.55,1]
    },
    "xaxis4": {
        "domain":[0.55,1],
        "anchor":"y4"
    },
    "yaxis4": {
        "domain":[0.55,1],
        "anchor":"x4"
    }
}}

Multiple Subplots

Subplots with Shared Axes

Toggle Notes and Options
args=[{
      "x": [1,2,3],
      "y": [2,3,4]
   },
   {
      "x": [20,30,40],
      "y": [5,5,5],
      "xaxis": "x2",
      "yaxis": "y"
   },
   {
      "x": [2,3,4],
      "y": [600,700,800],
      "xaxis": "x",
      "yaxis": "y3"
   },
   {
      "x": [4000,5000,6000],
      "y": [7000,8000,9000],
      "xaxis": "x4",
      "yaxis": "y4"
   }
]

kwargs={
"layout": {
    "xaxis": {
        "domain": [0,0.45]
    },
    "yaxis": {
        "domain": [0,0.45],
    "xaxis2": {
        "domain": [0.55,1]
    },
    "yaxis3": {
        "domain": [0.55,1]
    },
    "xaxis4": {
        "domain": [0.55,1],
        "anchor": "y4"
    },
    "yaxis4": {
        "domain": [0.55,1],
        "anchor": "x4"
    }
   }}}

Subplots with Shared Axes

Stacked Subplots

Toggle Notes and Options
args=[{"x": [0,1,2], "y": [10,11,12]},
     {"x": [2,3,4], "y": [100,110,120], "yaxis": "y2", "xaxis": "x2"},
     {"x": [3,4,5], "y": [1000,1100,1200], "yaxis": "y3", "xaxis": "x3"}]

kwargs={
"layout": {
    "yaxis": {"domain": [0,2.66]},
    "yaxis2": {"domain":[3.66,0.633]},
    "yaxis3": {"domain":[0.733,1]},
    "xaxis2": {"anchor":"y2"},
    "xaxis3": {"anchor":"y3"},
    "legend": {"traceorder": "reversed"}
}}

Stacked Subplots

Stacked Subplots with Coupled X-Axis

Toggle Notes and Options
args=[{"x": [0,1,2], "y": [10,11,12]},
     {"x": [2,3,4], "y": [100,110,120], "yaxis": "y2"},
     {"x": [3,4,5], "y": [1000,1100,1200], "yaxis": "y3"}]

kwargs={
"layout": {
    "yaxis": {"domain": [0,0.33]},
    "yaxis2": {"domain":[0.33,0.66]},
    "yaxis3": {"domain":[0.66,1]},
    "legend": {"traceorder": "reversed"}
}}

Stacked Subplots with Coupled X-Axis

Simple Inset

Toggle Notes and Options
args=[{
   "x":[1,2,3],
   "y":[4,3,2]
   },
   {
   "x":[20,30,40],
   "y":[30,40,50],
   "xaxis":"x2",
   "yaxis":"y2"
   }
]

kwargs={
"layout": {
   "xaxis2": {
      "domain": [0.6, 0.95],
      "anchor": "y2"
   },
   "yaxis2":{
      "domain": [0.6, 0.95],
      "anchor": "x2"
   }
}}

Simple Inset

Plot and Margin Size

Toggle Notes and Options
args=[
[0,1,2,3,4,5,6,7,8],
[0,1,2,3,4,5,6,7,8]
]

kwargs={
    "layout": {
        "autosize": false,
        "height": 500,
        "width": 500,
        "margin": {
            "t":100,
            "b":100,
            "r":50,
            "l":50,
            "pad":4
        },
        "plot_bgcolor": "#c7c7c7",
        "paper_bgcolor": "#7f7f7f"
    }
}

Plot and Margin Size

Global Font

Toggle Notes and Options
args=[
[0,1,2,3,4,5,6,7,8],
[0,1,2,3,4,5,6,7,8],
[0,1,2,3,4,5,6,7,8],
[1,0,3,2,5,4,7,6,8]
]


kwargs={
    "layout": {
        "title": "Global Font",
        "font": {
            "color": "#7f7f7f",
            "family": "Courier New, monospace",
            "size": 18
        }
    }
}

Global Font

Titles, Axes Names and Trace Names

Toggle Notes and Options
args=[{
    "x": [0,1,2,3,4,5,6,7,8],
    "y": [0,1,2,3,4,5,6,7,8],
    "name":"Name of Trace 1"
    },
    {"x": [0,1,2,3,4,5,6,7,8],
    "y": [1,0,3,2,5,4,7,6,8],
    "name":"Name of Trace 2"
    }
]

kwargs={
    "layout": {
        "title": "Plot Title",
        "xaxis": {
            "title":"x Axis",
            "titlefont": {
                "color":"#7f7f7f",
                "family":"Courier New, monospace",
                "size":18
            }
        },
        "yaxis": {
            "title":"y Axis",
            "titlefont": {
                "color":"#7f7f7f",
                "family":"Courier New, monospace",
                "size":18
            }
        }
    }
}

Titles, Axes Names and Trace Names

Simple Annotation

Toggle Notes and Options
args=[{
    "x": [0,1,2,3,4,5,6,7,8],
    "y": [0,1,3,2,4,3,4,6,5]
    },
    {
    "x": [0,1,2,3,4,5,6,7,8],
    "y": [0,4,5,1,2,2,3,4,2]
    }
]


kwargs={
"layout": {
    "showlegend": false,
    "annotations": [{
        "text": "Annotation Text",
        "xref": "x",
        "yref": "y",
        "x": 2,
        "y": 5,
        "ax": 0,
        "ay": -40,
        "showarrow": true,
        "arrowhead": 7
    }]
}}

Simple Annotation

Multiple Annotations

Toggle Notes and Options
args=[{
    "x": [0,1,2,3,4,5,6,7,8],
    "y": [0,1,3,2,4,3,4,6,5]
    },
    {
    "x": [0,1,2,3,4,5,6,7,8],
    "y": [0,4,5,1,2,2,3,4,2]
    }
]


kwargs={
"layout": {
    "showlegend": false,
    "annotations": [{
        "text": "Annotation Text",
        "xref": "x",
        "yref": "y",
        "x": 2,
        "y": 5,
        "ax": 0,
        "ay": -40,
        "showarrow": true,
        "arrowhead": 7
    },
    {
        "text": "Annotation Text 2",
        "xref": "x",
        "yref": "y",
        "x": 4,
        "y": 4,
        "ax": 0,
        "ay": -40,
        "showarrow": true,
        "arrowhead": 7
    }]
}}

Multiple Annotations

Styling Annotations

Toggle Notes and Options
args=[{
    "x": [0,1,2,3,4,5,6,7,8],
    "y": [0,1,3,2,4,3,4,6,5]
    },
    {
    "x": [0,1,2,3,4,5,6,7,8],
    "y": [0,4,5,1,2,2,3,4,2]
    }
]

kwargs={
"layout": {
    "showlegend": false,
    "annotations": [{
        "text": "max=5",
        "xref": "x",
        "yref": "y",
        "x": 2,
        "y": 5,
        "ax": 20,
        "ay": -30,
        "arrowhead": 2,
        "arrowsize": 1,
        "arrowwidth": 2,
        "arrowcolor": "#636363",
        "bgcolor": "#ff7f0e",
        "bordercolor": "#c7c7c7",
        "borderpad": 4,
        "borderwidth": 2,
        "font": {
            "color": "#ffffff",
            "family": "Courier New, monospace",
            "size": 16
        },
        "opacity": 0.8,
        "showarrow": true,
        "align": "center"
    }]
}}

Styling Annotations

Simple Bubblechart

Toggle Notes and Options
args=[
    {"x": [1,2,3,4],
     "y": [10,11,12,13],
     "marker":{
        "size": [12, 22, 32, 42],
        "color": ["hsl(0,100,40)", "hsl(33,100,40)", "hsl(66,100,40)", "hsl(99,100,40)"],
        "opacity":[0.60, 0.70, 0.80, 0.90]
     },
     "mode": "markers"
     },
     {"x": [1,2,3,4],
     "y": [11,12,13,14],
     "marker":{
        "color": "rgb(31, 119, 180)",
        "size": 18,
        "symbol": ["circle", "square", "diamond", "cross"]
     },
     "mode": "markers"
     },
     {"x": [1,2,3,4],
     "y": [12,13,14,15],
     "marker":{
        "size": 18,
        "line":{
            "color": ["rgb(120,120,120)", "rgb(120,120,120)", "red", "rgb(120,120,120)"],
            "width": [2, 2, 6, 2]
        }
     },
     "mode": "markers"
     }
]

kwargs={
    "layout": {"showlegend": false}
}

Simple Bubblechart

Private Graph

Toggle Notes and Options
args=[{
  "x": [0,2,4],
  "y": [0,4,2]
}]

kwargs={
  "world_readable": false
}
Private Graph

Public Graph

Toggle Notes and Options
args=[{
  "x": [0,2,4],
  "y": [0,4,2]
}]

kwargs={
  "world_readable": true
}
Public Graph

File Naming

Toggle Notes and Options
args=[{
  "x": [0,2,4],
  "y": [0,4,2]
}]

kwargs={
  "filename": "myplotlygraph"
}

#or

kwargs={
  "filename": "myfolder/myplotlygraph"
}
File Naming

Data Visibility

Toggle Notes and Options
args=[
  {"x": [0,1,2,3],
    "y": [0,2,4,6],
    "visible": true
  },

  {
    "x": [0,1,2,3],
    "y": [8,4,2,0],
    "visible": false
  }
]
Data Visibility

New Graph

{
  args= [
    [1,2],
    [3,4]
  ],
  kwargs= {
    "filename": "new plot",
    "fileopt": "new",
  }
}

API RESPONSE:

{"url": "https://plot.ly/~demos/1058/",
 "message": "",
 "warning": "",
 "filename": "new plot",
 "error": ""}
{
  args= [
    [1,2],
    [3,4]
  ],
  kwargs= {
    "filename": "new plot",
    "fileopt": "new",
  }
}
Check out the filename and url in the responses. We specified the same filename in both calls, but since we used the fileopt 'new', our second call appended '(1)' to the filename and created a new unique url for that graph. The first graph was not overwritten.

API RESPONSE:

{"url": "https://plot.ly/~demos/1059/",
 "message": "",
 "warning": "",
 "filename": "new plot (1)",
 "error": ""}

Overwrite

The overwrite option will save the plot with the specified filename no matter what. If a plot already exists under the same name, it will overwrite it and create a revision. If the plot with that filename doesn't exist, it will create it!
{
  args= [
    [1,2],
    [3,4]
  ],
  kwargs= {
    "filename": "same plot",
    "fileopt": "overwrite",
  }
}

API RESPONSE:

{"url": "https://plot.ly/~demos/1058/",
 "message": "",
 "warning": "",
 "filename": "same plot",
 "error": ""}
{
  args= [
    [10,20],
    [30,40]
  ],
  kwargs= {
    "filename": "same plot",
    "fileopt": "overwrite",
  }
}

API RESPONSE:

{"url": "https://plot.ly/~demos/1058/",
 "message": "",
 "warning": "",
 "filename": "same plot",
 "error": ""}

Append

The "append" fileopt will append the data that you supplied as new traces. If the filename doesn't exist, it will create a new file with that data.
{
  args= [
    [1,2],
    [1,2]
  ],
  kwargs= {
    "filename": "append plot",
    "fileopt": "append",
  }
}
Here we're starting with one trace.
{
  args= [
    [1,2],
    [3,4]
  ],
  kwargs= {
    "filename": "append plot",
    "fileopt": "append",
  }
}
Here we are appending a new trace with points (1,3) and (2,4).
{
  args= [
    [1,2],
    [4,5],
    [1,2],
    [5,6],
  ],
  kwargs= {
    "filename": "append plot",
    "fileopt": "append",
  }
}
Here we are appending two new traces at points (1,4), (2,5) and (1,5), (2,6).

Extend

The "extend" fileopt will extend existing traces with your new data.
{
  args= [
    [1,2],
    [1,2],
    [1,2],
    [2,3],
    [1,2],
    [3,4],
  ],
  kwargs= {
    "filename": "extend plot",
    "fileopt": "extend",
  }
}
If there is no data in the plot, 'extend' will create new traces.
{
  args= [
    [3,4],
    [2,1],
    [3,4],
    [3,2],
    [3,4],
    [4,3],
  ],
  kwargs= {
    "filename": "extend plot",
    "fileopt": "extend",
  }
}
If there is data in the plot, the existing traces will be extended with the data in the order that it is supplied.
{
  args= [
    [4,5],
    [2,3]
  ],
  kwargs= {
    "filename": "extend plot",
    "fileopt": "extend",
    "traces": [1]
  }
}
You can also choose which trace to extend with the "traces" argument. Here we extend the second trace. (traces=[1])
{
  args= [
    [5,6],
    [3,3],
    [4,5],
    [1,1]
  ],
  kwargs= {
    "filename": "extend plot",
    "fileopt": "extend",
    "traces": [2,0]
  }
}
The traces option accepts an array as an argument. Here we extend the 3rd trace in the plot with the first data set that we supply, and the 1st trace in the plot with the second data set.

Setting Style

[{"type": "bar"}, {"type": "scatter", "marker": {"symbol": "square", "color": "marker"}}])

Setting Layout

{"title": "experimental data"}

File Sharing

args=[{
  "x": [0,2,4],
  "y": [0,4,2]
}]

kwargs={
  "filename": "lab_results/experiment1"
}

When you share a folder in the Plotly tool, files created within that folder using the API are automatically shared.

In this case user demos has shared the folder lab_results with batman and robin.

When demos saves a file (experiment1 inside lab_results, batman

IFrames

Plotly + IFrames

Embedding your Plotly Graphs into HTML



Plotly makes it easy to embed your interactive graphs into your HTML as iframes.
For example, the graph below was embedded using the following code:
<iframe height="600" id="igraph" scrolling="no" seamless="seamless" src="https://plot.ly/~Dreamshot/212/550/550" width="100%"></iframe> Replace the "src" attribute with the url to your plotly graph. The last two values represent the width and height, respectively.

Wide Example

<iframe height="650" id="igraph" scrolling="no" seamless="seamless" src="https://plot.ly/~Dreamshot/212/800/600" width="850"></iframe>

Pocket Sized Example

<iframe height="450" id="igraph" scrolling="no" seamless="seamless" src="https://plot.ly/~Dreamshot/212/400/400" width="450"></iframe>

Basic streaming concepts

Streaming has been added as an additional API layer on top of the REST API. Therefore you follow the steps for making a REST API plot request to instantiate a base plot with your desired layout, style and mapping of streaming tokens to data arrays. This is accomplished by following the documentation for the REST API with the addition of adding tokens into the data object.
[{
  "x": [],
  "y": [],
  "type": "scatter",
  "mode": "markers",
  "stream": {
      "token": "xxxyyyxxxi",
      "maxpoints": 500
      }
}]
Once this has successfully been posted you are ready to begin streaming to the streaming endpoint, http://stream.plot.ly. To match your data stream to the correct data object in the initialized plot attach a token to the HTTP headers sent to the streaming endpoint.
headers = {"plotly-streamtoken": "xxxyyyxxxi"}
Once the stream has been connected over http, write to the request stream with newline seperated JSON.
httpRequestSocket.write('{ "x": 3, "y": 1 }\n')
The newline is extremely important. Without this delimiter the Streaming Endpoint will not deliniate your data, and will terminate the stream. You can send multiple streams to the same plot by nesting stream tokens within the corrisponding data trace object. Similarly you can use the same token for multiple traces in a plot (they will show the same stream, so this is useful only in when using subplots).

Connecting

To connect to the Streaming API, form an HTTP request and write to the request for as long as you want to maintain the stream. Our streaming cluster will hold the connection open indefinitely, barring server-side error, excessive client-side lag, network hiccups, routine server maintenance or duplicate streams using the same token. The method to form an HTTP request and write newline separated data will be different for every language or framework, so consult the documentation for the HTTP library you are using. We have provided example Python and Nodejs documentation. Some HTTP client libraries form a single request body which is sent to the server when the request is closed. These clients will not work for accessing the Streaming API. You must use an HTTP client that will allow writing response data incrementally.

Disconnections

Plotly will close a streaming connection for the following reasons:

  • A client establishes additional streams using the same stream token. When this occurs, the oldest connection will be terminated. This means you have to be careful not to run two reconnecting clients in parallel with the same credentials, or else they will take turns disconnecting each other.
  • A client stops writing data for a time period longer than a minute. If a minute passes without recieving any data from the client the stream connection will be closed. (A connection can be maintained by writing a heartbeat within the 60 second window, a hearbeat is simply a newline).
  • A streaming server is restarted. This is usually related to a code deploy and is not very frequent.

Reconnecting

Once an established connection drops, attempt to reconnect immediately. If the reconnect fails, slow down your reconnect attempts according to the type of error experienced:

  • Back off linearly for TCP/IP level network errors. These problems are generally temporary and tend to clear quickly. Increase the delay in reconnects by 250ms each attempt, up to 16 seconds.
  • Back off exponentially for HTTP errors for which reconnecting would be appropriate. Start with a 5 second wait, doubling each attempt, up to 320 seconds.

Data Loss and Write Speed

  • Incoming data should not be written faster than 50ms. We throttle incoming JSON objects at 50ms. While there is a buffer queue to absorb changes in the data rate, continuously sending data faster than 50ms will result in data loss.
  • You must send data every minute otherwise we will consider the stream stale and destroy it. If your data comes in a slower rate send a heartbeat to let the streaming server know it is still active. A heartbeat is simply a newline "\n" written within the 60 second window.

Connection Stability

Repeatedly opening and closing a connection (churn) wastes server resources. Keep your connections as stable and long-lived as possible.

HTTP Error Codes

Most error codes are returned with a string with additional details. For all codes greater than 200, clients should wait before attempting another connection. See the Connecting section, above.
{
"200": "healthy endpoint disconnect"
, "308": "stream had ended"
, "400": "invalid or malformed request syntax"
, "403": "stream token no longer associated with this plot"
, "404": "streamtoken not registered or valid"
, "405": "bad request method: use POST for streaming"
, "406": "bad request header: missing 'plotly-streamtoken'"
, "408": "timeout on active data"
, "422": "json parse error: please stream newline seperated JSON"
, "423": "connection limit associated with this token has been reached"
, "449": "stream content has changed, reloading clients"
, "500": "internal server error"
, "503": "internal database error"
, "520": "error in request stream"
}

Plotly + IPython


Formal Syntax:

py.iplot([arg1[, arg2, ...], **kwargs)

Other Plotly-IPython notebooks can be found here, with Datetime, Pandas, NumPy, and LaTeX examples


Iris Flower Dataset


Public Transit Use in North America


Plotly Logo

Plotly + Raspberry Pi Library


Getting Started

Temperature Logging with a TMP36

Hardware Setup

The Raspberry Pi does have GPIO, however without some extra help from a MCP3008 Chip,
it cannot read analog inputs. No problem, just breadboard your MCP3008, and connect your Pi Cobbler, or Solder it directly onto your Prototype Shield. You'll be slingin' some analog data in no time!

Software Setup

To get started, make sure you have all of the nessesary packages installed on you Pi.

sudo apt-get install python-dev
wget https://bitbucket.org/pypa/setuptools/raw/bootstrap/ez_setup.py -O - | sudo python
sudo easy_install -U distribute
sudo apt-get install python-pip
sudo pip install rpi.gpio
sudo pip install plotly

Once you're done installing all of the dependencies, go ahead and grab the QuickStart tool!

Or clone the repo:

git clone https://github.com/alexander-daniel/raspi-plotly.git

Now, navigate to the new raspi-plotly directory, and execute the script!

cd raspi-plotly
sudo python tmp36.py

You'll be presented with the raspi-plotly command line UI.
Enter in some information and you're ready to start logging!

========================================================
Plot.ly + Raspberry Pi + TMP36 Temperature Visualization
========================================================

Enter your Graph Name:
>>  Raspi-Plotly
Enter your Plotly Username:
>>  demos
Enter your Plotly Api Key:
>>  *********
Do you want to plot Celius for Farenheit? (c/f)
>>  c
Scatter or Bar Chart? (s/b)
>>  s
How frequently do you want to post data? (in seconds, minimum is 30)
>>

If all goes well, you'll be presented with a success sreen, including your graph's URL and Title!
As data continues to stream, you will be given updates of the readings as well.

========================================================
Successfully Posted to Plot.ly! Here is your Graph info:
========================================================

Graph URL:       https://plot.ly/~demos/1279
Graph Title:     Raspi-Plotly

========================================================

Readings Posted to Plotly:

Temperature (C):    22.0
Temperature (C):    22.0
Temperature (C):    25.0
[------------------------------------------------|     ]