🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

[Solved] Annotations not updating through callback

I have a donut chart that represents a % and updates itself every 10 secs. I put an anotattion in the middle that shows the % it’s in at the moment. The thing is, while the pie chart updates itself, the annotations does not unless you recharge the page (I guess is because the layout is saved on caché?). Does anyone now how to force the desired behaviour?

@app.callback(Output('monitor-oee', 'figure'),
              [Input('graph-update', 'n_intervals')])
def update_pie_oee(n):
    while True:
        try:
            cur.execute("""SELECT oee FROM monitor_prod WHERE intervalo = (SELECT MAX(intervalo) FROM monitor_prod)""")
        except:
            print("Fallo en transacción")
            conn.rollback()
            continue
        break 
    oee = cur.fetchall()[0][0]
    cadena = "%.1f" % (oee) + "%",
    annotations = [dict(showarrow=False, text = '<b>' + cadena[0] + '</b>', x = 0.5, y = 0.5, font = dict(size = 30), xanchor = "center"),dict(showarrow=False, text = 'OEE(%)', x = 0.5, y = 0.6, font = dict(size = 20), xanchor = "center")]
    trace0 = go.Pie(
        values = [oee,100-oee],
        ids = ['OEE(%)',' '],
        labels = ['OEE(%)',' '],
        hoverinfo = 'none',
        textinfo = 'none',
        hole = .5,
        textfont = dict(size=20),
        direction = 'clockwise',
        rotation = 270,
        sort=False,
        marker = go.pie.Marker(dict(colors=['#0080ff','#D3D3D3'],line=dict(color='#000000', width=2))),
    )
    return {'data':[trace0],'layout': go.Layout(annotations = annotations, showlegend=False, margin=go.layout.Margin(l=50,r=50,b=60,t=60))}

Tried with Status and editing the figure and then returning it, but it won’t update the annotations either:

@app.callback(Output('monitor-oee', 'figure'),
              [Input('graph-update', 'n_intervals')],
              [State('monitor-oee', 'figure')])
def update_pie_oee(n,figure):
    while True:
        try:
            cur.execute("""SELECT oee FROM monitor_prod WHERE intervalo = (SELECT MAX(intervalo) FROM monitor_prod)""")
        except:
            print("Fallo en transacción")
            conn.rollback()
            continue
        break
    oee = cur.fetchall()[0][0]
    cadena = "%.1f" % (oee) + "%"
    trace0 = go.Pie(
        values = [oee,100-oee],
        ids = ['OEE(%)',' '],
        labels = ['OEE(%)',' '],
        hoverinfo = 'none',
        textinfo = 'none',
        hole = .5,
        textfont = dict(size=20),
        direction = 'clockwise',
        rotation = 270,
        sort=False,
        marker = go.pie.Marker(dict(colors=['#0080ff','#D3D3D3'],line=dict(color='#000000', width=2)),
    ))
    figure['data'] = []
    figure['data'].append(trace0)
    figure['layout']['annotations'] = []
    annotations = [dict(showarrow=False, text = '<b>' + cadena + '</b>', x = 0.5, y = 0.5, font = dict(size = 30), xanchor = "center"),dict(showarrow=False, text = 'OEE(%)', x = 0.5, y = 0.6, font = dict(size = 20), xanchor = "center")]
    margin = go.layout.Margin(l=50,r=50,b=60,t=60)
    figure['layout'] = go.Layout(annotations = annotations, showlegend=False, margin=go.layout.Margin(l=50,r=50,b=60,t=60))
    return figure

The problem was I had declared the figure with data and layaout as empty on the app.layout. I removed it and left only the ID and it works now, I don’t understand the logic of it all but as long a it works…

It actually was the Animate = True, turned it to False and it’s updating as it should

1 Like