multiple graphs from dataframes in one plot code example
Example: Graphing From Multiple DataFrames
import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objects as go
from dash.dependencies import Input, Output, State
df1 = pd.DataFrame({'col1': ['a', 'b', 'c'], 'col2': ['d', 'e', 'f']})
df2 = pd.DataFrame({'col1': ['g', 'h', 'i'], 'col2': ['j', 'k', 'l']})
dict_main = {'df1': df1, 'df2': df2}
app = dash.Dash(__name__)
server = app.server
rpm = list(dict_main.keys())
channels = dict_main[rpm[0]]
app.layout = html.Div(
[
html.Div([
dcc.Dropdown(
id='rpm-dropdown',
options=[{'label':speed, 'value':speed} for speed in rpm],
value=list(dict_main.keys())[0],
# I removed the multi=True because it requires a distinction between the columns in the next dropdown...
searchable=False
),
],style={'width': '20%', 'display': 'inline-block'}),
html.Div([
dcc.Dropdown(
id='channel-dropdown',
multi=True
),
],style={'width': '20%', 'display': 'inline-block'}
),
html.Div([
dcc.Graph(
id='Main-Graph' # the initial graph is in the callback
),
], style={'width': '98%', 'display': 'inline-block'}
)
]
)
@app.callback(
Output('channel-dropdown', 'options'),
[Input('rpm-dropdown', 'value')])
def update_date_dropdown(speed):
return [{'label': i, 'value': i} for i in dict_main[speed]]
@app.callback(
Output('Main-Graph', 'figure'),
[Input('channel-dropdown', 'value')],
[State('rpm-dropdown', 'value')]) # This is the way to inform the callback which dataframe is to be charted
def updateGraph(channels, speed):
if channels:
# return the entire figure with the different traces
return go.Figure(data=[go.Scatter(x=dict_main[speed].index, y=dict_main[speed][i]) for i in channels])
else:
# at initialization the graph is returned empty
return go.Figure(data=[])
if __name__ == '__main__':
app.run_server(debug=True)