How to Set Plot Graph according to date-picker based on SQL Server database

Dash Python
1

I am creating now a plot that shows a graph for a periodic time chosen by a date picker depends on a unique value from the database.

To explain in deep I have a GUI as shown in this screenshot:

gui
gui1905×901 42.6 KB

As I have a data base and I am using those three columns as in the below picture:

data
data420×687 89.9 KB

So Now I want to show a Graph after choose the cell name and Choose datw from the Date-Picker, when click submit show a Graph that depends on the inputs related to the data base

Here’s my full code:

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from sqlalchemy import create_engine
from datetime import datetime as dt

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

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)

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

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

    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(
    figure=dict(
        data=[
            dict(
                x=[1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                   2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
                y=[16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
                   299, 340, 403, 549, 499],
                name='GSM',
                marker=dict(
                    color='rgb(26, 118, 255)'
                )
            )
        ],
        layout=dict(
            title='Voice DropRate 2G Average',
            showlegend=True,
            legend=dict(
                x=0,
                y=1.0
            ),
            margin=dict(l=40, r=0, t=40, b=30)
        )
    ),
    style={'height': 300},
    id='my-graph'
)

])



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

I hope some one help me to solve this…