Created
June 22, 2021 09:46
-
-
Save JorgeMiguelGomes/f82ff5c99076f371a9599a88b7239a9a to your computer and use it in GitHub Desktop.
Sample code for plotly community forum: pie chart not updating on callback
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# import libraries | |
import pandas as pd | |
import plotly.express as px | |
import time | |
import json | |
import urllib | |
import urllib.request | |
# import dash libraries | |
import dash | |
import dash_core_components as dcc | |
# import dash bootstrap components | |
import dash_bootstrap_components as dbc | |
import dash_html_components as html | |
import dash_table | |
from dash.dependencies import Input, Output | |
from dash_bootstrap_templates import load_figure_template | |
# read JSON file from Json at emergencias.pt by Tomahock | |
url = "https://emergencias.pt/data" | |
response = urllib.request.urlopen(url).read() | |
jsonResponse = json.loads(response.decode('utf-8')) | |
# Create dataframe with pandas from json response | |
df = pd.json_normalize(jsonResponse['data']) | |
# Create new column that sums the values of men, vehicules, and planes/helicopters for each entry | |
df['total_meios'] = df['man'] + df['terrain']+df['aerial'] | |
# Transform hour type to date/time format | |
df['hour'] =pd.to_datetime(df.hour) | |
# sort values by date/time | |
df.sort_values(by=['hour']) | |
df.to_csv("sample_data.csv") | |
fig_actual= px.pie(df,names='especieName',values='total_meios',color='district', | |
#barmode='group', | |
template='plotly_white', | |
hole=0.7, | |
color_discrete_sequence=px.colors.sequential.RdBu) | |
# fig_actual layout changes | |
fig_actual.update_layout(showlegend=False) | |
fig_actual.update_layout({ | |
'plot_bgcolor': '#282b2f', | |
'paper_bgcolor': '#282b2f', | |
}) | |
fig_actual.update_layout( | |
title="Recursos Alocados", | |
legend_title="Tipo de Ocorrência", | |
font=dict( | |
color="white", | |
size=12 | |
) | |
) | |
fig_actual.update_traces(textposition='outside', textinfo='percent+label') | |
# Get template for layout | |
load_figure_template("slate") | |
# define Dash app | |
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SLATE],title='VOST Portugal - DASHOARD',update_title=None, | |
meta_tags=[{'name': 'viewport', | |
'content': 'width=device-width, initial-scale=1.0, maximum-scale=1.2, minimum-scale=0.5,'}] | |
) | |
# start server | |
server = app.server | |
# app layout | |
app.layout = dbc.Container( | |
[ | |
# set update intervals for the three graphs | |
dcc.Interval( | |
id='interval-component', | |
interval=50*1000, # in milliseconds | |
n_intervals=0 | |
), | |
# insert navigation bar | |
# navbar, | |
html.Hr(), | |
# create row | |
dbc.Row( | |
[ | |
dbc.Col(dcc.Graph(id='graph_actual',figure=fig_actual,animate=True, className="h-100"),lg=12), | |
], | |
), | |
], | |
# set fluid to true to make the layout mobile ready | |
fluid=True, | |
) | |
@app.callback( | |
Output('graph_actual', 'figure'), | |
[Input('interval-component', "n_intervals")] | |
) | |
def UpdateFigActual(value): | |
url = "https://emergencias.pt/data" | |
response = urllib.request.urlopen(url).read() | |
jsonResponse = json.loads(response.decode('utf-8')) | |
df_new_actual = pd.json_normalize(jsonResponse['data']) | |
df_new_actual['hour'] =pd.to_datetime(df_new_actual.hour) | |
# sort values by date/time | |
df_new_actual.sort_values(by=['hour']) | |
df_new_actual['total_meios'] = df_new_actual['man'] + df_new_actual['terrain']+df_new_actual['aerial'] | |
df_now_actual=df_new_actual.tail(10) | |
print(df_now_actual) | |
# Plot | |
fig_actual=px.bar(df_now_actual,x='hour',y='total_meios',color='naturezaName', | |
#barmode='group', | |
template='plotly_white', | |
color_discrete_sequence=px.colors.sequential.RdBu) | |
# fig_actual graph layout changes | |
fig_actual.update_layout({ | |
'plot_bgcolor': '#282b2f', | |
'paper_bgcolor': '#282b2f', | |
}) | |
fig_actual.update_layout( | |
title="Fita do Tempo", | |
xaxis_title="Fita do Tempo", | |
yaxis_title="Meios Envolvidos", | |
legend_title="Tipo de Ocorrência", | |
font=dict( | |
color="white" | |
) | |
) | |
return fig_actual | |
# launch app | |
if __name__ == "__main__": | |
app.run_server(debug=True) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment