I am trying to do subplots and add more graphs and pass it to dash, but having trouble when I have to use dash.
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
df = pd.DataFrame([['A', 1, 7, 10], ['A', 2, 6, 15], ['A', 3, 14, 20], ['B', 1, 3, 2], ['B', 2, 9, 6], ['B', 3, 2, 8], ['C', 1, 1, 90], ['C', 2, 5, 40], ['C', 3, 11, 23]], columns = ['ID', 'x_val', 'y_val', 'rand'])
app = dash.Dash()
app.layout = html.Div([
dcc.Dropdown(
id='my-dropdown',
options=[
{'label': i, 'value': i} for i in df.ID.unique()
], multi=True, placeholder='Select id',
value=[df.ID.min()]
),
dcc.Graph(id='my-graph')
], style={'width': '500'})
@app.callback(Output('my-graph', 'figure'), [Input('my-dropdown', 'value')])
def update_graph(selected_dropdown_value):
grouped_df = df[df['ID'].isin(selected_dropdown_value)].groupby(by=['ID'])
layout = dict(
xaxis = dict(title="X-title"), yaxis=dict(title="Y-title")
)
data = []
for ID, group in grouped_df:
trace = {
"type": 'scatter',
"x": group['x_val'],
"y": group['y_val'],
"name": ID,
}
data.append(trace)
return {"data": data, "layout": layout}
if __name__ == '__main__':
app.run_server()
I want to add another graph that uses column: x_val for x, but for y it uses column: 'rand' I tried make_subplot. I also tried adding another dict into the data array, it ends up putting everything onto the same graph.
Edit: The following code are when I manually plot out the graph: Please run to see the result
# ['A', 1, 7, 10], ['A', 2, 6, 15], ['A', 3, 14, 20], ['B', 1, 3, 2], ['B', 2, 9, 6], ['B', 3, 2, 8], ['C', 1, 1, 90], ['C', 2, 5, 40], ['C', 3, 11, 23]], columns = ['ID', 'x_val', 'y_val', 'rand']
from plotly.subplots import make_subplots
import plotly.graph_objects as go
fig = make_subplots(rows=1, cols=2)
fig.add_trace(
go.Scatter(x=[1, 2, 3], y=[7, 6, 14]),
row=1, col=1
)
fig.add_trace(
go.Scatter(x=[1, 2, 3], y=[3, 9, 6]),
row=1, col=1
)
fig.add_trace(
go.Scatter(x=[1, 2, 3], y=[1, 5, 11]),
row=1, col=1
)
fig.add_trace(
go.Scatter(x=[1, 2, 3], y=[10, 15, 20]),
row=1, col=2
)
fig.add_trace(
go.Scatter(x=[1, 2, 3], y=[2,6,8]),
row=1, col=2
)
fig.add_trace(
go.Scatter(x=[1, 2, 3], y=[90,40,23]),
row=1, col=2
)
fig.update_layout(height=600, width=800, title_text="Side By Side Subplots")
fig.show()