Graph wont show on multi pages

Dash Python
1

i have dash app that integrate with flask. my app has multi-pages, first page show my entire parameter data and my second page show only temperature and humidity, the second page has dcc.graph, but the graph wont show, just the data. i think my callback function on app.py is wrong

@app_dash.callback(
    [Output({'type': 'sensor-value', 'id': 'suhu-display-indoor'}, 'children'),
     Output({'type': 'sensor-value', 'id': 'kelembaban-display-indoor'}, 'children'),
     Output({'type': 'sensor-value', 'id': 'co2-display'}, 'children'),
     Output({'type': 'sensor-value', 'id': 'windspeed-display'}, 'children'),
     Output({'type': 'sensor-value', 'id': 'rainfall-display'}, 'children')],
    [Input('interval_mcs', 'n_intervals')]
)
def update_main_dashboard(n):
    try:
        suhu = data['suhu'][-1] if data['suhu'] else 0
        kelembaban = data['kelembaban'][-1] if data['kelembaban'] else 0
        co2 = data['co2'][-1] if data['co2'] else 0
        windspeed = data['windspeed'][-1] if data['windspeed'] else 0
        rainfall = data['rainfall'][-1] if data['rainfall'] else 0

        return (
            f" {suhu}°C",
            f" {kelembaban}%",
            f" {co2}PPM",
            f" {windspeed}m/s",
            f" {rainfall}mm"
        )
    except Exception as e:
        print(f"Error in update_main_dashboard: {e}")
        return "N/A", "N/A", "N/A", "N/A", "N/A"

# Separate callback for th_in layout
@app_dash.callback(
    [Output({'type': 'sensor-value', 'id': 'suhu-display-indoor'}, 'children', allow_duplicate=True),
     Output({'type': 'sensor-value', 'id': 'kelembaban-display-indoor'}, 'children', allow_duplicate=True),
     Output({'type': 'sensor-value', 'id': 'temp-graph'}, 'figure', allow_duplicate=True),
     Output({'type': 'sensor-value', 'id': 'humidity-graph'}, 'figure', allow_duplicate=True)],
    [Input('interval_thin', 'n_intervals')],
    prevent_initial_call=True
)
def update_th_in_dashboard(n):
    try:
        suhu = data['suhu'][-1] if data['suhu'] else 0
        kelembaban = data['kelembaban'][-1] if data['kelembaban'] else 0

        # Konversi waktu ke datetime jika belum
        waktu = [datetime.strptime(w, '%H:%M:%S') if isinstance(w, str) else w for w in data['waktu']]

        # Temperatur
        temp_fig = go.Figure()
        temp_fig.add_trace(go.Scatter(
            x=waktu,
            y=data['suhu'],
            mode='lines+markers',
            name='Temperature',
            line=dict(color='#FF4B4B', width=2),
            marker=dict(size=6)
        ))
        temp_fig.update_layout(
            template='plotly_white',
            margin=dict(l=20, r=20, t=20, b=20),
            yaxis=dict(title='Temperature (°C)', range=[min(data['suhu']) - 2, max(data['suhu']) + 2]),
            xaxis=dict(title='Time', showgrid=True),
            showlegend=False,
            height=250  # Naikkan biar kelihatan
        )

        # Kelembaban
        humidity_fig = go.Figure()
        humidity_fig.add_trace(go.Scatter(
            x=waktu,
            y=data['kelembaban'],
            mode='lines+markers',
            name='Humidity',
            line=dict(color='blue', width=2),
            marker=dict(size=6)
        ))
        humidity_fig.update_layout(
            template='plotly_white',
            margin=dict(l=20, r=20, t=20, b=20),
            yaxis=dict(title='Humidity (%)', range=[min(data['kelembaban']) - 5, max(data['kelembaban']) + 5]),
            xaxis=dict(title='Time', showgrid=True),
            showlegend=False,
            height=250
        )

        return f"{suhu}°C", f"{kelembaban}%", temp_fig, humidity_fig

    except Exception as e:
        print(f"Error in update_th_in_dashboard: {e}")
        empty_fig = go.Figure()
        return "N/A", "N/A", empty_fig, empty_fig
2

Hey @chinatsu welcome to the forums.

Is data some sort of global variable?

3

Yes the data is global variable. I just fix the problem, its related to my css that change the plotly style. Btw thank you

1 Like