Dash app update of current value without function

Question

i have found a nice code on stackoverflow
( Dash app, plotly chart data outside the chart area)
I have change to "pie-figure"

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
#from datetime import datetime
import plotly.graph_objs as go
import random

labels = ['Mom','Max']

y_values = []  # finally: 1st value read c:\test.txt ( only 1 value is inside,
                                                    # sec value = 6000 - 1st value ) 


# Initialize the dash app
app = dash.Dash()

app.layout = html.Div([
    dcc.Graph(id='live-graph', animate=True,responsive=True),
    dcc.Interval(
        id='graph-update',
        interval=1000,
        n_intervals=0
    ),
])

# Define the callback function
@app.callback(Output('live-graph', 'figure'), [Input('graph-update', 'n_intervals')])
def update_graph(n):

    current_value= random.randint(2000, 8000) 
    
    # Get the response value and append it to the y_values list
    y = current_value
    y_values.append(y)

    # Create the line chart
    trace = go.Pie(labels=labels, values=y_values)
    data = [trace]

    layout = go.Layout(title='Real-time Data')
    
    return go.Figure(data=data)
    

if __name__ == '__main__':
    app.run_server(host="192.168.178.26", port=8050, debug=True)

why does the current value didn´t change?
what must i do?

Many thanks!

Asked By: Peter

||

Source

Answer 1

I think there’s two main problems you need to fix:

the way you have written your dash app, the labels will stay the same after every update, but the labels need to be the same length as the y_values (see the documentation for go.Pie). To fix this, I randomly selected a new label from ["Mom", "Max"] along with a new y-value for every update (but this can be changed if you intended for the dash app to do something different)
I believe the argument animate=True for dcc.Graph only applies to certain types of charts like bar charts and line charts where you can draw something smooth. for a pie chart, you don’t need an animation (you can just redraw the chart) and I think this is what is causing the code to break. once I set animate=False, the pie chart updates

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
#from datetime import datetime
import plotly.graph_objs as go
import random

labels = []
y_values = []  # finally: 1st value read c:\test.txt ( only 1 value is inside,
                                                    # sec value = 6000 - 1st value ) 
random.seed(42)

# Initialize the dash app
app = dash.Dash()

app.layout = html.Div([
    dcc.Graph(id='live-graph', animate=False, responsive=True),
    dcc.Interval(
        id='graph-update',
        interval=1000,
        n_intervals=0
    ),
])

# Define the callback function
@app.callback(Output('live-graph', 'figure'), [Input('graph-update', 'n_intervals')])
def update_graph(n):

    current_value= random.randint(2000, 8000) 
    current_label= random.choice(['Mom','Max'])
    
    # Get the response value and append it to the y_values list
    y = current_value
    y_values.append(y)
    labels.append(current_label)

    # Create the pie chart
    trace = go.Pie(labels=labels, values=y_values)
    # trace = go.Bar(x=labels, y=y_values)
    data = [trace]

    layout = go.Layout(title='Real-time Data')
    
    return go.Figure(data=data, layout=layout)
    

if __name__ == '__main__':
    app.run_server(port=8050, debug=True)

Answered By: Derek O

Dash app update of current value without function

Question:

Answers: