Plotly Dash - Python - Issue with callback function - callback

Please bare with my limited experience in programming. At least, I will elaborate.
My task is to create a Dropdown for a number of launch sites, and then plot the success rate in a pie chart. The user can also select a range of payloads with a RangeSlider, that will be used to create a scatter plot.
This is how the result should look like:
enter image description here
Here is the code:
from dash import Dash, dcc, html, Input, Output
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
URL = 'https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBM-DS0321EN-SkillsNetwork/datasets/spacex_launch_geo.csv'
df_spacex = pd.read_csv(URL)
df_spacex.head()
# dropdown menu to choose from the various sites:
app = Dash(__name__)
app.layout = html.Div(children = [
html.Div([
html.H1('SpaceX Launch Records Dashboard',
style = {'textAlign': 'center',
'color': 'black',
'font-size': 24}
),
html.Label('Dropdown:',
style = {'color': 'black',
'font-size': 18}
),
dcc.Dropdown(id = 'site-dropdown',
options = [{'label': 'All Sites', 'value': 'ALL'},
{'label': 'CCAFS SCL-40', 'value': 'CCAFS SLC-40'},
{'label': 'CCAFS LC-40', 'value': 'CCAFS LC-40'},
{'label': 'VAFB SLC-4E', 'value': 'VAFB SLC-4E'},
{'label': 'KSC LC-39A', 'value': 'KSC LC-39A'}],
value = 'ALL',
placeholder = 'Select a site',
searchable = True,
style = {'width': '80%', 'height': '3px',
'textAlign': 'left', 'font-size': '16px'}
),
]),
html.Div([
html.Br(),
html.Br(),
dcc.Graph(id = 'success-pie-chart'),
html.Br(),
html.Label('Payload range slider (kg):',
style = {'color': 'black',
'font-size': 18}
),
dcc.RangeSlider(id = 'payload-slider',
min = df_spacex['Payload Mass (kg)'].min(),
max = df_spacex['Payload Mass (kg)'].max(),
step = 1000,
marks = {0: '0',
100: '100'},
value = [2000, 8000]
),
html.Br(),
dcc.Graph(id = 'success-payload-scatter-chart')
])
])
# function decorator to specify function input and output
#app.callback(Output('success-pie-chart', 'figure'),
Output('success-payload-scatter-chart', 'figure'),
Input('site-dropdown', 'value'),
Input('payload-slider', 'value'))
def get_pie_chart(entered_site, payload):
if entered_site == 'ALL':
fig = px.pie(df_spacex, values = 'class', names = 'Launch Site',
title = 'Successful Launch Distribution by Site')
else:
# choose the rows that have the same launch site as the one entered
df_filtered = df_spacex.loc[df_spacex['Launch Site'] == entered_site]
fig = px.pie(df_filtered, names = 'class',
title = 'Launch Distribution for ' + entered_site)
return fig
def get_scatter_chart(entered_site, payload):
# expand equals True to return a data frame
# with seperated strings in different columns
df_split = df_spacex['Booster Version'].str.split(' ', expand = True)
# save the modified data frame
df_mod = df_spacex.drop(columns = ['Booster Version'], inplace = False)
df_mod['Booster Version'] = df_split[1]
print(payload)
# based on the input payload range choose the corresponding rows
df_mod = df_mod.loc[(df_mod['Payload Mass (kg)'] >= payload[0]) & (df_mod['Payload Mass (kg)'] <= payload[1])]
if entered_site == 'ALL':
fig = px.scatter(df_mod,
x = 'Payload Mass (kg)',
y = 'class',
color = 'Booster Version',
hover_data = ['Booster Version'])
else:
df_filtered = df_mod.loc[df_mod['Launch Site'] == entered_site]
fig = px.scatter(df_filtered,
x = 'Payload Mass (kg)',
y = 'class',
color = 'Booster Version',
hover_data = ['Booster Version'])
return fig
if __name__ == '__main__':
app.run_server(debug = True, use_reloader = False)
Finally, the error that I get is the following:
dash._grouping.SchemaTypeValidationError: Schema: [<Output `success-pie-chart.figure`>, <Output `success-payload-scatter-chart.figure`>]
Path: ()
Expected type: (<class 'tuple'>, <class 'list'>)
Received value of type <class 'plotly.graph_objs._figure.Figure'>:
I really appreciate your time guys.
Please let me know if I can provide any more info or help clarify.
I've tested the functions that take the user's input and produce the pie and scatter charts outside Dash, and they worked fine. So, the error is arising from Dash.

