Range Slider and Selector in Python
Now you can implement range sliders and selectors in your Plotly graphs purely with python!
New to Plotly?¶
Plotly's Python library is free and open source! Get started by downloading the client and reading the primer.
You can set up Plotly to work in online or offline mode, or in jupyter notebooks.
We also have a quick-reference cheatsheet (new!) to help you get started!
Version Check¶
Note: range sliders and range selectors are available in version 1.9.7+
Run pip install plotly --upgrade to update your Plotly version
In [1]:
import plotly
plotly.__version__
Out[1]:
Basic Range Slider and Range Selectors¶
In [2]:
import plotly.plotly as py
import plotly.graph_objs as go
from datetime import datetime
import pandas as pd
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')
df.columns = [col.replace('AAPL.', '') for col in df.columns]
trace = go.Scatter(x=list(df.Date),
y=list(df.High))
data = [trace]
layout = dict(
title='Time series with range slider and selectors',
xaxis=dict(
rangeselector=dict(
buttons=list([
dict(count=1,
label='1m',
step='month',
stepmode='backward'),
dict(count=6,
label='6m',
step='month',
stepmode='backward'),
dict(count=1,
label='YTD',
step='year',
stepmode='todate'),
dict(count=1,
label='1y',
step='year',
stepmode='backward'),
dict(step='all')
])
),
rangeslider=dict(
visible = True
),
type='date'
)
)
fig = dict(data=data, layout=layout)
py.iplot(fig)
Out[2]:
Range Slider with Vertically Stacked Subplots¶
In [3]:
import plotly.plotly as py
import plotly.graph_objs as go
trace1 = go.Scatter(
x = ["2013-01-15", "2013-01-29", "2013-02-26", "2013-04-19", "2013-07-02", "2013-08-27",
"2013-10-22", "2014-01-20", "2014-05-05", "2014-07-01", "2015-02-09", "2015-04-13",
"2015-05-13", "2015-06-08", "2015-08-05", "2016-02-25"],
y = ["8", "3", "2", "10", "5", "5", "6", "8", "3", "3", "7", "5", "10", "10", "9", "14"],
name = "var0",
text = ["8", "3", "2", "10", "5", "5", "6", "8", "3", "3", "7", "5", "10", "10", "9", "14"],
yaxis = "y",
)
trace2 = go.Scatter(
x = ["2015-04-13", "2015-05-13", "2015-06-08", "2015-08-05", "2016-02-25"],
y = ["53.0", "69.0", "89.0", "41.0", "41.0"],
name = "var1",
text = ["53.0", "69.0", "89.0", "41.0", "41.0"],
yaxis = "y2",
)
trace3 = go.Scatter(
x = ["2013-01-29", "2013-02-26", "2013-04-19", "2013-07-02", "2013-08-27", "2013-10-22",
"2014-01-20", "2014-04-09", "2014-05-05", "2014-07-01", "2014-09-30", "2015-02-09",
"2015-04-13", "2015-06-08", "2016-02-25"],
y = ["9.6", "4.6", "2.7", "8.3", "18", "7.3", "3", "7.5", "1.0", "0.5", "2.8", "9.2",
"13", "5.8", "6.9"],
name = "var2",
text = ["9.6", "4.6", "2.7", "8.3", "18", "7.3", "3", "7.5", "1.0", "0.5", "2.8", "9.2",
"13", "5.8", "6.9"],
yaxis = "y3",
)
trace4 = go.Scatter(
x = ["2013-01-29", "2013-02-26", "2013-04-19", "2013-07-02", "2013-08-27", "2013-10-22",
"2014-01-20", "2014-04-09", "2014-05-05", "2014-07-01", "2014-09-30", "2015-02-09",
"2015-04-13", "2015-06-08", "2016-02-25"],
y = ["6.9", "7.5", "7.3", "7.3", "6.9", "7.1", "8", "7.8", "7.4", "7.9", "7.9", "7.6",
"7.2", "7.2", "8.0"],
name = "var3",
text = ["6.9", "7.5", "7.3", "7.3", "6.9", "7.1", "8", "7.8", "7.4", "7.9", "7.9", "7.6",
"7.2", "7.2", "8.0"],
yaxis = "y4",
)
trace5 = go.Scatter(
x = ["2013-02-26", "2013-07-02", "2013-09-26", "2013-10-22", "2013-12-04", "2014-01-02",
"2014-01-20", "2014-05-05", "2014-07-01", "2015-02-09", "2015-05-05"],
y = ["290", "1078", "263", "407", "660", "740", "33", "374", "95", "734", "3000"],
name = "var4",
text = ["290", "1078", "263", "407", "660", "740", "33", "374", "95", "734", "3000"],
yaxis = "y5",
)
data = [trace1, trace2, trace3, trace4, trace5]
# style all the traces
for k in range(len(data)):
data[k].update(
{
"hoverinfo": "name+x+text",
"line": {"width": 0.5},
"marker": {"size": 8},
"mode": "lines+markers",
"showlegend": False
}
)
layout = {
"annotations": [
{
"x": "2013-06-01",
"y": 0,
"arrowcolor": "rgba(63, 81, 181, 0.2)",
"arrowsize": 0.3,
"ax": 0,
"ay": 30,
"text": "state1",
"xref": "x",
"yanchor": "bottom",
"yref": "y"
},
{
"x": "2014-09-13",
"y": 0,
"arrowcolor": "rgba(76, 175, 80, 0.1)",
"arrowsize": 0.3,
"ax": 0,
"ay": 30,
"text": "state2",
"xref": "x",
"yanchor": "bottom",
"yref": "y"
}
],
"dragmode": "zoom",
"hovermode": "x",
"legend": {"traceorder": "reversed"},
"margin": {
"t": 100,
"b": 100
},
"shapes": [
{
"fillcolor": "rgba(63, 81, 181, 0.2)",
"line": {"width": 0},
"type": "rect",
"x0": "2013-01-15",
"x1": "2013-10-17",
"xref": "x",
"y0": 0,
"y1": 0.95,
"yref": "paper"
},
{
"fillcolor": "rgba(76, 175, 80, 0.1)",
"line": {"width": 0},
"type": "rect",
"x0": "2013-10-22",
"x1": "2015-08-05",
"xref": "x",
"y0": 0,
"y1": 0.95,
"yref": "paper"
}
],
"xaxis": {
"autorange": True,
"range": ["2012-10-31 18:36:37.3129", "2016-05-10 05:23:22.6871"],
"rangeslider": {
"autorange": True,
"range": ["2012-10-31 18:36:37.3129", "2016-05-10 05:23:22.6871"]
},
"type": "date"
},
"yaxis": {
"anchor": "x",
"autorange": True,
"domain": [0, 0.2],
"linecolor": "#673ab7",
"mirror": True,
"range": [-60.0858369099, 28.4406294707],
"showline": True,
"side": "right",
"tickfont": {"color": "#673ab7"},
"tickmode": "auto",
"ticks": "",
"titlefont": {"color": "#673ab7"},
"type": "linear",
"zeroline": False
},
"yaxis2": {
"anchor": "x",
"autorange": True,
"domain": [0.2, 0.4],
"linecolor": "#E91E63",
"mirror": True,
"range": [29.3787777032, 100.621222297],
"showline": True,
"side": "right",
"tickfont": {"color": "#E91E63"},
"tickmode": "auto",
"ticks": "",
"titlefont": {"color": "#E91E63"},
"type": "linear",
"zeroline": False
},
"yaxis3": {
"anchor": "x",
"autorange": True,
"domain": [0.4, 0.6],
"linecolor": "#795548",
"mirror": True,
"range": [-3.73690396239, 22.2369039624],
"showline": True,
"side": "right",
"tickfont": {"color": "#795548"},
"tickmode": "auto",
"ticks": "",
"title": "mg/L",
"titlefont": {"color": "#795548"},
"type": "linear",
"zeroline": False
},
"yaxis4": {
"anchor": "x",
"autorange": True,
"domain": [0.6, 0.8],
"linecolor": "#607d8b",
"mirror": True,
"range": [6.63368032236, 8.26631967764],
"showline": True,
"side": "right",
"tickfont": {"color": "#607d8b"},
"tickmode": "auto",
"ticks": "",
"title": "mmol/L",
"titlefont": {"color": "#607d8b"},
"type": "linear",
"zeroline": False
},
"yaxis5": {
"anchor": "x",
"autorange": True,
"domain": [0.8, 1],
"linecolor": "#2196F3",
"mirror": True,
"range": [-685.336803224, 3718.33680322],
"showline": True,
"side": "right",
"tickfont": {"color": "#2196F3"},
"tickmode": "auto",
"ticks": "",
"title": "mg/Kg",
"titlefont": {"color": "#2196F3"},
"type": "linear",
"zeroline": False
}
}
fig = go.Figure(data=data, layout=layout)
py.iplot(fig)
Out[3]:
Reference¶
See https://plot.ly/python/reference/#layout-xaxis-rangeselector
and https://plot.ly/python/reference/#layout-xaxis-rangeslider
for more information and attribute options!