Develop Reference

Dash Datatable disappearing while switching between Tabs

I have a Dash app with 2 Tabs and on one Tab I have an upload button while on the other Tab the uploaded dataset is being shown. After uploading the data, it is shown on the second tab but when I switch to the first Tab and come back again to the second Tab, the data table is not there anymore. I have tried using persistence and persistence-type but it doesn't work. Here is the code for the data table
#du.callback(
output=Output('output-datatable', 'children'),
id='upload-data',
)
def get_a_list(filenames):
data1=pd.read_excel(filenames[0])
return dash_table.DataTable(
data = data1.to_dict('records'),
columns = [{'name': i, 'id': i} for i in data1.columns],
page_size =15, persistence = True, persistence_type = 'memory')

Instead of persistence, use dcc.store
In the layout:
dcc.Store(id='store-data', data=[], storage_type='local')
Callback function:
#du.callback(
output=Output('store-data', 'data'),
input = Input(id='upload-data','children')
)
Also check out this video: https://www.youtube.com/watch?v=dLykSQNIM1E

dash DataTable reset on page reload

The following code reads a simple model (3 columns 50 rows) from a CSV file for editing in a table in my (larger) dash app. Editing a cell writes the whole table back to file as expected. However, reloading the page displays the table as it was originally loaded from file, thus losing any edits. Any clues about how to keep the edits between page reloads?
df_topic_list=pd.read_csv(model_file)
app.layout = html.Div([
dcc.Store(id='memory-output'),
html.Div([
dash_table.DataTable(df_topic_list.to_dict('records'),
id='memory-table',
columns=[{"name": i, "id": i} for i in df_topic_list.columns],editable=True
),
])
])
#app.callback(Output('memory-output', 'data'),
Input('memory-table', 'data'))
def on_data_set_table(data):
pd.DataFrame(data).to_csv(model_file,index=False)
return data
app.run_server(port=8052)

When you refresh page then it doesn't run all code again but it only sends again app.layout which it generated only once and which has original data from file. And when you update data in cell in table then it updates only values in browser (using JavaScript) but not in code app.layout.
But it has options to presist values in browser memory and it should use these values after reloading.
app.layout = html.Div([
dcc.Store(id='memory-output'),
html.Div([
dash_table.DataTable(
df_topic_list.to_dict('records'),
id='memory-table',
columns=[{"name": i, "id": i} for i in df_topic_list.columns],
editable=True,
persistence=True, # <---
persisted_props=["data"], # <---
)
])
])
It works for me but it seems some people had problem with this.
See issues: Dash table edited data not persisting · Issue #684 · plotly/dash-table
But I found other method to keep it.
I assign table to separated variable - ie. table - and in callback I replace table.data in this table.
from dash import Dash, Input, Output, callback
from dash import dcc, html, dash_table
import pandas as pd
model_file = 'data.csv'
df_topic_list = pd.read_csv(model_file)
app = Dash(__name__)
table = dash_table.DataTable(
df_topic_list.to_dict('records'),
id='memory-table',
columns=[{"name": i, "id": i} for i in df_topic_list.columns],
editable=True,
)
app.layout = html.Div([
dcc.Store(id='memory-output'),
html.Div([table])
])
#app.callback(
Output('memory-output', 'data'),
Input('memory-table', 'data')
)
def on_data_set_table(data):
pd.DataFrame(data).to_csv(model_file, index=False)
table.data = data # <--- replace data
return data
app.run_server(port=8052)

Define Dependent Dictionaries in Python

