Black Lives Matter. Please consider donating to Black Girls Code today.

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

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,
As for the below Image, let’s imagine that this is the final result I need to be looks like:

enter image description here

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

enter image description here

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 = ['']

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

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

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]',

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

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

app.layout = html.Div([
        options=[{'label': i, 'value': i} for i in availble_cell],

        options=[{'label': col, 'value': col} for col in gsm_kpis_raw.columns],

        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.Button('Submit', id='button'),

        style={'height': 300},


    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__':

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