Dash Daq Gauge with Dropdown

Dash Python
#1

Hi everyone,
I’m looking for some help with figuring out how to connect my dropdown selector to my dash daq.Gauge.

This is my code so far but I am struggling with how to connect them.
Any help is greatly appreciated. Thank you!

gdf = df[df['customer'] == df['customer']]['annual_utility_per_sqft'].mean()

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

mygauge = daq.Gauge(
    id='mygauge',
    color = {"gradient": True, "ranges": {"green": [0, 2], "yellow": [2, 3.5], "red": [3.5, 5]}},
    label = "Default",
    value = gdf,
    min = 0, max = 5)

card_main = dbc.Card(
    [
        html.Div(id="carousel"),
        dbc.CardBody(
            [
                html.P(
                    "Select which client you wish to view data for:",
                    className="card-text", style={'height': '30%', 'width': '70%', "color": "white", }
                ),
                dcc.Dropdown(id='user_choice',
                             options=[{'label': customer, "value": customer}
                                      for customer in
                                      dff["customer"].unique()
                                      ],
                             value='Client', clearable=False, style={'height': '100%', 'width': '100%',
                                                                              "color": "#2B2B2B"}, ),
            ]
        ),
    ],
    color="	#242424",  # https://bootswatch.com/default/ for more card colors
    inverse=True,  # change color of text (black or white)
    outline=True,  # True = remove the block colors from the background and header
    style={'height': '96%', 'width': '100%'})

app.layout = html.Div([
    dbc.Row([
        dbc.Col(mygauge, width=5),]),
    dbc.Row([
        dbc.Col(
            card_main, width=6)]) ])

@app.callback(Output('mygauge', 'figure'),
              Input('user_choice', 'value'))
def update_output(mygauge):

    return  mygauge
#2

Hi @Rkennedy
Can you share the sample data set with us so we can run your code locally?

One suggestion is to take the dropdown value, filter the dataframe, build the gauge figure, and return it.

@app.callback(Output('mygauge', 'figure'),
              Input('user_choice', 'value')
)
def update_output(customer_selected):
    dff = df[df["customer"]==customer_selected]
    mygauge = daq.Gauge(
    id='mygauge',
    min=dff['OneOftheColumns'].min(),
    max=dff['OneOftheColumns'].max()
    [...]
    )

    return  mygauge
#4

hi @Rkennedy
can you please share your full code, so I can run it locally instead of separate pieces.

Thank you

#5

Hi @adamschroeder so sorry for the delayed response! and sorry for not including the entire code as one.
Here is my entire code and updated sample data.

import dash
from dash.dependencies import Input, Output
from dash import html
from dash import dcc
import dash_daq as daq
# from dash_daq import Gauge
import pandas as pd
import dash_bootstrap_components as dbc

df = pd.read_csv("envision_database_testDEMO.csv")
dff= df

gdf = df[df['customer'] == df['customer']]['annual_utility_per_sqft'].mean()

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

mygauge = daq.Gauge(
    id='gauge1')

card_main = dbc.Card(
    [
        dbc.CardBody(
            [
                html.P(
                    "Select which client you wish to view data for:",
                    className="card-text", style={'height': '30%', 'width': '70%', "color": "white", }
                ),
                dcc.Dropdown(id='user_choice',
                             options=[{'label': customer, "value": customer}
                                      for customer in
                                      dff["customer"].unique()
                                      ],
                             value='Client1', clearable=False, style={'height': '100%', 'width': '100%',
                                                                              "color": "#2B2B2B"}, ),
            ]
        ),
    ],
    color="	#242424",
    inverse=True,
    outline=True,
    style={'height': '96%', 'width': '100%'})

app.layout = html.Div([
    dbc.Row([
        dbc.Col(mygauge, width=5),]),
    dbc.Row([
        dbc.Col(
            card_main, width=6)]) ])

@app.callback(
    Output('gauge1', 'figure'),
    Input('user_choice', 'value')
)
def update_output(user_choice):
    dfff = dff[df["customer"] == user_choice]

    gauge1 = daq.Gauge(
        color={"gradient": True, "ranges": {"green": [0, 0.5], "yellow": [0.5, 1], "red": [1, 1.5]}},
        id='gauge1',
        value=dfff['annual_utility_per_sqft'].mean(),
        label='Default',
        max=1.5,
        min=0
    )
    return gauge1

if __name__ == "__main__":
    app.run_server(port=3440, debug=False)

Thanks again for all your help!

#6

hi @Rkennedy
So, there are a few things going on with the code that need to be modified.

  • the Output of the callback cannot be the figure because daq.Gauge does not have a figure property. Instead, we will build the daq.Gauge in the callback function and return it to the children of an html.Div output.
  • Client1 does not have an average, which is why the Gauge will appear empty. Client3’s average is is above 1.5, which is why you might want to change the max property.
import dash
from dash.dependencies import Input, Output
from dash import html
from dash import dcc
import dash_daq as daq
import pandas as pd
import dash_bootstrap_components as dbc

df = pd.read_csv("https://raw.githubusercontent.com/rkennedy22/DEMODATAEN/main/envision_database_testDEMO.csv")

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

mygauge = html.Div(id='gauge1')

card_main = dbc.Card(
    [
        dbc.CardBody(
            [
                html.P(
                    "Select which client you wish to view data for:",
                    className="card-text", style={'height': '30%', 'width': '70%', "color": "white", }
                ),
                dcc.Dropdown(id='user_choice',
                             options=df["customer"].unique(),
                             value='Client1', clearable=False, style={'height': '100%', 'width': '100%',
                                                                              "color": "#2B2B2B"}),
            ]
        ),
    ],
    color="	#242424",
    inverse=True,
    outline=True,
    style={'height': '96%', 'width': '100%'}
)

app.layout = html.Div([
    dbc.Row([
        dbc.Col(mygauge, width=5)]),
    dbc.Row([
        dbc.Col(
            card_main, width=6)])
])

@app.callback(
    Output('gauge1', 'children'),
    Input('user_choice', 'value')
)
def update_output(user_choice):
    dff = df[df["customer"] == user_choice]
    print(dff.head())
    print(dff['annual_utility_per_sqft'].mean())
    fig1 = daq.Gauge(
        color={"gradient": True, "ranges": {"green": [0, 0.5], "yellow": [0.5, 1], "red": [1, 1.5]}},
        value=dff['annual_utility_per_sqft'].mean(),
        label='Default',
        max=2,
        min=0
    )
    return fig1

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