Dash Plotly - CSV to Pie Chart using Slider Callback

Dash Python
1

Hello All,

I’m having some trouble having my callback give me back two values from a csv record, rather than just one.

For example:

Code-

Blockquote
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

df = pd.read_csv(‘pcl-sales.csv’)

app.layout = html.Div([
dcc.Graph(id=‘pcl-sales-history’),
dcc.Slider(
id=‘date-slider’,
min=df[‘Date’].min(),
max=df[‘Date’].max(),
value=df[‘Date’].min(),
marks={str(Date): str(Date) for Date in df[‘Date’].unique()},
step=None
)
])

@app.callback(
Output(‘pcl-sales-history’, ‘figure’),
[Input(‘date-slider’, ‘value’)])
def update_figure(input_value):
return {
“data”: [go.Pie(labels=[“Percentage Shipped”],
values=df[df[“Date”] == input_value][“Percentage Shipped”],
textinfo=‘label’)],
“layout”: go.Layout(title=f"Shipped Performance for Day", margin={“l”: 300, “r”: 300, },
legend={“x”: 1, “y”: 0.7})}

if name == ‘main’:
app.run_server(debug=True,host=‘0.0.0.0’)

And here’s the CSV-

Blockquote
Date,Orders Raised,Orders Shipped,Orders Open,Lines Raised,Lines Shipped,Lines Open,Sheets Shipped,Sheets Open,Percentage Shipped,Percentage Open
2,48,23,25,88,43,45,“26,200.00”,“46,800.00”,47.91666667,52.08333333
3,50,30,20,88,40,48,“26,200.00”,“48,200.00”,60,40
6,39,18,21,70,21,49,“40,000.00”,“81,600.00”,46.15384615,53.84615385
7,40,22,18,65,25,40,“32,000.00”,“12,000.00”,55,45
8,50,40,10,55,40,15,“40,000.00”,“45,000.00”,80,20
9,60,42,28,70,50,40,“50,000.00”,“54,000.00”,70,46.66666667
10,58,50,8,100,60,50,“60,000.00”,“4,500.00”,86.20689655,13.79310345
13,70,50,30,71.42857143,42.85714286
14,60,42,18,70,30
15,57,37,20,64.9122807,35.0877193
16,68,50,18,73.52941176,26.47058824
17,82,46,36,56.09756098,43.90243902
20,76,30,46,39.47368421,60.52631579
21,24,10,14,41.66666667,58.33333333
22,48,45,3,93.75,6.25
23,30,20,10,66.66666667,33.33333333
24,80,72,8,90,10
25,57,30,27,52.63157895,47.36842105

The outcome I am getting is as follows-

screenshot4
screenshot4870×501 58.1 KB

The outcome that I want is for example if the value is day 7, I want to see 55 (percentage shipped) and 45 (percentage open). The callback works in that it always shows me the correct percentage shipped, but I also want to see percentage open.

Thanks in advance,

Joseph

2

Hi All,

I resolved this issue

Firstly- I did some debugging with python so I ran some print statements to determine the value of “input_value” which was the number of the date column.

Then- I realised that I need the index of the “input_value” relative to the index of “df”. So it looks like python was used to resolve this issue.

Using the same CSV file, my completed code now looks 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
from dash.dependencies import Input, Output

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

df = pd.read_csv(‘pcl-sales.csv’)

app.layout = html.Div([
dcc.Graph(id=‘pcl-sales-history’),
dcc.Slider(
id=‘date-slider’,
min=df[‘Date’].min(),
max=df[‘Date’].max(),
value=df[‘Date’].min(),
marks={str(Date): str(Date) for Date in df[‘Date’]},
step=None
)
])

def find_date(dayofmonth):
for index, item in enumerate(df[‘Date’]):
if item == dayofmonth:
return index
return 0

@app.callback(
Output(‘pcl-sales-history’, ‘figure’),
[Input(‘date-slider’, ‘value’)])

def update_figure(input_value):

ndx = find_date(input_value)
shipped = df['Orders Shipped'][ndx]
open = df['Orders Open'][ndx]
info = [shipped, open]

return {
    "data": [go.Pie(labels=["Shipped", "Open"],
                    values=info,
                    textinfo='label')],
    "layout": go.Layout(title=f"Shipped Performance for Janurary 2020",
                        margin={"l": 300, "r": 300, },
                        legend={"x": 1, "y": 0.7})}

if name == ‘main’:
app.run_server(debug=True,host=‘0.0.0.0’)

I hope this helps somebody. This forum post can be marked as closed/completed :slight_smile:

1 Like