Dash app related issue

Hello All,

import pandas as pd
import plotly.express as px
import dash
from dash import dcc, html, Dash
from dash.dependencies import Input, Output
import flask_caching
from flask_caching import Cache
import pyodbc

def get_connection():
cnxn_str = (
“Driver={SQL Server};”
“Server=INPTSE11\SQLEXPRESS;”
“Database=MB1TH01Q;”
“UID=SA;”
“PWD=sa@1234;”
)
return pyodbc.connect(cnxn_str)

app = dash.Dash(name)
cache = Cache(app.server, config={“CACHE_TYPE”: “simple”})
app.layout = html.Div([
html.H4(‘PERFORMANCE TIME TESTING DASHBOARD’),
dcc.Dropdown(
id=“dropdown”,
options=[{“label”: “Select All Servers”, “value”: “all”}],
multi=True,
value=[“all”]
),
html.Div([
dcc.Graph(id=“line_1-chart”),
dcc.Graph(id=“line-chart”),
], style={‘display’: ‘flex’}),

dcc.Interval(
    id='interval-component',
    interval=5 * 60 * 1000,  # in milliseconds, so 5 minutes
    n_intervals=0
)

])

Update dropdown options dynamically

@app.callback(
Output(“dropdown”, “options”),
[Input(“interval-component”, “n_intervals”)]
)
def update_dropdown_options(_):
cnxn = get_connection()
query = “SELECT DISTINCT Server1 FROM RPA_SB1_Prod”
servers = pd.read_sql(query, cnxn)[‘Server1’].tolist()
cnxn.close()
options = [{“label”: “Select All Servers”, “value”: “all”}] + [{“label”: server, “value”: server} for server in servers]
return options

@cache.memoize()
@app.callback(
Output(“line_1-chart”, “figure”),
[Input(“dropdown”, “value”)]
)
def update_line_chart(selected_servers):
cnxn = get_connection()
if “all” in selected_servers:
query = f"SELECT Date1, AVG(DATEDIFF(SECOND, ‘00:00:00’, End_Time)) as Average_End_Time FROM [RPA_SB1_Prod] GROUP BY Date1 ORDER BY Date1 asc"
data = pd.read_sql(query, cnxn)
else:
placeholders = ‘, ‘.join(’?’ for _ in selected_servers)
query = f"SELECT Date1, AVG(DATEDIFF(SECOND, ‘00:00:00’, End_Time)) as Average_End_Time FROM [RPA_SB1_Prod] WHERE Server1 IN ({placeholders}) GROUP BY Date1 ORDER BY Date1 asc"
data = pd.read_sql(query, cnxn, params=selected_servers)
cnxn.close()
# Convert the Date1 column to datetime format and sort by it
data[‘Date1’] = pd.to_datetime(data[‘Date1’], format=‘%d.%m.%Y’)
data = data.sort_values(by=‘Date1’)
fig = px.line(data, x=“Date1”, y=“Average_End_Time”, title=“Date vs End TIme(line1 Chart)”, markers=True)
return fig

@cache.memoize()
@app.callback(
Output(“line-chart”, “figure”),
[Input(“dropdown”, “value”)]
)
def update_line_chart(selected_servers):
cnxn = get_connection()
if “all” in selected_servers:
query = f"SELECT Date1, B1_open_or_From_citrix_Application_Server_Or_Citrix_Server, AVG(DATEDIFF(SECOND, ‘00:00:00’, End_Time)) as Average_End_Time FROM [RPA_SB1_Prod] GROUP BY Date1, B1_open_or_From_citrix_Application_Server_Or_Citrix_Server ORDER BY Date1 asc"
data = pd.read_sql(query, cnxn)
else:
placeholders = ‘, ‘.join(’?’ for _ in selected_servers)
query = f"SELECT Date1, B1_open_or_From_citrix_Application_Server_Or_Citrix_Server, AVG(DATEDIFF(SECOND, ‘00:00:00’, End_Time)) as Average_End_Time FROM [RPA_SB1_Prod] WHERE Server1 IN ({placeholders}) GROUP BY Date1, B1_open_or_From_citrix_Application_Server_Or_Citrix_Server ORDER BY Date1 asc"
data = pd.read_sql(query, cnxn, params=selected_servers)
cnxn.close()
# Convert the Date1 column to datetime format and sort by it
data[‘Date1’] = pd.to_datetime(data[‘Date1’], format=‘%d.%m.%Y’)
data = data.sort_values(by=‘Date1’)
fig = px.line(data, x=“Date1”, y=“Average_End_Time”, color=“B1_open_or_From_citrix_Application_Server_Or_Citrix_Server”, title=“Date vs End time”, markers=True, height=600, width=1000)
return fig

if name == ‘main’:
app.run_server(debug=True)
This my code . but when i run this code , i got dash URL but dash app is not open . web page is only loading.
kindly please help me .

Hello @PATLRAN,

Welcome to the community!

You are more than likely having issues with querying form your server.

All callbacks will be triggered upon the component being rendered, this is normally done with no values. To turn off, you need to pass: prevent_initial_call=True to whichever one you want to disable the first load.

For example, I’d probably leave your 1st callback, but disable your others.