I’m currently working on dash-plotly plots for my project requirement. I’ve two dataframes. Among them, one explains the count of the customers and the explains the sales financial amount. I would like to plot three different charts viz., Scatter Plot, Bar Graph & Pie chart for these data.
But there is one thing that I’m unable to figuring out from this. Here I need to get three filters. One is dataframe column-wise, second is Plot-wise and third is Count or Fin Amount. If the user click on Login-Pie-Count then that particular graph only should be displayed or if the user clicks Approved-Bar-Fin_amount then that should be displayed and vice versa. I’ve added the dropdowns to the page. But I’m unable callback the results. Here is the script which I’ve developed for the plots and sample data.
Branch,Login,Approved,Reject,Agreement,Disbursed,Cancelled
"Miyapur","2","2","0","4","9","0","17","58"
"Banjara Hills","1","2","0","0","4","2","7","50"
Branch,Login_finamt,Approved_finamt,Agreement_finamt,Disbursed_finamt,Cancelled_finamt,Reject_finamt,Total_finamt
jeep-showroom,20.86 ,0 ,0 ,36.6 ,133 ,0 ,57.45
banjara-hills,14.79 ,0 ,0 ,0 ,0 ,0 ,14.79
import dash
import flask
import dash_core_components as dcc
from werkzeug.middleware.dispatcher import DispatcherMiddleware
import dash_html_components as html
from werkzeug.serving import run_simple
from dash.dependencies import Input, Output
import plotly.graph_objs as go
from flask import Flask, render_template
import pandas as pd
import json
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
server = Flask(__name__)
app_1 = dash.Dash(__name__, server = server, url_base_pathname='/pride/branch_count/' )
app_2 = dash.Dash(__name__, server=server, url_base_pathname="/pride/branch_financial_amount/")
branch_count = pd.read_csv("dataframe_1.csv")
features = branch_count.columns
branchtypes = features[1:] # don't want the Customer column
app_1.layout = html.Div([
html.Div([
# Here is the interactive component
html.Div([
dcc.Dropdown(
id='first-drop_down',
options=[{'label': i, 'value': i} for i in branchtypes],
value='Login'
),
html.Hr(),
dcc.Dropdown(
id='second-drop_down',
options=[{'label': 'Count', 'value': 'c'},
{'label': 'Fin_amount' , 'value': 'F'}],
value='c'
),
html.Hr(),
dcc.Dropdown(
id='third-drop_down',
options=[{"label": 'Bar Graph', 'value': 'BG'},
{"label": 'Scatter Plot', 'value': 'SP'},
{'label': 'Pie Chart', 'value': 'PC'}],
value='BG'
),
html.Hr()
], style={'width': '60%'})
]),
html.Div([dcc.Graph(
id='branch-graphic',
figure={
'data': [go.Scatter(
x=branch_count['Branch'],
y=[0, 0],
mode='markers'
)],
'layout': go.Layout(
title='Use the dropdown to display the chart ...',
xaxis={'tickformat': 'd'},
plot_bgcolor='#D3D3D3',
paper_bgcolor='#D3D3D3',
font = {
'color' : '#ff0000'
}
)
}
)
], style={'width': '70%', 'display': 'inline-block'}),
html.Div([dcc.Graph(
id='branch-stacked',
figure={
'data': [go.Bar(
x=branch_count['Branch'],
y=branch_count['Login'],
name='Login'
),
go.Bar(
x=branch_count['Branch'],
y=branch_count['Approved'],
name='Approved'
),
go.Bar(
x=branch_count['Branch'],
y=branch_count['Reject'],
name='Reject'
),
go.Bar(
x=branch_count['Branch'],
y=branch_count['Agreement'],
name='Agreement'
),
go.Bar(
x=branch_count['Branch'],
y=branch_count['Disbursed'],
name='Disbursed'
),
go.Bar(
x=branch_count['Branch'],
y=branch_count['Cancelled'],
name='Cancelled'
),
],
'layout': go.Layout(
title='Customer Count in the Dealer from August',
barmode='stack'
)
}
)
], style={'width': '70%', 'display': 'inline-block'}),
html.Div([dcc.Graph(
id='branch-pie',
figure={
'data': [go.Pie(
labels=branch_count["Branch"].unique().tolist(), values=branch_count["Total"].tolist(),
marker={'colors': ['#EF963B', '#C93277', '#349600', '#EF533B', '#57D4F1']},
textinfo='label'
)],
'layout': go.Layout(
title='Cases Reported Monthly',
margin={"l": 300, "r": 300, },
legend={"x": 1, "y": 0.7},
)
}
)
], style={'width': '70%', 'display': 'inline-block'}),
html.Div([
dcc.Markdown(children=markdown_text)
])
], style={'padding': 10})
# Here is the callback
@app_1.callback(
Output('branch-graphic', 'figure'),
[Input('first-drop_down', 'value'),
Input('second-drop_down', 'value')])
def update_graphic(yaxis_branch, plots):
return {
'data': [go.Scatter(
x=branch_count['Branch'],
y=branch_count[yaxis_branch],
mode='lines+markers',
marker={
'size': 20,
'opacity': 0.8,
'line': {'width': 1.0, 'color': 'white'}
}
)],
'layout': go.Layout(
title='{} in the Dealer by Customer Count, August 2019'.format(yaxis_branch),
xaxis={'title': 'Branch'},
yaxis={'title': yaxis_branch},
hovermode='closest',
plot_bgcolor='#D3D3D3',
paper_bgcolor='#D3D3D3',
font={
'color': '#ff0000'
}
)
}
branch_finamt = pd.read_csv("dataframe_2.csv")
features_finamt = branch_finamt.columns
branchtypes_finamt = features_finamt[1:] # don't want the Customer column
app_2.layout = html.Div([
html.Div([
# Here is the interactive component
html.Div([
dcc.Dropdown(
id='yaxis',
options=[{'label': i, 'value': i} for i in branchtypes_finamt],
value='Login_finamt',
)
], style={'width': '60%'})
]),
html.Div([dcc.Graph(
id='branch-graphic',
figure={
'data': [go.Scatter(
x=branch_finamt['Branch'],
y=[0, 0],
mode='markers'
)],
'layout': go.Layout(
title='Use the dropdown to display the chart ...',
xaxis={'tickformat': 'd'}
)
}
)
], style={'width': '70%', 'display': 'inline-block'}),
html.Div([dcc.Graph(
id='branch-stacked',
figure={
'data': [go.Bar(
x=branch_finamt['Branch'],
y=branch_finamt['Login_finamt'],
name='Login'
),
go.Bar(
x=branch_finamt['Branch'],
y=branch_finamt['Approved_finamt'],
name='Approved'
),
go.Bar(
x=branch_finamt['Branch'],
y=branch_finamt['Reject_finamt'],
name='Reject'
),
go.Bar(
x=branch_finamt['Branch'],
y=branch_finamt['Agreement_finamt'],
name='Agreement'
),
go.Bar(
x=branch_finamt['Branch'],
y=branch_finamt['Disbursed_finamt'],
name='Disbursed'
),
go.Bar(
x=branch_finamt['Branch'],
y=branch_finamt['Cancelled_finamt'],
name='Cancelled'
),
],
'layout': go.Layout(
title='Customer Count in the Dealer from August',
barmode='stack'
)
}
)
], style={'width': '70%', 'display': 'inline-block'}),
html.Div([dcc.Graph(
id='branch-pie',
figure={
'data': [go.Pie(
labels=branch_finamt["Branch"].unique().tolist(), values=branch_finamt["Total_finamt"].tolist(),
marker={'colors': ['#EF963B', '#C93277', '#349600', '#EF533B', '#57D4F1']},
textinfo='label'
)],
'layout': go.Layout(
title='Cases Reported Monthly',
margin={"l": 300, "r": 300, },
legend={"x": 1, "y": 0.7},
)
}
)
], style={'width': '70%', 'display': 'inline-block'}),
html.Div([
dcc.Markdown(children=markdown_text)
])
], style={'padding': 10})
# Here is the callback
@app_2.callback(
Output('branch-graphic', 'figure'),
[Input('yaxis', 'value')])
def update_graphic(yaxis_branch):
return {
'data': [go.Scatter(
x=branch_finamt['Branch'],
y=branch_finamt[yaxis_branch],
mode='lines+markers',
marker={
'size': 20,
'opacity': 0.8,
'line': {'width': 1.0, 'color': 'white'}
}
)],
'layout': go.Layout(
title='{} in the Dealer by Customer Count, August'.format(yaxis_branch),
xaxis={'title': 'Branch'},
yaxis={'title': yaxis_branch},
hovermode='closest'
)
}
@server.route('/')
@server.route('/hello')
def hello():
return 'hello world!'
@server.route('/pride/branch_count')
def render_dashboard():
return flask.redirect('/dash1')
@server.route('/pride/branch_financial_amount')
def render_reports():
return flask.redirect('/dash2')
app = DispatcherMiddleware(server, {
'/dash1': app_1.server,
'/dash2': app_2.server
})
run_simple('127.0.0.1', 8080, app, use_reloader=True, use_debugger=True)
Can anyone help me out in this. Any help would be greatly appreciated. Thank you.