Add line plot to existing plotly express chart

Question

import dash
from dash import Dash, html, dcc, Output, Input, callback
import plotly.graph_objects as go
import plotly.express as px

df1 = pd.read_csv(filepath+filename, index_col="Date")
df1.index = pd.to_datetime(df1.index)

df1["Measure1_SMA"] = df1["Measure1"].rolling(20).mean()
df1["Measure2_SMA"] = df1["Measure2"].rolling(20).mean()

app = Dash(__name__)

my_dropdown = dcc.Dropdown(options = ['Measure1', 'Measure2'], 
                           value = df1.columns[:2], 
                           multi = False, 
                           style = {'width':'50%'})

my_graph = dcc.Graph(figure={})

app.layout = html.Div([
    html.H1('Metrics (Values)', style = {'textAlign':'center'}),
    html.Label("Metrics: "),
    my_dropdown,
    my_graph
])

@callback(
    Output(component_id=my_graph, component_property='figure'),
    Input(component_id=my_dropdown, component_property='value')
)

def update_graph(dropdown_value):
    plot_figure = px.bar(data_frame=df1, y=dropdown_value, x=df1.index)
    #plot_figure.add_line()
    print(dropdown_value)
    return plot_figure

if __name__ == "__main__":
    app.run_server(debug=True)

I want to create a single plot on the plotly dashboard with an option to toggle between Measure1 and Measure2. Selecting the dropdown_value will create a bar graph of Measure1 on y-axis and Date on x-axis. I also want to plot a line graph on the same plot which will be the rolling average of previous 20 days for the value selected from the dropdown. I tried adding a add_line() method but not sure how to use it.

r-beginners · Accepted Answer · 2022-07-25 04:41:39Z

Creates a data frame from which the value columns and SMA columns are extracted, using the values obtained from the drop-down selections. Draw a bar graph in the created data frame and add the SMA in scatter plot line mode. drawing two graphs, I think I need to make a graph with two axes. since I could not add graphs to px.line, I reused the data in px.line to create the first I have used the data from px.line as the first graph. The sample data is stock price data.

import dash
from dash import Dash, html, dcc, Output, Input, callback
import plotly.graph_objects as go
import plotly.express as px
from plotly.subplots import make_subplots
import yfinance as yf

df1 = yf.download("AAPL", start="2021-01-01", end="2021-03-01")
df1["Close_SMA"] = df1["Close"].rolling(20).mean()
df1["High_SMA"] = df1["High"].rolling(20).mean()
df1 = df1[['High','Close','Close_SMA','High_SMA']]

app = Dash(__name__)

my_dropdown = dcc.Dropdown(options = ['Close', 'High'], 
                           value = 'Close', 
                           multi = False, 
                           style = {'width':'50%'})

my_graph = dcc.Graph(figure={})

app.layout = html.Div([
    html.H1('Metrics (Values)', style = {'textAlign':'center'}),
    html.Label("Metrics: "),
    my_dropdown,
    my_graph
])

@callback(
    Output(component_id=my_graph, component_property='figure'),
    Input(component_id=my_dropdown, component_property='value')
)

def update_graph(dropdown_value):
    sma = '{}_SMA'.format(dropdown_value)
    dff = df1[[dropdown_value,sma]]
    dff = dff.dropna()
    plot_figure = make_subplots(specs=[[{"secondary_y": True}]])
    fig = px.bar(data_frame=dff, y=dropdown_value, x=dff.index)
    plot_figure.add_trace(fig.data[0], secondary_y=False)
    plot_figure.add_trace(go.Scatter(x=dff.index, y=dff[sma], name=sma, mode='lines'), secondary_y=True)
    plot_figure.update_layout(yaxis_title='Close')
    return plot_figure

if __name__ == "__main__":
    app.run_server(debug=True)

Collectives™ on Stack Overflow

Add line plot to existing plotly express chart

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related