Progress pie chart subplot with percentage
Question
I'm trying to make a donut chart with percentage of completion. Below is my code:
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':300}),
],width={'size':3,"offset":0,'order':1},),
dbc.Col([html.H5('Card KPI',className='text-center'),
dcc.Graph(id='credit_fluctuation_2',figure={},style={'height':300}),
],width={'size':3,"offset":0,'order':1}),
dbc.Col([html.H5('Loan KPI',className='text-center'),
dcc.Graph(id='credit_fluctuation_3',figure={},style={'height':300}),
],width={'size':3,"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))
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))
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))
return fig_3
if __name__ == "__main__":
app.run_server(debug=False,port=8056)
Actually with this code, it worked as I want, but now I want to make it with subplots and I change my code as below:
from plotly.subplots import make_subplots
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':300}),
],width={'size':6,"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]
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]
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:
dff = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
dff = dff[(dff['Name']=='Sales')]
val=dff.iloc[0,4]
dff2 = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
dff2 = dff2[(dff2['Name']=='Card')]
val2=dff2.iloc[0,4]
dff3 = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
dff3 = dff3[(dff3['Name']=='Loan')]
val3=dff3.iloc[0,4]
fig = make_subplots(rows=1, cols=3,specs=[[{"type": "pie"}, {"type": "pie"}, {"type": "pie"}]],subplot_titles=("Sales KPI", "Card KPI", "Loan KPI"))
fig.add_trace(go.Pie(labels=['',''],
values=[val,100-val],
hole=0.85,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
),row=1, col=1),
fig.add_trace(go.Pie(labels=['',''],
values=[val2,100-val2],
hole=0.85,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
),row=1, col=2),
fig.add_trace(go.Pie(labels=['',''],
values=[val3,100-val3],
hole=0.85,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
),row=1, col=3),
return fig
if __name__ == "__main__":
app.run_server(debug=False,port=8057)
But I still cannot find a way to show percentage of completion like first dash. Can you give me a suggestion. Thank alot!
Here is the first dash:
Here is the second dash:
2 answers
solution1
3 ACCPTED 2021-12-22 13:53:47
I haven't checked it in the dash environment, but I did check it plotly. The annotations in the subplot set the respective values in the list. See this in the official reference .
fig = make_subplots(rows=1, cols=3,specs=[[{"type": "pie"}, {"type": "pie"}, {"type": "pie"}]])
fig.add_trace(go.Pie(labels=['',''],
values=[val,100-val],
hole=0.85,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
),row=1, col=1)
fig.add_trace(go.Pie(labels=['',''],
values=[val2,100-val2],
hole=0.85,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
),row=1, col=2)
fig.add_trace(go.Pie(labels=['',''],
values=[val3,100-val3],
hole=0.85,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
),row=1, col=3)
# update
fig.update_layout(annotations=[dict(text=str(val)+"%", x=0.1, y=0.5, font_size=20, showarrow=False),
dict(text=str(val2)+"%", x=0.5, y=0.5, font_size=20, showarrow=False),
dict(text=str(val3)+"%", x=0.9, y=0.5, font_size=20, showarrow=False),
])
fig.show()
solution2
0 2021-12-22 16:01:22
I tried some code and I found a solution that add annotations to fig and it worked. Please refer below code:
from plotly.subplots import make_subplots
app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
dbc.Row([
html.Img(src='/assets/logo Wr-02.png',style={'height':'12%',
'width':'12%',
'position' : 'relative',
'padding-top' : 10,
'padding-left' : 10})
],style={'textAlign': 'left','padding-left' : 25}),
# Row 4
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={}),
],width={'size':6,"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]
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]
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:
dff = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
dff = dff[(dff['Name']=='Sales')]
val=dff.iloc[0,4]
dff2 = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
dff2 = dff2[(dff2['Name']=='Card')]
val2=dff2.iloc[0,4]
dff3 = df3[(df3['Branch']== branch_cd)]#.isin(branch_cd)
dff3 = dff3[(dff3['Name']=='Loan')]
val3=dff3.iloc[0,4]
val4=dff3.iloc[0,3]
val5=dff3.iloc[0,2]-dff3.iloc[0,2]
fig = make_subplots(rows=1, cols=3,specs=[[{"type": "pie"}, {"type": "pie"}, {"type": "pie"}]],
subplot_titles=("Sales KPI", "Card KPI", "Loan KPI"))
fig.add_trace(go.Pie(labels=['',''],
values=[val,100-val],
hole=0.8,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
),row=1, col=1),
fig.add_trace(go.Pie(labels=['',''],
values=[val2,100-val2],
hole=0.8,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
),row=1, col=2),
fig.add_trace(go.Pie(labels=['',''],
values=[val3,100-val3],
hole=0.8,
textinfo='none',
marker_colors=['rgb(113,209,145)','rgb(240,240,240)'],
),row=1, col=3),
fig.add_annotation(x=0.06, y=0.5,
text=str(val)+"%",
showarrow=False,
font_size=20)
fig.add_annotation(x=0.5, y=0.5,
text=str(val2)+"%",
showarrow=False,
font_size=20)
fig.add_annotation(x=0.94, y=0.5,
text=str(val3)+"%",
showarrow=False,
font_size=20)
fig.update_traces(showlegend=False)
return fig
if __name__ == "__main__":
app.run_server(debug=False,port=8057)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to create a progress pie chart using plotly from a percentage value?
How to subplot pie chart in plotly?
Improve labeling on pie chart in subplot
How to add TreeMap and Pie Chart as Subplot?
Make pie chart with percentage readable in grayscale
Plotly - Pie chart with percentage and one decimal case
change specific subplot background color (outside of pie chart)
Align pie chart left or right in multicolumn span subplot in girdspec
Bokeh pie chart show percentage labels upside down
creating Pie chart for my dataframe for a single column with percentage
Related Tags