Time buttons

Introduction to Data Visualization with Plotly in Python

Alex Scriven

Data Scientist

What are time buttons?

Allow filter/zoom in line charts
- 1D = data for the last day
- 1M = for the last month
- 1Y = for the last year
- YTD = for the 'year to date'

Yahoo finance buttons

Time buttons in Plotly

A dictionary with a few key elements:

label = text to appear on the button
count = how many steps to take when clicking the button
step = what date period to move ('month', 'year', 'day')
stepmode = Either 'backward' or 'todate'
- 'backward' = moves straight back by the number of counts
- 'todate' = like 'backward', but rounded to the start of the next full time period

'backward' vs. 'todate'

A dataset finishing on October 20th and a 6-month button (count=6, step='month'):
- stepmode='backward' would zoom the plot to start on April 20th (6 months backward)
- stepmode='todate' would zoom the plot to start on May 1st (start of the following month to April 20th)

Sydney rainfall example

Buttons are specified as a list of dictionaries

date_buttons = [
{'count': 6, 'step': "month", 'stepmode': "todate", 'label': "6MTD"},

{'count': 14, 'step': "day", 'stepmode': "todate", 'label': "2WTD"}
]

Adding the time buttons

fig = px.line(data_frame=rain, x='Date', 
        y='Rainfall', 
        title="Rainfall (mm) in Sydney")


fig.update_layout(dict(
    xaxis=dict(
    rangeselector=dict(buttons=date_buttons)
    )))

fig.show()

line chart with buttons

Clicking our time buttons

Clicking the 2WTD button:

Rain last fortnight

Clicking the 6MTD button:

Rain last 6 months

Let's practice!

Introduction to Data Visualization with Plotly in Python