Update plotly gauge chart value dynamically

📊 Plotly Python
1

I need to update a value of plotly gauge chart in python. Here is my source code:

import plotly.graph_objects as go

fig = go.Figure(go.Indicator(
    domain={'x': [0, 1], 'y': [0, 1]},
    value=450,
    mode="gauge+number+delta",
    title={'text': "Speed"},
    delta={'reference': 380},
    gauge={'axis': {'range': [None, 500]},
           'steps': [
               {'range': [0, 250], 'color': "lightgray"},
               {'range': [250, 400], 'color': "gray"}],
           'threshold': {'line': {'color': "red", 'width': 4}, 'thickness': 0.75, 'value': 490}}))

fig.show()

How can I access to value and change it and display every time, if the value changes? I have used update_traces But it needs to use fig.show() again and when I use fig.show() the previous figure does update and new figure appears.

What should I do?

2

Hi @Bijan, I think you can use dash for that. I created an example below:

import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output


fig = go.Figure()

fig.add_trace(go.Indicator(
    name = "my_trace",
    domain={'x': [0, 1], 'y': [0, 1]},
    value=450,
    mode="gauge+number+delta",
    title={'text': "Speed"},
    delta={'reference': 380},
    gauge={'axis': {'range': [None, 500]},
           'steps': [
               {'range': [0, 250], 'color': "lightgray"},
               {'range': [250, 400], 'color': "gray"}],
           'threshold': {'line': {'color': "red", 'width': 4}, 'thickness': 0.75, 'value': 490}}))





app = dash.Dash(__name__)

app.layout = html.Div([


    html.Div([dcc.Graph(figure=fig,id="my_gauge")]),

    
    html.Div([dcc.Slider(id = 'my_slider',
                         min = 0,
                         max = 500,
                         step = 100,
                         value= 100,
                         marks={0:'0',
                                100:'100',
                                200:'200',
                                300:'300',
                                400:'400',
                                500:'500'
                                }
                         
                         )
              ])
    
    
])


@app.callback(
    Output('my_gauge', 'figure'),
    Input('my_slider', 'value')
    )

def update_gauge(slider_value):

    
    fig.update_traces(value=slider_value, selector=dict(name="my_trace"))
    return fig



if __name__ == "__main__":
    app.run_server(debug=True)

gauge_gif

Hope this helps.

2 Likes
3

Is there a way to change the value programmatically from inside the python code and not with the slider?