Related

Streamlit conditional formatting for rows in a table

I'm trying to add conditional formatting to table rows in my streamlit app. Using streamlit-aggrid package for it, for now, I found a way to format the table only per-column, for example:
gb = GridOptionBuilder.from_dataframe(mydf)
jscode = JsCode("""
function(params) {
if (params.value > 70) {
return {
'color': 'white'
'backgroundColor': '#fa7e74'
}
} else {
return {
'color': 'black'
'backgroundColor': '#cdf6df'
}
}
};
""")
gb.configure_columns(mydf.columns[col_list], cellStyle=jscode, editable=True)
gridOptions = gb.build()
AgGrid(mydf,gridOptions=gridOptions,allow_unsafe_jscode=True)
I want to get something like this:
I found this article on medium how to make it with Seaborn:
# Set CSS properties for th elements in dataframe
th_props = [
('font-size', '15px'),
('text-align', 'center'),
('font-weight', 'bold'),
('color', '#6d6d6d'),
('backgroud-color', '#f7ffff')
]
#Set table styles
styles = [
dict(selector="th", props=th_props)
]
#Set colormap equal to seaborn light green color palette
cm = sns.light_palette('green', as_cmap=True)
table_to_render = (mydf.style
.background_gradient(cmap=cm, axis=1)
.set_caption('This is custom caption.')
.format(na_rep = 'No data', precision=2, thousands=',')
.highlight_null(null_color='white')
.set_table_styles(styles))
st.table(table_to_render)

How to use the #app.callback function with two inputs as dropdowns?

