Show Sidebar Hide Sidebar

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]:
'2.2.1'

Basic Range Slider and Range Selectors¶

Note this example works with version 0.5.0 of pandas_datareader. Run pip install --upgrade pandas_datareader to ensure you are using the right version of the module.

In [2]:
import plotly.plotly as py
import plotly.graph_objs as go 

from datetime import datetime
import pandas_datareader.data as web

df = web.DataReader("aapl", 'yahoo',
                    datetime(2007, 10, 1),
                    datetime(2009, 4, 1))

trace = go.Scatter(x=df.index,
                   y=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(),
        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 = go.Data([trace1, trace2, trace3, trace4, trace5])

# style all the traces
for k in range(len(data)):
    data[k].update(
        {
            "type": "scatter",
            "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]:
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.