Time Buttons in Plotly for Line Charts
Hello everyone, in this story we will try to understand time buttons in Plotly. I’m so excited because I am trying to write technical text in English while I am staying in Johannesburg for learning English. Please excuse me for my English :) Let’s try to explain time buttons in Plotly.
Can access jupyter notebook for this codes from here.
Introduction and Preparing Ourself
Before starting to use time buttons we need to install some dependencies. We will use yfinance package for access the stock data. Because of that we need to install yfinance package with pip install yfinance. After that we need to install Pandas and Plotly.
pip install yfinance
pip install pandas
pip install plotlyWhat are Time Buttons?
We can add time buttons to line charts for filter or zoom in on a specific time slice. We can see them in most stock websites. They can provide detailed images for specific time slices to us. Firstly we need to learn some short codes about this thing.
- 1D = Data for the last day
- 1M = Data for the last month
- 1Y = Data for the last year
- YTD = Data for year to date etc.
How can we use Time Buttons?
Time buttons in Plotly are a dictionary with specific keys contained in list.
- label for text which appear on the button
- count for when we click button how many steps to take
- step for which date period to move (month, year, day, etc.)
- stepmode for either todate or backward. “todate” for from the beginning of the nearest whole time period denoted in step (after going backwards by count). “backward” for just go backwards by count.
todate vs backward
To understand todate vs backward, suppose a dataset finishing on October 20th and a 6-month button with each option.
If stepmode equal to backward would zoom the plot to start on April 20th (because of backward)
If stepmode equal to todate would zoom the plot to start on May 1st (start of the nearest month to April 20th)
Get Data and Examine
And now we learned what are the time buttons. We can use them for our plots. We will access the data with using yfinance module’s “download” function. When we use this function we need to provide “stock code” “start date” and “end date”. Firstly we need to import packages which our dependencies.
import yfinance as yf
import pandas as pd
import plotly.graph_objects as godata = yf.download("AAPL", start="2019-01-01", end="2021-04-01")data.head()
Let’s Use to Time Buttons
Create the Time Buttons
Create one list for contains specific dictionaries about the buttons with specific keys.
time_buttons = [
{'count': 1, 'step': 'day', 'stepmode': 'todate', 'label': '1TD'},
{'count': 14, 'step': 'day', 'stepmode': 'todate', 'label': '2WTD'},
{'count': 6, 'step': 'month', 'stepmode': 'todate', 'label': '6MTD'},
{'count': 1, 'step': 'year', 'stepmode': 'todate', 'label': '1YTD'}
]Create Plotly Figure
Firstly we are creating figure without any plot. After that we are adding traces to that figure for columns which our needs.
fig = go.Figure()fig.add_trace(go.Scatter(x=data.index,y=data['Open'],mode='lines',name='Open'))fig.add_trace(go.Scatter(x=data.index, y=data['High'], mode='lines', name='High'))fig.add_trace(go.Scatter(x=data.index, y=data['Low'], mode='lines', name='Low'))fig.add_trace(go.Scatter(x=data.index, y=data['Close'], mode='lines', name='Close'))
If execute this code will see this result.
And now we need to add our buttons to figure. We can add them with update_xaxes function.
You see, I used update_layout function. It is for updating hover mode, when mouse hover on x axes it shows all lines data.
And I used update_xaxes function for adding our time buttons to figure. We need to update the x axes of the graph that will show the buttons.
fig.update_layout(hovermode="x unified")fig.update_xaxes(rangeselector={'buttons': time_buttons})
I hope this text will be helpful to your understanding time buttons in Plotly. Can access jupyter notebook for this codes from here.