**Hello everyone!
I have been trying to create an interactive dashboard in python using the #app.callback function with two inputs. My dataset layout can be summarized into 4 main columns. [1]: https://i.stack.imgur.com/boMKt.png
I'd like Geography and Time Period to manifest in the form of dropdowns (therefore use the Dcc. dropdown function.
The first dropdown will filter the dataset according to the Geography and the second one will define the "Period time - MAT, L12w or L4w) within the country. Therefore somehow the second dropdown is to be integrated within the first dropdown.
I am familiarized with both the dropdown and #app.callback function. But I can't seem to find a script that fuses both. Important note: the output desired is a pie chart that distinguishes Manufacturers' (Column 2) value share (column 4) according to the selected Geography and time Period. I am guessing the mystery resides in the app.layout structure. However, I tried everything and the code won't work.
Also, you will find the code I have done so far attached. The important bit is from "#DESIGN APP LAYOUT" onwards.
I'd really appreciate a quick response. Thanks in advance for the help!**
from dash import html
from dash import dcc
from dash.dependencies import Input, Output, State
import plotly.express as px
import pandas as pd
import pandas as pd
pd.options.display.max_columns = None
pd.options.display.max_rows = None
pd.options.display.width=None
data = pd.read_csv (r'C:\Users\Sara.Munoz\OneDrive - Unilever\Documents\Sarita.csv',
encoding = "ISO-8859-1",
)
df=data
print(df.head())
cols=df.columns
print(cols)
###RE-ARRANGE DATASET###
df = pd.melt(df, id_vars=['Geography Node Name', 'Geography Id', 'Geography Level',
'Category Node Name', 'Category Id', 'Category Level',
'Global Manufacturer Name', 'Global Manufacturer Id',
'Brand Position Type', 'Brand Position Name', 'Brand Position Id',
'Local Brand Name', 'Local Brand Id', 'Measure',
'Currency or Unit of Measure','Latest Available Date'],value_vars=['MAT','L12W','L4W'], var_name='Period',value_name='Data')
for col in df.columns:
print(col)
###CLEAN DATASET###
df.rename(columns = {'Geography Node Name':'Geography','Category Node Name':'Category',
'Global Manufacturer Name':'Manufacturer','Geography Level':'GLevel'},inplace = True)
df.drop(["Geography Id", "Category Id","Global Manufacturer Id","Brand Position Type",
"Brand Position Name","Brand Position Id","Local Brand Name","Local Brand Id","Latest Available Date",
"Currency or Unit of Measure"], axis = 1, inplace=True)
print("SEE BELOW NEW DATASET")
print(df.head())
#####FOR VALUE SHARE
print("FOR VALUE SHARE")
df2 = df.loc[df['GLevel'] == 5]
df2 = df2.loc[df2['Measure'] == 'Value Share']
df2 = df2.loc[df2['Category'] == 'Toothpaste']
df2 = df2[df2.Manufacturer != 'ALL MANUFACTURERS']
df2 = df2[df2.Category != 'Oral Care']
df2.drop(["GLevel", "Category","Category Level"], axis = 1, inplace=True)
print(df2.head())
#####FOR VOLUME SHARE
print("FOR VOLUME SHARE")
df3 = df.loc[df['GLevel'] == 5]
df3 = df3.loc[df3['Measure'] == 'Volume Share']
df3 = df3.loc[df3['Category'] == 'Toothpaste']
df3 = df3[df3.Manufacturer != 'ALL MANUFACTURERS']
df3 = df3[df3.Category != 'Oral Care']
df3.drop(["GLevel", "Category","Category Level"], axis = 1, inplace=True)
df3=df3.sort_values(['Geography', 'Period'],ascending = [True, True])
df3 = pd.DataFrame(df3)
df3=df3[['Geography','Period','Manufacturer','Measure','Data']]
print(df3)
###############################################################################
app = dash.Dash(__name__)
app.layout = html.Div(
[
dcc.Dropdown(
id="dropdown-1",
options=[
{'label': 'Indonesia', 'value': 'Indonesia'},
{'label': 'France', 'value': 'France'},
{'label': 'Vietnam', 'value': 'Vietnam'},
{'label': 'Chile', 'value': 'Chile'},
{'label': 'United Arab Emirates', 'value': 'United Arab Emirates'},
{'label': 'Morocco', 'value': 'Morocco'},
{'label': 'Russian Federation', 'value': 'Russian Federation'},
{'label': 'China', 'value': 'China'},
{'label': 'Greece', 'value': 'Greece'},
{'label': 'Netherlands', 'value': 'Netherlands'},
{'label': 'Austria', 'value': 'Austria'},
{'label': 'Germany', 'value': 'Germany'},
{'label': 'Switzerland', 'value': 'Switzerland'},
{'label': 'Italy', 'value': 'Italy'},
{'label': 'Denmark', 'value': 'Denmark'},
{'label': 'Norway', 'value': 'Norway'},
{'label': 'Sweden', 'value': 'Sweden'}
],
multi=True,
),
dcc.Dropdown(
id="dropdown-2",
options=[
{'label': 'MAT', 'value': 'MAT'},
{'label': 'L12W', 'value': 'L12W'},
{'label': 'L4W', 'value': 'L4W'}
],
multi=True,
),
html.Div([], id="plot1", children=[])
], style={'display': 'flex'})
#app.callback(
Output("plot1", "children"),
[Input("dropdown-1", "value"), Input("dropdown-2", "value")],
prevent_initial_call=True
)
def get_graph(entered_Geo, entered_Period):
fd = df2[(df3['Geography']==entered_Geo) &
(df3['Period']==entered_Period)]
g1= fd.groupby(['Manufacturer'],as_index=False). \
mean()
g1 = g1
plot1= px.pie(g1, values='Data', names='Manufacturer', title="Value MS")
return[dcc.Graph(figure=plot1)]
if __name__ == '__main__':
app.run_server()
#DESIGN APP LAYOUT##############################################################################
app.layout = html.Div([
html.Label("Geography:",style={'fontSize':30, 'textAlign':'center'}),
dcc.Dropdown(
id='dropdown1',
options=[{'label': s, 'value': s} for s in sorted(df3.Geography.unique())],
value=None,
clearable=False
),
html.Label("Period:", style={'fontSize':30, 'textAlign':'center'}),
dcc.Dropdown(id='dropdown2',
options=[],
value=[],
multi=False),
html.Div([
html.Div([ ], id='plot1'),
html.Div([ ], id='plot2')
], style={'display': 'flex'}),
])
##############
# Populate the Period dropdown with options and values
#app.callback(
Output('dropdown2', 'options'),
Output('dropdown2', 'value'),
Input('dropdown1', 'value'),
)
def set_period_options(chosen_Geo):
dff = df3[df3.Geography==chosen_Geo]
Periods = [{'label': s, 'value': s} for s in df3.Period.unique()]
values_selected = [x['value'] for x in Periods]
return Periods, values_selected
# Create graph component and populate with pie chart
#app.callback([Output(component_id='plot1', component_property='children'),
Output(component_id='plot2', component_property='children')],
Input('dropdown2', 'value'),
Input('dropdown1', 'value'),
prevent_initial_call=True
)
def update_graph(selected_Period, selected_Geo):
if len(selected_Period) == 0:
return no_update
else:
#Volume Share
dff3 = df3[(df3.Geography==selected_Geo) & (df3.Period==selected_Period)]
#Value Share
dff2 = df2[(df2.Geography==selected_Geo) & (df2.Period==selected_Period)]
#####
fig1 = px.pie(dff2, values='Data', names='Manufacturer', title=" Value MS")
fig2 = px.pie(dff3, values='Data', names='Manufacturer', title=" Volume MS")
table =
return [dcc.Graph(figure=fig1),
dcc.Graph(figure=fig2) ]
if __name__ == '__main__':
app.run_server()```

How to find google charts (Sankey) select events selection data - including tooltip column

I am creating a Sankey chart via react-google-charts. Each time when clicked on the link between the nodes I am printing the data which has been working fine until recently.
Assume my Sankey diagram to be like this and I clicked on the link between A & P:
[A] ----> [P] ------> [X]
[B] ----> [Q] ------> [Y]
[C] ----> [R] ------> [Z]
let myOptions = {
sankey: {
link: {
interactivity: true
}
}
}
...
...
<Chart
chartType='Sankey'
data={
[
['From', 'To', 'Weight', {role: 'tooltip', type: 'string'}],
['A', 'P', 1, 'i111'],
['B', 'Q', 1, 'j333'],
['C', 'R', 1, 'k444'],
['P', 'X', 1, 'l555'],
['Q', 'Y', 1, 'l666'],
['R', 'Z', 1, 'n999']
]
}
columns
options={myOptions}
chartEvents={[
{
eventName: 'select',
callback: ({chartWrapper}) => {
const chart = chartWrapper.getChart()
const selection = chart.getSelection()
if (selection.length === 1) {
const [selectedItem] = selection
const {row} = selectedItem
// below line was working until recently, but not anymore
console.log(chartWrapper.getDataTable().Vf[row].c)
// updated the property key after which it works
console.log(chartWrapper.getDataTable().Wf[row].c)
// returns [{v: 'A'}, {v: 'P'}, {v: 1}, {v: 'i111'}]
}
}
}
]}
/>
I can also get the selection data like this but it does not give me the final column value i.e., tooltip in this case.
console.log(chartWrapper.getDataTable().cache[row])
// returns [{Me: 'A'}, {Me: 'P'}, {Me: '1'}]
Is there any other way for me to get the data apart from what I have done above? Especially the line
chartWrapper.getDataTable().Wf[row].c
Having a property value hardcoded has broken my UI thrice in recent times and I would like to avoid doing so.
to my knowledge, the sankey chart will only allow you to select the nodes,
not the links between the nodes.
and this is only allowed after setting the interactivity option.
options: {
sankey: {
node: {
interactivity: true
}
}
}
the selection returns the name of the node selected,
which can appear in the data table multiple times.
in the following example, I've added an additional "P" node to demonstrate.
when the select event fires, you can get the name of the node selected from the chart's selection.
then you must search through the rows in the data table to find the row with the matching node name.
once you've found the data table row for the selected node name,
you can use data table method getValue to retrieve the values for that row.
see following working snippet...
google.charts.load('current', {
packages: ['controls', 'sankey']
}).then(function () {
var chartWrapper = new google.visualization.ChartWrapper({
chartType: 'Sankey',
containerId: 'chart',
dataTable: google.visualization.arrayToDataTable([
['From', 'To', 'Weight', {role: 'tooltip', type: 'string'}],
['A', 'P', 1, 'i111'],
['B', 'Q', 1, 'j333'],
['C', 'R', 1, 'k444'],
['P', 'X', 1, 'l555'],
['P', 'Y', 2, 'l555'],
['Q', 'Y', 1, 'l666'],
['R', 'Z', 1, 'n999']
]),
options: {
sankey: {
node: {
interactivity: true
}
}
}
});
google.visualization.events.addListener(chartWrapper, 'ready', function () {
google.visualization.events.addListener(chartWrapper.getChart(), 'select', selectEvent);
});
chartWrapper.draw();
function selectEvent() {
var chart = chartWrapper.getChart();
var data = chartWrapper.getDataTable();
var selection = chart.getSelection();
if (selection.length > 0) {
// find data table rows for selected node name
var nodeName = selection[0].name;
var nodeRows = data.getFilteredRows([{
column: 0,
value: nodeName
}]);
// find row values for selected node name
nodeRows.forEach(function (row) {
var valFrom = data.getValue(row, 0);
var valTo = data.getValue(row, 1);
var valWeight = data.getValue(row, 2);
var valTooltip = data.getValue(row, 3);
console.log(valFrom, valTo, valWeight, valTooltip);
});
}
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Chart.js how to display multiple labels on multi bar stacked chart

How can i display different labels under each column and also have another label for the entire group?
As you can see in the picture below i want to use fontawesome icons for each column but another label for the main group. I found other answers how to use fa icons but don't know how to position them under each bar.
The trendlines which connect distinct columns are not so important but would be great if i can find out how to add them also.
Also the chart needs to be scrollable as it can hold lots of data and the labels need to be shown. I found some examples with scroll as well.
Any info is highly appreciated. Or are there any other open source chart frameworks in which i could implement this or something similar to fit my needs?
using google charts...
on the chart's 'ready' event,
you can use chart method --> getChartLayoutInterface()
var chartLayout = chart.getChartLayoutInterface();
the interface has a method --> getBoundingBox()
which will return the position of requested chart element
to get the position of a bar...
var barBounds = chartLayout.getBoundingBox('bar#0#0');
where the first #0 is the series, and the second is the row,
'bar#0#0' would get the first bar on the first row
we can also get the position of the axis label...
var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#0');
we can use a combination of the bar and label bounds to position the icon
we want the left position from the bar, and the top position from the label
see following working snippet,
a column property is used to store the icon name,
the x-axis labels are used for the group
once the icon is in position, the axis label is moved down to make room
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
cols: [
{label: 'x', type: 'string'},
{label: 'file', type: 'number', p: {icon: 'fa-file'}},
{label: 'database', type: 'number', p: {icon: 'fa-database'}},
{label: 'random', type: 'number', p: {icon: 'fa-random'}},
],
rows: [
{c:[{v: 'Label 1'}, {v: 11}, {v: 6}, {v: 15}]},
{c:[{v: 'Label 2'}, {v: 8}, {v: null}, {v: 12}]},
{c:[{v: 'Label 3'}, {v: 6}, {v: 8}, {v: 18}]},
{c:[{v: 'Label 4'}, {v: null}, {v: 1}, {v: 16}]},
]
});
var options = {
bar: {
groupWidth: '50%',
width: 20
},
colors: ['#ffc107', '#d32f2f', '#00bcd4'],
height: 600,
legend: 'none',
title: 'Capacities',
width: 1000,
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
// initialize bounds variables
var axisLabels = container.getElementsByTagName('text');
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var containerBounds = container.getBoundingClientRect();
var labelIndex;
// add icons
for (var r = 0; r < data.getNumberOfRows(); r++) {
var barBounds;
var icon;
var iconBounds;
var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#' + r);
for (var c = 1; c < data.getNumberOfColumns(); c++) {
barBounds = chartLayout.getBoundingBox('bar#' + (c - 1) + '#' + r);
if (barBounds !== null) {
icon = container.appendChild(document.createElement('i'));
icon.className = 'fa ' + data.getColumnProperty(c, 'icon');
icon.style.position = 'absolute';
iconBounds = icon.getBoundingClientRect();
icon.style.top = (containerBounds.top + labelBounds.top) + 'px';
icon.style.left = (barBounds.left + containerBounds.left + (barBounds.width / 2) - (iconBounds.width / 2)) + 'px';
}
}
// move axis label down
labelIndex = -1;
Array.prototype.forEach.call(axisLabels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
labelIndex++;
if (labelIndex === r) {
label.setAttribute('y', (parseFloat(label.getAttribute('y')) + (iconBounds.height * 2)));
}
}
});
}
});
chart.draw(data, options);
});
i {
color: #00bcd4;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google chart table formatting cell as percentage

I am trying to format a cell in a google chart table as a percentage field.
For a column it works with :
var flow_format2 = new google.visualization.NumberFormat( {suffix: '%', negativeColor: 'red', negativeParens: true, fractionDigits: 0} );
But as far as I can read there is no possibility for a row, therefore I would like to do it on cell level - is that possible?
Is it with setProperty I need to do it and what is the formatting syntax.
you can use the formatValue method of NumberFormat to get the formatted string
rather than applying to the entire column
then you can manually setFormattedValue on the DataTable cell
to change the color, use setProperty to change the cell's 'style' property
the chart must be drawn afterwards
--or--
when the chart's 'ready' event fires, you can change the cell value using the DOM
the Table chart produces a normal set of html <table> tags
following is a working snippet, demonstrating both approaches...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'Name', type: 'string'},
{label: 'Amount', type: 'number'},
],
rows: [
{c:[{v: 'Adam'}, {v: -1201}]},
{c:[{v: 'Mike'}, {v: 2235}]},
{c:[{v: 'Stephen'}, {v: -5222}]},
{c:[{v: 'Victor'}, {v: 1288}]},
{c:[{v: 'Wes'}, {v: -6753}]}
]
});
var container = document.getElementById('chart_div');
var tableChart = new google.visualization.Table(container);
var patternFormat = {
suffix: '%',
negativeColor: '#FF0000',
negativeParens: true,
fractionDigits: 0
};
// create the formatter
var formatter = new google.visualization.NumberFormat(patternFormat);
// format cell - first row
dataTable.setFormattedValue(0, 1, formatter.formatValue(dataTable.getValue(0, 1)));
if (dataTable.getValue(0, 1) < 0) {
dataTable.setProperty(0, 1, 'style', 'color: ' + patternFormat.negativeColor + ';');
}
google.visualization.events.addOneTimeListener(tableChart, 'ready', function () {
// format cell via DOM - third row
var tableCell = container.getElementsByTagName('TR')[3].cells[1];
tableCell.innerHTML = formatter.formatValue(dataTable.getValue(2, 1));
if (dataTable.getValue(2, 1) < 0) {
tableCell.style.color = patternFormat.negativeColor;
}
});
tableChart.draw(dataTable, {
allowHtml: true
});
},
packages: ['table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>