Skip to content

Instantly share code, notes, and snippets.

@JorgeMiguelGomes
Created June 22, 2021 09:46
Show Gist options
  • Save JorgeMiguelGomes/f82ff5c99076f371a9599a88b7239a9a to your computer and use it in GitHub Desktop.
Save JorgeMiguelGomes/f82ff5c99076f371a9599a88b7239a9a to your computer and use it in GitHub Desktop.
Sample code for plotly community forum: pie chart not updating on callback
# 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