Plotly-Dash: Dropdown options work but won't plot data

Question

I am new to Dash. I am trying to plot a simple line plot and add a dropdown to change the data which comes from a dataframe (which is nested in a dictionary with other dataframes). Here is the dataframe:

df_vals['corn']

time    2m_temp_prod    2m_temp_area    total_precip_prod   total_precip_area
0   2020-09-19 00:00:00 299.346777  299.799234  0.000000    0.000000
1   2020-09-19 06:00:00 294.039512  294.443352  0.191070    0.286952
2   2020-09-19 12:00:00 292.959274  293.182931  0.155765    0.216606
3   2020-09-19 18:00:00 301.318046  301.767516  0.421768    0.485691
4   2020-09-20 00:00:00 300.623567  300.979650  0.363572    0.501164
... ... ... ... ... ...
56  2020-10-03 00:00:00 301.177141  301.052273  0.371209    0.408515
57  2020-10-03 06:00:00 295.874298  295.720135  0.281793    0.300564
58  2020-10-03 12:00:00 293.838787  293.686738  0.586887    0.549365
59  2020-10-03 18:00:00 302.384474  302.191334  0.492712    0.493798
60  2020-10-04 00:00:00 300.920766  300.817993  0.522374    0.531138

Here is the code where I attempt the plot.

app = JupyterDash(__name__)
cols=df_vals['corn'].columns[1:]
app.layout = html.Div([
    html.Div([

        html.Div([
            dcc.Dropdown(
                id='variables',
                options=[{'label': i, 'value': i} for i in cols],
                value='2m_temp_prod'
            )
        ]),
    dcc.Graph(id='plot')])
])

@app.callback(
    Output('plot', 'figure'),
    [Input('variables', 'value')])

def update_graph(variable_name):
    fig=px.line(x=df_vals['corn']['time'], y=df_vals['corn'][variable_name])
    return fig

app.run_server(mode='inline')

This makes a plot with the correct dropdown options, but there is no data being plotted. What am I doing wrong here? Trying to follow a tutorial on the Dash website, but appear to be tripping up something.

Answer 1

You definitely seem to be close to a solution here. Iactually think that you've only forgotten to import plotly.express as px. I took the time to make a proper data sample out of the data you provided in the question. And without any information of your imports I just had to go for my standard plotly and JupyteDash imports. Anyway, the snippet below will produce the following plot. And please take a look at how I've set up your dataframe. You can learn to make the same setup if you invest the few minutes it takes to read this post.

Dash App - Plot 1

Dropdown selection = '2m_temp_prod'

Dash App - Plot 2

**Dropdown selection = 'total_precip_prod''

Complete code

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, ClientsideFunction
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output
import numpy as np
from plotly.subplots import make_subplots
import plotly.express as px

df=pd.DataFrame({'time':{0:'2020-09-1900:00:00',
                        1:'2020-09-1906:00:00',
                        2:'2020-09-1912:00:00',
                        3:'2020-09-1918:00:00',
                        4:'2020-09-2000:00:00',
                        5:'2020-10-0300:00:00',
                        6:'2020-10-0306:00:00',
                        7:'2020-10-0312:00:00',
                        8:'2020-10-0318:00:00',
                        60:'2020-10-0400:00:00'},
                        '2m_temp_prod':{0:299.346777,
                        1:294.039512,
                        2:292.95927400000005,
                        3:301.318046,
                        4:300.623567,
                        5:301.177141,
                        6:295.874298,
                        7:293.838787,
                        8:302.384474,
                        60:300.920766},
                        '2m_temp_area':{0:299.799234,
                        1:294.443352,
                        2:293.182931,
                        3:301.767516,
                        4:300.97965,
                        5:301.052273,
                        6:295.720135,
                        7:293.686738,
                        8:302.191334,
                        60:300.817993},
                        'total_precip_prod':{0:0.0,
                        1:0.19107000000000002,
                        2:0.15576500000000001,
                        3:0.42176800000000003,
                        4:0.363572,
                        5:0.371209,
                        6:0.28179299999999996,
                        7:0.5868869999999999,
                        8:0.492712,
                        60:0.522374},
                        'total_precip_area':{0:0.0,
                        1:0.286952,
                        2:0.216606,
                        3:0.485691,
                        4:0.501164,
                        5:0.408515,
                        6:0.300564,
                        7:0.549365,
                        8:0.49379799999999996,
                        60:0.531138}})

df_vals = {'corn':df}

app = JupyterDash(__name__)
cols=df_vals['corn'].columns[1:]

app.layout = html.Div([
    html.Div([

        html.Div([
            dcc.Dropdown(
                id='variables',
                options=[{'label': i, 'value': i} for i in cols],
                value='2m_temp_prod'
            )
        ]),
    dcc.Graph(id='plot')])
])

@app.callback(
    Output('plot', 'figure'),
    [Input('variables', 'value')])

def update_graph(variable_name):
    fig=px.line(x=df_vals['corn']['time'], y=df_vals['corn'][variable_name])
    fig.update_layout(template='plotly_dark')
    return fig

app.run_server(mode='inline', debug=True)