[SOLVED] Updating Bar Chart from Callback not working

Dash Python
1

First of all, great tool! I’m so glad I stumbled upon this almost by chance.

So, I’m making a multipage app to plot data from a database, I want to have a radio selector to swap between plotting lines and plotting bars. I know radio selector and line graph are working just fine, but when it comes to update the graph to a bar chart, it just won’t work.

#Imports
import datetime as dt
import dash_table
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go

#Page view
   elif pathname == '/latest':
        return html.Div([
                dcc.DatePickerRange(
                    id='date-selector',
                    min_date_allowed = min_date,
                    max_date_allowed = max_date,
                    initial_visible_month = max_date,
                    display_format = 'DD MMM YYYY'
                ),
                html.Div([
                    html.Div([
                        html.H3('Graph'),
                        dcc.RadioItems(
                            id='selector-graph-type',
                            options=[
                                {'label': 'Lines', 'value': 'lines'},
                                {'label': 'Bars', 'value': 'bars'},
                            ], labelStyle={'display': 'inline-block'},
                            value='bars',
                        ),
                        dcc.Graph(id='other-prods-graph',
                                  figure = {'data':[]},
                        ),
                    ], className="six columns"),
                ], className= "row"),
        ])
        
    else:
        return '404'

#Callback to update graph
#CALLBACKS PRODUCCIONES ANTERIORES
@app.callback(Output('other-prods-graph','figure'),
             [Input('date-selector','start_date'),
              Input('date-selector','end_date'),
              Input('selector-graph-type','value')])
def update_graph_date(start_date, end_date, value):
#DATA FETCHING 
    if value == 'bars':
        print("Printing bars") #This gets printed so until here it works fine
        return go.Figure(
            data=[
                go.Bar(
                    x = list(ids),
                    y = list(oee),
                    name = 'OEE (%)',
                    marker=dict(color='blue'),
                ),
                go.Bar(
                    x = list(ids),
                    y = list(prod_ok),
                    name = 'Piezas OK',
                    marker=dict(color='greenyellow'),
                ),
                go.Bar(
                    x = list(ids),
                    y = list(prod_nok),
                    name = 'Piezas NOK',
                    marker=dict(color='red'),
                ),
            ],
        ),
    else: #Plot line graph, also working fine
        modo = 'lines + markers'
        trace0 = go.Scatter(
            x = list(ids),
            y = list(prod_ok),
            mode = modo,
            marker= go.scatter.Marker(color='greenyellow'),
            name = 'Piezas OK',
        )
        trace1 = go.Scatter(
            x = list(ids),
            y = list(prod_nok),
            mode = modo,
            marker= go.scatter.Marker(color='red'),
            name = 'Piezas NOK',
        )
        trace2 = go.Scatter(
            x = list(ids),
            y = list(oee),
            mode = modo,
            marker= go.scatter.Marker(color='blue'),
            name = 'OEE',
        )
        return {'data': [trace0, trace1, trace2],'layout' : go.Layout(xaxis=dict(range=[min(ids),max(ids)]),
                                                    yaxis=dict(range=[0,max([max(prod_ok),max(prod_nok),max(oee)])]),)}

Some code was ommited due to clarity purpouse

3

I’m going to say maybe its because you don’t define a layout for your Bar Chart. Also, I wouldn’t initialize your data with an empty list:

dcc.Graph(id='other-prods-graph',
                figure = {'data':[]},
               ),

I would just remove figure = {'data':[]},

Id also recommend being as consistent as you can when you do things. For instance, is there a reason that for you Bar Chart you use go.Figure and then for the Scatter you use:

return {'data': [trace0, trace1, trace2],'layout' : go.Layout(xaxis=dict(range=[min(ids),max(ids)]),
                                                    yaxis=dict(range=[0,max([max(prod_ok),max(prod_nok),max(oee)])]),)}