how to create subplots and update with dash callback

Viewed 726

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()
0 Answers
Related