I am working on an NLP project analyzing the words spoken by characters in The Office. Part of this project involves making a network diagram of which characters talk to each other for a given episode.
This will be shown in a Dash app by allowing a user to select dropdowns for 4 parameters: season, episode, character1, and character2.
Here is a relevant snippet of my code so far:
#Import libraries
import pandas as pd
import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
#Load data
sheet_url = 'https://docs.google.com/spreadsheets/d/18wS5AAwOh8QO95RwHLS95POmSNKA2jjzdt0phrxeAE0/edit#gid=747974534'
url = sheet_url.replace('/edit#gid=', '/export?format=csv&gid=')
df = pd.read_csv(url)
#Set parameters
choose_season = df['season'].unique()
choose_episode = df['episode'].unique()
choose_character = ['Andy','Angela', 'Darryl', 'Dwight', 'Jan', 'Jim','Kelly','Kevin','Meredith','Michael','Oscar','Pam','Phyllis','Roy','Ryan','Stanley','Toby']
#Define app layout
app = dash.Dash()
server = app.server
app.layout = html.Div([
dbc.Row([
dbc.Col(
dcc.Dropdown(
id='dropdown1',
options=[{'label': i, 'value': i} for i in choose_season],
value=choose_season[0]
), width=3
),
dbc.Col(
dcc.Dropdown(
id='dropdown2',
options=[{'label': i, 'value': i} for i in choose_episode],
value=choose_episode[0]
), width=3
),
dbc.Col(
dcc.Dropdown(
id='dropdown3',
options=[{'label': i, 'value': i} for i in choose_character],
value=choose_character[0]
), width=3
),
dbc.Col(
dcc.Dropdown(
id='dropdown4',
options=[{'label': i, 'value': i} for i in choose_character],
value=choose_character[1]
), width=3
)
])
])
if __name__=='__main__':
app.run_server()
In order to have this work efficiently, I would like to have the following dependencies in the dropdown menus:
1.) The selection of the first dropdown menu updates the dropdown menu
ie: Season updates possible episodes
2.) The selection of the first two dropdown menus updates the 3rd and 4th dropdown menus
ie: Season, Episode updates possible characters (if a character was not in that episode, they will not appear)
3.) The selection of the third dropdown menu updates the fourth dropdown menu
ie: If a character is selected in the third dropdown menu, they can not be selected in the fourth (can't select the same character twice)
I understand one way to do this is to make a massive season to episode dictionary and then an even larger season to episode to character dictionary.
I've already made the code to process the season to episode dictionary:
#app.callback(
Output('dropdown2', 'options'), #--> filter episodes
Output('dropdown2', 'value'),
Input('dropdown1', 'value') #--> choose season
)
def set_episode_options(selected_season):
return [{'label': i, 'value': i} for i in season_episode_dict[selected_season]], season_episode_dict[selected_season][0]
I can definitely build these dictionaries, but this seems like a really inefficient use of time. Does anyone know of a way to build these dictionaries with just a few lines of code? Not sure how to approach building these in the easiest way possible. Also, if you have an idea for a better way to approach this problem, please let me know that too.
Any help would be appreciated! Thank you!

I think I see what you're asking about now. Something like this should get you a basic dictionary, which you could then modify for the options param for the dropdowns.
df = pd.read_csv(url)
season_episode_character_dictionary = {}
for season in df['season'].unique.tolist():
df_season = df[df['season'].eq(season)]
season_episode_character_dictionary[season] = {}
for episode in df_season['episode'].unique.tolist():
df_episode = df_season[df_season['episode'].eq(episode)]
characters = df_episode['characters'].unique.tolist()
season_episode_character_dictionary[season][episode] = characters

Sharing dataframe between callbacks

I am trying to share dataframe between callbacks but i keep getting this error. I want to use dcc.store to the data. Then I will have one callback filtering the data while the other callback plotting the graph.
"Callback error updating main_data.data"
My code run fine if I include everything in one callback, but it won't work once I split it.
import dash
import pathlib
import numpy as np
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
from flask import Flask
df =pd.read_csv("salesfunnela.csv")
mgr_options = df["Manager"].unique()
mgr_options = np.insert(mgr_options, 0 , 'All Managers')
server = Flask(__name__)
app = dash.Dash(server=server)
app.layout = html.Div([
dcc.Store(id='main_data'),
html.Div(
[
html.P("Div1", className="control_label"),
dcc.Dropdown(
id="Manager",
options=[{
'label': i,
'value': i
} for i in mgr_options],
value='All Managers'),
],
style={'width': '25%',
'display': 'inline-block'}),
dcc.Graph(id='funnel-graph'),
html.Div(
[
html.P("Div2", className="abc"),
],
style={'width': '25%',
'display': 'inline-block'}),
])
#app.callback(
dash.dependencies.Output('main_data', 'data'),
[dash.dependencies.Input('Manager', 'value')])
def update_data(Manager):
if Manager == "All Managers":
df_plot = df.copy()
else:
df_plot = df[df['Manager'] == Manager]
return df_plot
#app.callback(
dash.dependencies.Output('funnel-graph', 'figure'),
[dash.dependencies.Input('main_data', 'data')])
def update_graph(main_data):
pv = pd.pivot_table(
df_plot,
index=['Name'],
columns=["Status"],
values=['Quantity'],
aggfunc=sum,
fill_value=0)
traces = [go.Bar(x=pv.index, y=pv[('Quantity', t[1])], name=t[1]) for t in pv]
return {
'data': traces,
'layout':
go.Layout(
title='Customer Order Status for {}'.format(Manager),
barmode='stack')
}
if __name__ == '__main__':
app.run_server(debug=True)

