Announcing Dash Bio 1.0.0 πŸŽ‰ : a one-stop-shop for bioinformatics and drug development visualizations.

Dynamic Number of Plots Based on User Input

I am trying to get the app to display multiple plots in grid format whenever a user changes the date input. This is what I have thus far. Although, when I run the app right now it only displays one, not ALL, of the graphs. I am not sure how to code this so that the number of graphs displayed is dynamic and that they take up just enough space on the screen of whoever is running the app.

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import pyodbc
from datetime import datetime as dt

app = dash.Dash()

app.layout = html.Div(children=[
    html.Div(children='''
        Enter Date:
    '''),
    dcc.DatePickerSingle(id='date_picker_single', date=dt(2017, 12, 18)),
    html.Div(id='output-graphs'),
    ])


def connect_sql_server(driver, server, db):
    conn_sql_server = pyodbc.connect(
        r'DRIVER={' + driver + '};'
        r'SERVER=' + server + ';'
        r'DATABASE=' + db + ';'
        r'Trusted_Connection=yes;',
        autocommit=True
    )
    return conn_sql_server


@app.callback(
    Output(component_id='output-graphs', component_property='children'),
    [Input(component_id='date_picker_single', component_property='date')]
    )
def update_graphs(input_date):
    sql_conn = connect_sql_server('ODBC Driver 13 for SQL Server', 'Server', 'Database')
    cursor = sql_conn.cursor()
    cursor.execute(
        """ 
        ?
        """, [input_date])
    rows = cursor.fetchall()

    sql_data = []
    for row in rows:
        sql_data.append(list(row))
    labels = ['strike', 'last', 'call_put', 'title']
    df = pd.DataFrame.from_records(sql_data, columns=labels)

    unique_titles = df.title.unique()

    graphs = []

    for unique_title in unique_titles:
        title = unique_title
        call_strike = []
        call_last = []
        for row in rows:
            if row[2] == 'C' and row[3] == unique_title:
                call_strike.append(row[0])
                call_last.append(row[1])

        put_strike = []
        put_last = []
        for row in rows:
            if row[2] == 'P' and row[3] == unique_title:
                put_strike.append(row[0])
                put_last.append(row[1])

        graphs.append(dcc.Graph(
            id='example-graph',
            figure={
                'data': [
                    {
                        'x': call_strike,
                        'y': call_last,
                        'mode': 'lines+markers',
                        'name': 'call'
                    },
                    {
                        'x': put_strike,
                        'y': put_last,
                        'mode': 'lines+markers',
                        'name': 'put'
                    }
                ],
                'layout': {
                    'title': title
                }
            }
        ))

    return graphs


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

Each graph will need a unique id

1 Like

thanks :slight_smile:

1 Like

Hello, @dir718 & @chriddyp . I am encountering a similar issue of dynamically plotting multiple plots, would appreciate, if you can provide a more elaborate description on how to achieve this.
Thank you in advance.

Best,
Prateek Agrawal

I got it… what you meant by different unique ID’s.