import pandas as pd
import plotly.express as px # (version 4.7.0 or higher)
import plotly.graph_objects as go
from datetime import datetime
import dash
from dash import Dash, dcc, html, Input, Output # pip install dash (version 2.0.0 or higher)
def get_key_from_value(dictionary, target_value):
for key, value in dictionary.items():
if value == target_value:
return key
return None
app = Dash(__name__)
# -- Import and clean data (importing csv into pandas)
df = pd.read_excel("FAC Hourly Data.xlsx")
df['FAC hourly data_start date_dt'] = pd.to_datetime(df['FAC hourly data_start date_dt'], dayfirst=True)
df['weekday'] = df["FAC hourly data_start date_dt"].dt.weekday
print(df)
timenow = datetime.now().hour
if timenow > 18:
timenow = 18
elif timenow < 9:
timenow = 9
weekday = datetime.now().weekday
# ------------------------------------------------------------------------------
# App layout
app.layout = html.Div(
[
html.H1("Canteen Data Ngee Ann Polytechnic", style={'text-align': 'center'}),
html.Label("Hour:",style={'fontSize':30, 'textAlign':'center'}),
dcc.Dropdown(id="slct_hour",
options=[
{"label": "9am", "value": 9},
{"label": "10am", "value": 10},
{"label": "11am", "value": 11},
{"label": "12pm", "value": 12},
{"label": "1pm", "value": 13},
{"label": "2pm", "value": 14},
{"label": "3pm", "value": 15},
{"label": "4pm", "value": 16},
{"label": "5pm", "value": 17},
{"label": "6pm", "value": 18}],
multi=False,
value = timenow,
style={'width': "30%","display":"flex"}
),
html.Label("Day:",style={'fontSize':30, 'textAlign':'center'}),
dcc.Dropdown(id="slct_weekday",
options=[
{"label": "Mon", "value": 0},
{"label": "Tue", "value": 1},
{"label": "Wed", "value": 2},
{"label": "Thu", "value": 3},
{"label": "Fri", "value": 4}],
multi=False,
value = weekday,
style={'width': "30%","display":"flex"}
),
html.Div(id='output_container', children=[]),
html.Br()
])
# ------------------------------------------------------------------------------
# # Connect the Plotly graphs with Dash Components
@app.callback(
[Output(component_id='output_container', component_property='children'),
Output(component_id='canteenchart', component_property='figure')],
[Input('slct_hour','value'),Input('slct_weekday','value')])
def update_graph(selected_hour,selected_weekday):
container = "The hour chosen by the user was: {}".format(selected_hour)
dff = df.copy()
dff = dff[dff["FAC hourly data_Hour"] == selected_hour]
dff = dff[dff["weekday"] == selected_weekday]
fig = px.bar(
dff,
x="FAC hourly data_Hour",
y="%perc",
color="FAC hourly data_Blk",
barmode="group", # This will display bars side by side for each hour
labels={"FAC hourly data_Hour": "Hour of the Day", "%perc": "Percentage Filled"},
title="Percentage of Canteens Filled per Hour",
)
return[dcc.Graph(figure=fig)]
# ------------------------------------------------------------------------------
if __name__ == '__main__':
app.run_server(debug=False)
Hey guys the above shows my code for my dash web app, however I keep getting the error Error loading layout on my webpage. Any feedback would be appreciated. Thanks a bunch!
here is the link to my dataset : Loading Google Sheets
-
- List item