Some time has passed but I hope this might help.
What is basically discussed in previous answer is to change def update_graph(main_data) to def update_graph(df_plot), or alternatively, change df_plot in the function to main_data if you like. this will most likely not solve your problem though. Since the problem is that the function update_data cannot store the data in the first place. The idea to store the filtered data somewhere is probably a good idea, instead of sending it through chained callbacks.
In the section for sharing data between callbacks in the docs/getting started guide (https://dash.plotly.com/sharing-data-between-callbacks), it says that you have to store the data as either JSON or base64 encoded binary data. A Pandas DataFrame is not binary data in an ASCII string format (base64), if you want to encode a DataFrame in base64 you should probably convert it to a string first and then encode that into base64 (e.g. https://docs.python.org/3/library/base64.html). So in your example code, to use JSON, you would have to change the return statement to
return df_plot.to_json(date_format='iso', orient='split')
in the update_data function.
Then in update_graph you would now need to convert the JSON back into Pandas DataFrame. The first few lines of that function would then look like this instead
def update_graph(main_data):
df_plot = pd.read_json(main_data, orient='split')
pv = pd.pivot_table(
df_plot,
index=['Name'],
columns=["Status"],
values=['Quantity'],
aggfunc=sum,
fill_value=0)
I hope this helps, and that it's not too late.

You probably want to read more about Chained callbacks...
Docs - https://dash.plotly.com/basic-callbacks
Scroll down to the section: Dash App With Chained Callbacks
In the docs-example, you'll notice that the data is not really passed between two callbacks.
Rather they work like event listeners, listening to updates in the DOM.
In your case, there's nothing called "main-data" in the layout, which the second callback is trying to listen to.
Try to play around with 'funnel-graph' or 'Div2' or setup another element whose updates can be tracked by these callbacks.

Plotly: Dash button with live graph not working

i developed python dash based application for monitoring. as a part of the project i want to display live graph and change the live graph value based on user input. i am stuck in this part. the live graph getting update when i start typing in input box (eg:temp) the graph keep on updating for each letter like t,te,tem,temp. so i created a button to submit the input value. still the graph updating for each letter.
the code for the same:
app = dash.Dash(__name__)
app.layout = html.Div(
[
dcc.Input(id='input-value', value='example', type='text'),
html.Button('Submit', id="submit-button"),
dcc.Graph(id='live-graph', animate=False),
dcc.Interval(
id='graph-update',
interval=1*1000
),
]
)
call back function is like below
#app.callback(Output('live-graph', 'figure'),
[Input('submit-button','n_clicks')],
state=[State(component_id='sentiment_term', component_property='value')],
events=[Event('graph-update', 'interval')])
def update_graph_scatter(n_clicks, input_value):
conn = sqlite3.connect('database.db')
c = conn.cursor()
df = pd.read_sql("SELECT * FROM table WHERE colume LIKE ? ORDER BY unix DESC LIMIT 1000", conn ,params=('%' + input_value+ '%',))
df.sort_values('unix', inplace=True)
df['date'] = pd.to_datetime(df['unix'],unit='ms')
df.set_index('date', inplace=True)
X = df.index
Y = df.column
data = plotly.graph_objs.Scatter(
x=X,
y=Y,
name='Scatter',
mode= 'lines+markers'
)
return {'data': [data],'layout' : go.Layout(xaxis=dict(range= [min(X),max(X)]),
yaxis=dict(range=[min(Y),max(Y)])}
Note: If i removed the interval the button start working.but i want to be live update as well as button

You could use an intermediate component like a div to save the input from the text field and update that div only on button click.
So you would have
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Input(id='input-value', value='example', type='text'),
html.Div(['example'], id='input-div', style={'display': 'none'}),
html.Button('Submit', id="submit-button"),
dcc.Graph(id='live-graph', animate=False),
dcc.Interval(
id='graph-update',
interval=1*1000
),
])
Now you update the div only on button click:
#app.callback(Output('input-div', 'children'),
[Input('submit-button', 'n_clicks')],
state=[State(component_id='input-value', component_property='value')])
def update_div(n_clicks, input_value):
return input_value
And the Graph always uses the the div content to query your database (either when the interval triggers or the div changes):
#app.callback(Output('live-graph', 'figure'),
[Input('graph-update', 'interval'),
Input('input-div', 'children')])
def update_graph_scatter(n, input_value):
...

Are you sure the updates on each letter are because of the input? Sounds like the interval updates the graph with the not finished input you are typing.
P.S.: I guess you have a name discrepancy between you Input and State id.