How to handle a callback in Dash Plot for Graph based on Specific Inputs from User in Dash Plot

@7arooney wrote:

I am trying to handle a callback by return a simple Graph based on Drop-Down and Date-Picker Inputs after Click Submit Button…

So to explain in deep,
#Example:
As for the below Image, let’s imagine that this is the final result I need to be looks like:

So Here’s a simple of Data-base looks like I use as the Below Image:

Ok Lets Explain In-Deep:

Now I need to Out-Put a Simple Graph That’s Shows a simple line with the values based on the below Input:

1. 1st Drop-Down contains the CellName values like in the Database
2. 2nd Drop-Down Contains the list of specific Column Names I want to out-put in the Graph.
3. 3rd Date-Picker Contains all the dates which was in the Date Column in the previous DB Picture.
4. Finally I want Click this button to Generate the Graph.

So Here’s My Code as the below:

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

# connect db
engine = create_engine('mssql+pyodbc://WWX542337CDCD\SMARTRNO_EXPRESS/myDB?driver=SQL+Server+Native+Client+11.0')
cursor = engine.raw_connection().cursor()

start = datetime.datetime(2019, 12, 2)
end = datetime.datetime(2019, 12, 15)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

gsm_kpis = pd.read_sql('SELECT * FROM [myDB].[dbo].[mnm_rotterdam_5_daily_details-20191216081027]',
                       engine)

gsm_kpis_raw = pd.read_sql('SELECT Voice_SetupFailRate_2G, '
                           'Voice_DropRate_2G, Packet_SetupFailRate_2G, '
                           'OutgHandover_SuccesRate_2G, Voice_ErlHr_2G, Packet_DLMBytes_2G, Packet_ULMBytes_2G, '
                           'Availability_2G FROM [myDB].[dbo].[mnm_rotterdam_5_daily_details-20191216081027]',
                           engine)

pd.set_option('display.max_columns', 500)
pd.set_option('display.width', 1000)

availble_cell = gsm_kpis['CellName'].unique()

app.layout = html.Div([
    dcc.Dropdown(
        id='cell-name-xaxis-column',
        options=[{'label': i, 'value': i} for i in availble_cell],
        value='11063'
    ),

    dcc.Dropdown(
        id='myColumns',
        options=[{'label': col, 'value': col} for col in gsm_kpis_raw.columns],
        value='Voice_SetupFailRate_2G'
    ),

    dcc.DatePickerRange(
        id='my-date-picker-range',
        min_date_allowed=dt(1995, 8, 5),
        max_date_allowed=dt(2030, 9, 19),
        initial_visible_month=dt(2019, 10, 5),
        start_date=dt(2019, 10, 1),
        end_date=dt(2020, 1, 1)
    ),
    html.Div(id='output-container-date-picker-range'),

    html.Button('Submit', id='button'),

    dcc.Graph(
        style={'height': 300},
        id='my-graph'
    )

])

@app.callback(
    Output('my-graph', 'figure'),
    [Input('cell-name-xaxis-column', 'value'),
     Input('myColumns', 'value')])

def update_graph(xaxis_column_name, yaxis_column_name, date_value):
    dff = gsm_kpis[gsm_kpis['Date'] == date_value]

    return {
        'data': [dict(
            x = dff[dff['Date'] == xaxis_column_name]['Value'],
            y = dff[dff['Date'] == yaxis_column_name]['Value'],
            text = dff[dff['Date'] == yaxis_column_name]['Cell Name'],
            mode = 'line',
            line = {
                'size': 15,
                'opacity': 0.5
            }
        )],
    }

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

and this is the Error I find:

TypeError: update_graph() missing 1 required positional argument: 'date_value'

I think there’s a problem with handeling the Call-Back function…

Anyone Could help me how Can I handle this?

I hope everything will be clear…

Note: not Important to use the Submit button

Posts: 1

Participants: 1

Read full topic