Dcc.slider min/ max not updating with dropdown - Help pls!

@msuths1 wrote:

Hi,
I have been working on this problem for a while now. Essentially my code uploads a data set and they can choose certain dropdowns to populate a graph. I have now added a range slider to adjust the range of the colour bar - (which allows the user to remove outliers in their color scale). The range slider works fine HOWEVER it is using a range of [0,100] which is the default I am assuming? It does not pick up the ‘max’ and ‘min’ of the range slider that I have put in my code. I have printed these to double-check these values and they do provide the min and max of the selected drop-down component however these values do not correspond to the range slider. I am unsure about how to fix this and would, therefore, welcome any help if available. My code and respective data set is below:
Thank you
Best
Tilly

import base64
import io
from flask import Flask
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import plotly_express as px
import pandas as pd

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

app.layout = html.Div([dcc.Upload(
    id='data-table-upload',
    children=html.Div([html.Button('Upload File')],
                      style={'width': '49%', 'height': "60px", 'borderWidth': '1px',
                             'borderRadius': '5px',
                             'textAlign': 'center',

                             }),
    multiple=False
),
    html.Div([html.Div([html.Div([dcc.Graph(id='my-3D-graph', animate=False)], style={'display': 'inline-block',
                                                                                      'width': '74%',
                                                                                      }),
                        html.Div([
                            html.Div([html.Label(
                                ["Select X variable:",
                                 dcc.Dropdown(
                                     id='xaxis-anim-3D',
                                     multi=False,
                                     placeholder="Select an "
                                                 "option "
                                                 "for X")],
                            )],
                                style={
                                    'padding': 10}),
                            html.Div([html.Label(
                                ["Select Y variable:",
                                 dcc.Dropdown(
                                     id='yaxis-anim-3D',
                                     multi=False,
                                     placeholder='Select an option '
                                                 'for Y')],
                            ), ],
                                style={
                                    'padding': 10}),
                            html.Div([html.Label(
                                ["Select color variable:",
                                 dcc.Dropdown(
                                     id='caxis-anim-3D',
                                     multi=False,
                                     placeholder='Select an option for color')],
                            )], style={
                                'padding': 10}),
                            html.Div([
                                html.Label(["Select color bar "
                                            "range:",
                                            dcc.RangeSlider(
                                                id='colorbar-slider',
                                            ), html.Div(id='slider-output-container')])
                            ], style={'fontSize': 14,
                                      'font-family': 'Arial',
                                      'height': '20%',
                                      'padding': 15,
                                     })
                        ],
                            style={
                                'display': 'inline-block',
                                'width': '25%',
                                'float': 'right',
                                'fontSize': 14,
                                'font-family': 'Arial',
                                'backgroundColor': '#ffffff'})
                        ], className='container',
                       style={'padding': 40,
                              'backgroundColor': '#ffffff'})])
])


def parse_contents(contents, filename):
    content_type, content_string = contents.split(',')
    decoded = base64.b64decode(content_string)
    try:
        if 'csv' in filename:
            # Assume that the user uploaded a CSV file
            df = pd.read_csv(io.StringIO(decoded.decode('utf-8')))
        elif 'xls' in filename:
            # Assume that the user uploaded an excel file
            df = pd.read_excel(io.BytesIO(decoded))
        elif 'txt' or 'tsv' in filename:
            df = pd.read_csv(io.StringIO(decoded.decode('utf-8')), delimiter=r'\s+'
                             )
    except Exception as e:
        print(e)
        return html.Div([
            'There was an error processing this file.'
        ])
    return df


# POPULATE X AXIS DROPDOWN
@app.callback(Output('xaxis-anim-3D', 'options'),
              [Input('data-table-upload', 'contents')],
              [State('data-table-upload', 'filename')])
def populate_xaxis_dropdown_anim(contents, filename):
    df = parse_contents(contents, filename)
    return [{'label': i, 'value': i} for i in df.columns]


# POPULATE Y AXIS DROPDOWN
@app.callback(Output('yaxis-anim-3D', 'options'),
              [Input('data-table-upload', 'contents')],
              [State('data-table-upload', 'filename')])
def populate_yaxis_dropdown_anim(contents, filename):
    df = parse_contents(contents, filename)
    return [{'label': i, 'value': i} for i in df.columns]


# POPULATE C AXIS DROPDOWN
@app.callback(Output('caxis-anim-3D', 'options'),
              [Input('data-table-upload', 'contents')],
              [State('data-table-upload', 'filename')])
def populate_saxis_dropdown_anim(contents, filename):
    df = parse_contents(contents, filename)
    return [{'label': i, 'value': i} for i in df.columns]


# POPULATE COLORBAR SLIDER SCATTER
@app.callback([Output('colorbar-slider', 'min'),
               Output('colorbar-slider', 'max'),
               Output('colorbar-slider', 'step')
               ],
              [Input('data-table-upload', 'contents'),
               Input('caxis-anim-3D', 'value')
               ],
              [State('data-table-upload', 'filename')])
def populate_pressure_slider(contents, color, filename):
    df = parse_contents(contents, filename)
    min = round(int(df[color].min())),
    max = round(int(df[color].max())),
    step = 0.5
    return min, max, step


@app.callback(
    Output('slider-output-container', 'children'),
    [Input('colorbar-slider', 'value')]
)
def update_output(value):
    return 'You have selected "{}"'.format(value)


@app.callback(Output('my-3D-graph', 'figure'),
              [Input('data-table-upload', 'contents'),
               Input('xaxis-anim-3D', 'value'),
               Input('yaxis-anim-3D', 'value'),
               Input('caxis-anim-3D', 'value'),
               Input('colorbar-slider', 'value'),
                ],
              [State('data-table-upload', 'filename')]
              )
def update_figure(contents, x, y, color, color_value, filename):
    df = parse_contents(contents, filename)
    color_val_float = []
    for i in range(0, len(color_value), 1):
        color_val_float.append(float(color_value[i]))
    color_val = color_val_float
    print(color_val)
    return px.scatter(df, x=df[x], y=df[y], title="", animation_frame="Pressure",
                      animation_group=df.columns[0],
                      hover_name=df.columns[0],
                      hover_data={}, template="none", color=df[color],
                      color_continuous_scale='Viridis', range_color=color_val
                      ).update_xaxes(showgrid=False, title=x, autorange=True, ticks='outside',
                                     showline=True, showspikes=True, spikethickness=1, spikedash='solid',
                                     mirror=True, tickformat=".1f").update_yaxes(spikedash='solid',
                                                                                 showgrid=False,
                                                                                 title=dict(text=y,
                                                                                            standoff=5),
                                                                                 autorange=True, ticks='outside',
                                                                                 showspikes=True, spikethickness=1,
                                                                                 showline=True, mirror=True,
                                                                                 tickformat=".1f").update_layout(
        clickmode='event+select', hovermode='closest', margin={'l': 80}, autosize=True, font=dict(family='Helvetica',
                                                                                                  ),
        coloraxis_colorbar=dict(title=dict(text=color, side='right'), ypad=0),
    ).update_traces(marker=dict(size=10,
                                opacity=0.7,
                                showscale=False,
                                line=dict(width=0.7, color='DarkSlateGrey'),

                                colorscale="Viridis"))


if __name__ == '__main__':
    app.run_server()

DATASET USED:

Thank you!

Posts: 5

Participants: 2

Read full topic