I'm trying to create a dash app that updates a histogram depending on what cell is selected in the 'group' column.
I can get the table to display but having trouble with the histogram.
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output, State
import pandas as pd
import plotly.express as px
import numpy as np
from dash import Dash, dash_table
import json
app = dash.Dash(__name__)
## create data
df_rand = pd.DataFrame(np.random.randint(0, 100, size=(100, 4)), columns=list('ABCD'))
df_rand = pd.melt(df_rand, value_vars=list('ABCD'))
df_rand_summary = df_rand.groupby('variable').describe()
df_rand_summary = df_rand_summary.droplevel(level=0, axis=1)
df_rand_summary.insert(0, 'group', df_rand_summary.index)
app.layout = html.Div(children=[
## add table
dash_table.DataTable(
data=df_rand_summary.to_dict('records'),
columns=[{'id': c, 'name': c, } for c in df_rand_summary]
),
# include histogram
html.Div([
dcc.Graph(
id='hist'
)
])
])
#app.callback(
Output('hist', 'figure'),
Input('table', 'active_cell'),
State('table', 'data'))
def update_hist(active_cell, df_rand):
# subset histogram with selected cell
# from 'group' column
cell = json.dumps(active_cell, indent=2)
row = active_cell['row']
col = active_cell['column_id']
value = df_rand[row][col]
fig = px.histogram(df_rand[df_rand['variable'] == value], x='value')
return fig
if __name__ == '__main__':
app.run_server(debug=True)
When you use df_rand as a parameter to update_hist, you overwrite the df_rand defined outside the update_hist. To solve this problem, define new parameter, instead as follows:
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output, State
import pandas as pd
import plotly.express as px
import numpy as np
from dash import Dash, dash_table
import json
app = dash.Dash(__name__)
## create data
df_rand = pd.DataFrame(np.random.randint(0, 100, size=(100, 4)), columns=list('ABCD'))
df_rand = pd.melt(df_rand, value_vars=list('ABCD'))
df_rand_summary = df_rand.groupby('variable').describe()
df_rand_summary = df_rand_summary.droplevel(level=0, axis=1)
df_rand_summary.insert(0, 'group', df_rand_summary.index)
app.layout = html.Div(children=[
## add table
dash_table.DataTable(id="table",
data=df_rand_summary.to_dict('records'),
columns=[{'id': c, 'name': c, } for c in df_rand_summary]
),
# include histogram
html.Div([
dcc.Graph(
id='hist'
)
])
])
#app.callback(
Output('hist', 'figure'),
Input('table', 'active_cell'),
State('table', 'data'),
prevent_initial_call=True)
def update_hist(active_cell, data_dict): #<------ here we define data_dict instead of df_rand
row = active_cell['row']
col = active_cell['column_id']
value = data_dict[row][col]
fig = px.histogram(df_rand.query("variable == #value"), x='value')
return fig
if __name__ == '__main__':
app.run_server(debug=True, use_reloader=False)
Output:
Related
I want to add a histogram to my dash app where the user can select what variable they want to use from the given dataset. There are 11 variables and I want to have the user select a variable from the drop down menu and in response, a histogram will be created for said variable. I am having ALOT of trouble understanding how the input and out works and where I should place the graph. (I would like to have it placed under the description.) Here is what I have so far:
import dash
import pandas as pd
from dash import Input, Output
from dash import dash_table
from dash import dcc
from dash import html
app = dash.Dash(__name__)
df = pd.read_csv('C:\\Users\\Programming\\diamonds.csv')
app.layout = html.Div([
html.H1("Diamonds", style={'text-align': 'center'}),
html.Div(["Choose the number of observations x*: ",
dcc.Input(id='top_of_table', value=10, type='number')]),
dash_table.DataTable(id="any_id"),
html.H1("Description", style={'text-align': 'center'}),
html.Div("This is a dataframe containing 11 variables on Diamonds.
The variables are the "
"following: price, carat, clarity, cut, color, depth, table,
x, y, z, and date."
"Range in price is $338-$18791.Carats or weight of the
diamond ranges from .2-3.0."),
])
#app.callback(
Output(component_id="any_id", component_property='data'),
Input(component_id='top_of_table', component_property='value'),
)
def diamond_function(num_observ):
df1 = df.head(10)
return df1.to_dict('records')
if __name__ == '__main__':
app.run_server(debug=True)
Any help? I really appreciate it! Thanks!
I don't have your dataframe so that I just make below code as referrence:
import dash
import pandas as pd
import plotly.express as px
from dash import Input, Output
from dash import dash_table
from dash import dcc
from dash import html
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1("Diamonds", style={'text-align': 'center'}),
html.Div(["Choose the number of observations x*: ",
dcc.Input(id='top_of_table', value=10, type='number')]),
dash_table.DataTable(id="any_id"),
html.H1("Description", style={'text-align': 'center'}),
html.Div("This is a dataframe containing 11 variables on Diamonds. The variables are the "
"following: price, carat, clarity, cut, color, depth, table, x, y, z, and date."
"Range in price is $338-$18791.Carats or weight of the diamond ranges from .2-3.0."),
html.Div([
dcc.Dropdown(id='variables',
options=[{'label':x,'name':x} for x in df.sort_values('Variables')['Variables'].unique()],
value=[],
multi=False,
disabled=False,
clearable=True,
searchable=True
)
]),
html.Div([
dcc.Graph(id='figure_1',figure={})
])
])
#app.callback(Output('figure_1','figure'),
[Input('variables','value')])
def update_graph(variables):
if variables != []:
dff = df[df['Variables'] == variables]
fig = px.histogram(...)
else:
dff= df.copy()
fig = px.histogram(...)
return fig
if __name__ == '__main__':
app.run_server(debug=False)
So you will need to add dcc.Dropdown as variables and dcc.Graph to show histogram for each variable.
I've made a dash and it showed as I want, my code as below:
import pandas as pd
import numpy as np
import plotly.graph_objects as go
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input
import dash_bootstrap_components as dbc
df3 = pd.DataFrame({'Branch': ['Hanoi','Hanoi','Hanoi','Hochiminh','Hochiminh','Hochiminh','Danang','Danang','Danang'],
'Name': ['Sales','Card','Loan','Sales','Card','Loan','Sales','Card','Loan'],
'KPI': [1000,1200,8000,1000,1200,8000,1000,1200,8000],
'Complete' : [982,1015,7105,780,1120,7600,815,1150,6800]})
df3['Percent'] = ((df3['Complete']/df3['KPI'])*100).round(decimals=2)
app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([dbc.Row(dbc.Col(html.H2('KPI Subplots',className='text-center text primary, mb-3'))),
dbc.Row([
dbc.Col([html.H5('Sales KPI',className='text-center'),
dcc.Graph(id='credit_fluctuation',figure={},style={'height':150}),
],width={'size':1,"offset":0,'order':1},),
dbc.Col([html.H5('Card KPI',className='text-center'),
dcc.Graph(id='credit_fluctuation_2',figure={},style={'height':150}),
],width={'size':1,"offset":0,'order':1}),
dbc.Col([html.H5('Loan KPI',className='text-center'),
dcc.Graph(id='credit_fluctuation_3',figure={},style={'height':150}),
],width={'size':1,"offset":0,'order':1}),
dbc.Col([html.H5('Drop Down',className='text-center'),
dcc.Dropdown(id='br_cd_2',placeholder="Please select branch code",
options=[{'label':x,'value':x} for x in df3.sort_values('Branch')['Branch'].unique()],
value='Select',
multi=False,
disabled=False,
clearable=True,
searchable=True),
],width={'size':2,"offset":0,'order':1})
]),
])
#app.callback(
Output(component_id='credit_fluctuation',component_property='figure'),
[Input(component_id='br_cd_2',component_property='value')])
def build_graph(branch_cd):
global dff
if not branch_cd or 'Select' in branch_cd:
dff = df3[(df3['Name']=="Sales")]
dff = pd.pivot_table(dff,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
dff['Percent'] = ((dff['Complete']/dff['KPI'])*100).round(decimals=2)
val=dff.iloc[0,3]
else:
dff = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
dff = dff[(dff['Name']=='Sales')]
val=dff.iloc[0,4]
fig=go.Figure(data=[go.Pie(labels=['',''],
values=[val,100-val],
hole=0.85,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
)],
layout=go.Layout(annotations=[{'text':str(val)+"%",'x':0.5,'y':0.5,'font_size':20,'showarrow':False}],
showlegend=False))
fig.update_layout(margin=dict(l=5,r=5,t=5,b=5))
return fig
#app.callback(
Output(component_id='credit_fluctuation_2',component_property='figure'),
[Input(component_id='br_cd_2',component_property='value')])
def build_graph(branch_cd_2):
global dff2
if not branch_cd_2 or 'Select' in branch_cd_2:
dff2 = df3[(df3['Name']=="Card")]
dff2 = pd.pivot_table(dff2,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
dff2['Percent'] = ((dff2['Complete']/dff2['KPI'])*100).round(decimals=2)
val2=dff2.iloc[0,3]
else:
dff2 = df3[(df3['Branch']== branch_cd_2)]#.isin(branch_cd)
dff2 = dff2[(dff2['Name']=='Card')]
val2=dff2.iloc[0,4]
fig_2=go.Figure(data=[go.Pie(labels=['',''],
values=[val2,100-val2],
hole=0.85,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
)],
layout=go.Layout(annotations=[{'text':str(val2)+"%",'x':0.5,'y':0.5,'font_size':20,'showarrow':False}],
showlegend=False))
fig_2.update_layout(margin=dict(l=5,r=5,t=5,b=5))
return fig_2
#app.callback(
Output(component_id='credit_fluctuation_3',component_property='figure'),
[Input(component_id='br_cd_2',component_property='value')])
def build_graph(branch_cd_3):
global dff3
if not branch_cd_3 or 'Select' in branch_cd_3:
dff3 = df3[(df3['Name']=="Loan")]
dff3 = pd.pivot_table(dff3,('KPI','Complete'),index=['Name',],aggfunc=np.sum).reset_index()
dff3['Percent'] = ((dff3['Complete']/dff3['KPI'])*100).round(decimals=2)
val3=dff3.iloc[0,3]
else:
dff3 = df3[(df3['Branch']== branch_cd_3)]#.isin(branch_cd)
dff3 = dff3[(dff3['Name']=='Loan')]
val3=dff3.iloc[0,4]
fig_3=go.Figure(data=[go.Pie(labels=['',''],
values=[val3,100-val3],
hole=0.85,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
)],
layout=go.Layout(annotations=[{'text':str(val3)+"%",'x':0.5,'y':0.5,'font_size':20,'showarrow':False}],
showlegend=False))
fig_3.update_layout(margin=dict(l=5,r=5,t=5,b=5))
return fig_3
if __name__ == "__main__":
app.run_server(debug=False,port=8056)
This is the result:
But when I try to print it out, it was overlapped as attached picture.
So I would like to ask that is there any way to print dash same with this appearance. I tried to export to pdf but it was overlapped too. Please give me some suggestion.
Thank you.
I would like to add a range slider along with my dropdown, and make the range slider the 'Wallclock' datetime along with an interaction that allows the range slider to chose the datetime for that capsules based on the dropdown value. I managed to find several ways that other people have done this but none seems to work for my situation especially the callback and the update of the graph. Thank you!
Data looks like this.
Dash looks like this.
Code looks like this.
import pandas as pd
import plotly.express as px # (version 4.7.0)
import plotly.graph_objects as go
import numpy as np
import openpyxl
import dash # (version 1.12.0) pip install dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
app = dash.Dash(__name__)
server = app.server
df = pd.read_excel("tcd vs rh 2.xlsx")
print(df)
capsuleID = df['Capsule_ID'].unique()
print(capsuleID)
capsuleID_names = sorted(list(capsuleID))
print(capsuleID_names)
capsuleID_names_1 = [{'label': k, 'value': k} for k in sorted(capsuleID)]
capsuleID_names_2 = [{'label': '(Select All)', 'value': 'All'}]
capsuleID_names_all = capsuleID_names_1 + capsuleID_names_2
app.layout = html.Div([
html.H1("Relative Humidity vs TCD", style={'text-align': 'center'}),
dcc.Dropdown(id="capsule_select",
options=capsuleID_names_all,
optionHeight=25,
multi=True,
searchable=True,
placeholder='Please select...',
clearable=True,
value=['All'],
style={'width': "100%"}
),
dcc.RangeSlider(id='slider',
min=df['Wallclock'].min(),
max=df['Wallclock'].max(),
value=[df.iloc[-101]['Wallclock'].timestamp(), df.iloc[-1]['Wallclock'].timestamp()]
),
html.Div([
dcc.Graph(id="the_graph"),
]),
])
# -----------------------------------------------------------
#app.callback(
Output('the_graph', 'figure'),
Output('capsule_select', 'value'),
Input('capsule_select', 'value'),
Input('slider', 'value'),
)
def update_graph(capsule_chosen):
lBound = pd.to_datetime(value[0], unit='s')
uBound = pd.to_datetime(value[1], unit='s')
filteredData = df.loc[(df['date'] >= lBound) & (df['date'] <= uBound)]
dropdown_values = capsule_chosen
if "All" in capsule_chosen:
dropdown_values = capsuleID_names
dff = df
else:
dff = df[df['Capsule_ID'].isin(capsule_chosen)] # filter all rows where capsule ID is the capsule ID selected
scatterplot = px.scatter(
data_frame=dff,
x="tcd",
y="humidity",
hover_name="Wallclock",
)
scatterplot.update_traces(textposition='top center')
return scatterplot, dropdown_values
# ------------------------------------------------------------------------------
if __name__ == '__main__':
app.run_server(debug=True)
obviously I don't have access to your Excel spreadsheet so generated a data frame with same shape
taken approach of using a second figure with a rangeslider for slider capability
updated callback to use this figure as input for date range
used jupyter dash inline, this can be changed back to your setup (commented lines)
generate some sample data
import pandas as pd
import numpy as np
df = pd.DataFrame(
{
"Wallclock": pd.date_range(
"22-dec-2020 00:01:36", freq="5min", periods=2000
),
"tcd": np.linspace(3434, 3505, 2000) *np.random.uniform(.9,1.1, 2000),
"humidity": np.linspace(63, 96, 2000),
}
).pipe(lambda d: d.assign(Capsule_ID=(d.index // (len(d)//16))+2100015))
slider is a figure with a rangeslider
import pandas as pd
import plotly.express as px # (version 4.7.0)
import plotly.graph_objects as go
import numpy as np
import openpyxl
import dash # (version 1.12.0) pip install dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
from jupyter_dash import JupyterDash
# app = dash.Dash(__name__)
# server = app.server
app = JupyterDash(__name__)
# df = pd.read_excel("tcd vs rh 2.xlsx")
# print(df)
capsuleID = df["Capsule_ID"].unique()
# print(capsuleID)
capsuleID_names = sorted(list(capsuleID))
# print(capsuleID_names)
capsuleID_names_1 = [{"label": k, "value": k} for k in sorted(capsuleID)]
capsuleID_names_2 = [{"label": "(Select All)", "value": "All"}]
capsuleID_names_all = capsuleID_names_1 + capsuleID_names_2
def slider_fig(df):
return px.scatter(
df.groupby("Wallclock", as_index=False).size(), x="Wallclock", y="size"
).update_layout(
xaxis={"rangeslider": {"visible": True}, "title":None},
height=125,
yaxis={"tickmode": "array", "tickvals": [], "title": None},
margin={"l": 0, "r": 0, "t": 0, "b": 0},
)
app.layout = html.Div(
[
html.H1("Relative Humidity vs TCD", style={"text-align": "center"}),
dcc.Dropdown(
id="capsule_select",
options=capsuleID_names_all,
optionHeight=25,
multi=True,
searchable=True,
placeholder="Please select...",
clearable=True,
value=["All"],
style={"width": "100%"},
),
dcc.Graph(
id="slider",
figure=slider_fig(df),
),
html.Div(
[
dcc.Graph(id="the_graph"),
]
),
]
)
# -----------------------------------------------------------
#app.callback(
Output("the_graph", "figure"),
Output("capsule_select", "value"),
Output("slider", "figure"),
Input("capsule_select", "value"),
Input('slider', 'relayoutData'),
State("slider", "figure")
)
def update_graph(capsule_chosen, slider, sfig):
dropdown_values = capsule_chosen
if "All" in capsule_chosen:
dropdown_values = capsuleID_names
dff = df
else:
dff = df[
df["Capsule_ID"].isin(capsule_chosen)
] # filter all rows where capsule ID is the capsule ID selected
if slider and "xaxis.range" in slider.keys():
dff = dff.loc[dff["Wallclock"].between(*slider["xaxis.range"])]
else:
# update slider based on selected capsules
sfig = slider_fig(dff)
scatterplot = px.scatter(
data_frame=dff,
x="tcd",
y="humidity",
hover_name="Wallclock",
)
scatterplot.update_traces(textposition="top center")
return scatterplot, dropdown_values, sfig
# ------------------------------------------------------------------------------
if __name__ == "__main__":
# app.run_server(debug=True)
app.run_server(mode="inline")
I'm having so many issues align my map componants to the left of my data grid componant. I want each componant side by side. I have tried adding Divs, included attibutes and changing style. Please help.
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_leaflet as dl
import pandas as pd
import numpy as np
import dash_table_experiments as dt
lats = [28.538330, 34.729542, 40.712776]
lons = [-81.378883, -86.585297, -74.005974]
df = pd.DataFrame(columns=["lat", "lon"], data=np.column_stack((lats, lons)))
markers = [dl.Marker(position=[row["lat"], row["lon"]]) for i, row in df.iterrows()]
app = dash.Dash()
app = dash.Dash(external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])
df = pd.read_csv('Foundational Data-LA057.csv')
def generate_table(dataframe, max_rows=10):
return html.Table([
html.Thead(
html.Tr([html.Th(col) for col in dataframe.columns])
),
html.Tbody([
html.Tr([
html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
]) for i in range(min(len(dataframe), max_rows))
])
])
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
app.layout = html.Div([
html.Div(
className="row",
children=[
html.Div([dl.Map(children=[dl.TileLayer(url="https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"), dl.LayerGroup(markers)],
style={'width': "100%", 'height': "100%"}, center=[38.627003, -90.199402], zoom=4, id="map"),
], style={'width': '600px', 'height': '500px'}),
generate_table(df)
]
)
])
if __name__ == '__main__':
app.run_server(debug=True)
I am attempting to create a dash app for creating a scatter plot of some data.. Would someone be able to give me a tip for showing titles on the x & y axis of the plot? It seems like most documentation I am finding online seems like its for IPython. Layouts are defined in this format:
layout = dict(
title= 'Rank',
ticklen= 5,
gridwidth= 2,
)
But my dash app looks more like this format: EDIT to include all code below
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
import numpy as np
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
df = pd.read_csv('boilerData.csv', index_col='Date', parse_dates=True)
df = df.fillna(method = 'ffill').fillna(method = 'bfill')
app.layout = html.Div([
html.H1('Heating System Temperature Data Visulation'),
html.Center('The purpose of the scatter plot below is to prove if a temperature reset strategy is implemented on the hydronic heating system. At various outside air temperature conditions, the hot water temperature should fluctuate to save energy.'),
dcc.Graph(
id='hwst-vs-oat',
figure={
'data': [
go.Scatter(
x = df.OAT,
y = df.HWST,
mode = 'markers',
marker = dict(
color = '#FFBAD2',
line = dict(width = 1)
)
)
],
'layout':{
'title':'Scatter Plot of OAT versus HWST',
'xaxis':{
'title':'whatever you want x to be'
},
'yaxis':{
'title':'whatever you want y to be'
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)
Any tips help thank you.
should be able to do something like this
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
import plotly.graph_objs as go
import numpy as np
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
df = pd.read_csv('boilerData.csv', index_col='Date', parse_dates=True)
df = df.fillna(method = 'ffill').fillna(method = 'bfill')
app.layout = html.Div([
html.H1('Heating System Temperature Data Visulation'),
html.Center('The purpose of the scatter plot below is to prove if a temperature reset strategy is implemented on the hydronic heating system. At various outside air temperature conditions, the hot water temperature should fluctuate to save energy.'),
dcc.Graph(
id='hwst-vs-oat',
figure={
'data': [
go.Scatter(
x = df.OAT,
y = df.HWST,
mode = 'markers',
marker = dict(
color = '#FFBAD2',
line = dict(width = 1)
)
)
],
'layout':{
'title':'Scatter Plot of OAT versus HWST',
'xaxis':{
'title':'whatever you want x to be'
},
'yaxis':{
'title':'whatever you want y to be'
}
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)