let's say I have a dashboard that contains many information and plots.
I have a dropdown list that generates Plots and another dropdown list named Wells.
I have a plot that I created with dash and it works very fine but with a fixed input!
and also dash plots this plot at starting the page :( !
My question is how to prevent dash to plot directly and execute after I press a button that takes the selected item from the Wells list and callback the function and replots.
so this is my HTML page :
<div class="col-md-3" >
<select class="custom-select mb-4" name="Wells" hx-get="{% url 'addplotly' %}" hx-trigger="change" hx-target="#plotly_production" hx-include="[name='Toggle']">
<option selected>Select Well</option>
{% for well in TFTWells %}
<option value="{{well.WellID}}">{{well.WellID}}</option>
{% endfor %}
</select>
</div>
and this is my dash script:
app = DjangoDash('Pressure_guage', external_stylesheets=external_stylesheets)
app.layout = html.Div(
id="dark-light-theme",
children=[
html.Div([html.H3("Pressure Control", style={"textAlign": "center"}),], className="row"),
html.Div([
html.Div(
daq.Gauge(
#size=150,
color={"gradient":True,"ranges":{"green":[0,the_maxCSG/3],"yellow":[the_maxCSG/3,the_maxCSG*6/7],"red":[the_maxCSG*6/7,the_maxCSG]}},
id="my-daq-gauge1", min=0, max=the_maxCSG, value=PRES_CSG, label="CSG "+str(PRES_CSG)+" bar",style={'display': 'inline-block'}
),
className="three columns",
),
html.Div(
daq.Gauge(
#size=150,
color={"gradient":True,"ranges":{"green":[0,the_max/3],"yellow":[the_max/3,the_max*6/7],"red":[the_max*6/7,the_max]}},
id="my-daq-gauge2", min=0, max=the_max, value=PRES_TBG, label="TBG "+str(PRES_TBG)+" bar",style={'display': 'inline-block'}
),
className="three columns",
),
html.Div(
daq.Gauge(
#size=150,
color={"gradient":True,"ranges":{"green":[0,the_maxAVD/3],"yellow":[the_maxAVD/3,the_maxAVD*6/7],"red":[the_maxAVD*6/7,the_maxAVD]}},
id="my-daq-gauge3", min=0, max=the_maxAVD, value=PRES_AVD, label="AVD",style={'display': 'inline-block'}
),
className="three columns",
),
html.Div(
daq.Gauge(
color={"gradient":True,"ranges":{"green":[0,the_maxGL/3],"yellow":[the_maxGL/3,the_maxGL*6/7],"red":[the_maxGL*6/7,the_maxGL]}},
id="my-daq-gauge4", min=0, max=the_maxGL, value=RESEAU_GL, label="GL",style={'display': 'inline-block'}
),
className="three columns",
),
],
className="row",
),
],
)
So how I could do this using a button and callback that takes the well name?