(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)

1 post - 1 participant

Read full topic

Hi everyone.

I am new to dash and i created a simple dash app to run. I wanted to add a chatbot to the dash app so i created a bot using ibm watson. Now, i need to intergarte this to dash, how can i do this? I was given the following script to embed into my code

<script>
  window.watsonAssistantChatOptions = {
      integrationID: "c31f0ef4.....", 
      region: "eu-gb", 
      serviceInstanceID: "567bedbe....", 
      onLoad: function(instance) { instance.render(); }
    };
    
    setTimeout(function(){
    const t=document.createElement('script');
    t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
    document.head.appendChild(t);
  });
</script>

Here’s is my app code

# app info
app = dash.Dash()

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

# data and basic figure
x = np.arange(20)+10

fig = go.Figure(data=go.Scatter(x=x, y=x**2, mode = 'lines+markers'))
fig.add_traces(go.Scatter(x=x, y=x**2.2, mode = 'lines+markers'))

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig,
    ),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
              Click on points in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre']),
        ], className='three columns'),
    ])
])


@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    return json.dumps(hoverData, indent=2)

app.run_server(port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)

I want to add a chat button at the top which will call on the script and enable the bot.

1 post - 1 participant

Read full topic

Hi friends!

It appears that lengthy dictionaries work with pattern-matching ids and callbacks. If I continue developing with lengthy dictionaries, I am going to encounter problems?

For example:
dcc.Input(id={‘type’:‘userdata-input’, ‘attr’:‘family-member’,‘index’:0},…)

That’s a made-up example, but demonstrates what I’m currently using.

Thanks in advance for any tips!

1 post - 1 participant

Read full topic

The callback is working.

I tried:

app.config['suppress_callback_exceptions'] = True

if __name__=="__main__":
    app.run_server(debug=True, port=8080, dev_tools_ui=False, dev_tools_props_check=False)

2 posts - 1 participant

Read full topic

Hello everyone! I’m currently using JupyterDash within a Jupyter notebook. My current issue is that I’m having a hard time incorporating a functioning Plot.ly go.FigureWidget with my Dash dashboard.

Information about go.FigureWidget

• Within this notebook, I have a go.FigureWidget plot with two scatter plots
• This go.FigureWidget is updated every minute within a separate cell
• These updates successfully display within the cell containing the code below

fig = go.FigureWidget(layout=go.Layout(title=go.layout.Title(text="Live BTC"),
                                      )
                     )
fig.add_scatter(name='actual')
fig.add_scatter(name='prediction')

Information about the Dash Dashboard

• My goal is to incorporate the above go.FigureWidget within a Dash dashboard
• I was able to display the graph with an external dashboard, but I had to physically refresh the page to get the updates
• As a result, I decided to implement dcc.Interval so that the dashboard would update on its own
• However, I’m unable to benefit from the dcc.Interval because I’m having issues with @app.callback
• As soon as I uncomment the @app.callback lines, I get “SyntaxError: invalid syntax”

# Build App
app = JupyterDash(__name__)
app.layout = html.Div([
    html.H1("My dashboard", style= {'text-align':'center', 'font-family':'Viga'}),
    
    #Side-by-Side graphs
    html.Div(children = [
        dcc.Graph(id='g1', figure={'data': [{'y': [1, 2, 3]}]}, style={'display': 'inline-block'}),
        dcc.Graph(id='g2', figure={'data': [{'y': [1, 2, 3]}]}, style={'display': 'inline-block'})
    ]),
    
    #Live BTC
    dcc.Graph(figure=fig, id='live-update-graph'),
    dcc.Interval(
        id = 'interval-component',
        interval = 1 * 1000, #Update graph every second (in milliseconds) 
        n_intervals = 0
    )
], style={'textAlign': 'center'})


# Define callback to update graph
@app.callback(
    Output('live-update-graph', 'figure'),
    [Input('interval-component', 'n_intervals')]
)

# Run app and display result external in the notebook
app.run_server(mode='external')

Does anyone know why this is? The only explanation I can think of is that my @app.callback has errors but I got it directly from an example

2 posts - 2 participants

Read full topic

I am using this: Dash callback in a separate file
to register callback in separate files and this: https://dash.plotly.com/urls for a multipage app.
The layout below is in my app.py

fixed_content = html.Div([
    html.Div(
        "Write intro here", id="intro"
    ),
    html.Div(
        html.P("by Faith and Nicholas")
    )
])

content = html.Div([
    html.Div(
        id="fixed-content", style=CONTENT_STYLE
    ),
    html.Div(id="page-content", style=CONTENT_STYLE)
])

app.layout=html.Div([dcc.Location(id="url"), sidebar, content])

so content always has a fixed layout on top and depending on the URL, a switchable portion on the bottom.
It seems to work.

image711×1366 112 KB

But I’m getting “id not found in layout” for so many elements:

image716×1327 116 KB

I have 3 other files for page-content
‘intro_layout.py’, ‘main_layout.py’, ‘plots_layout.py’

What is wrong with this setup?

2 posts - 1 participant

Read full topic

Hi everyone,

In my app, I use a Daq Knob as a selector for a minimum value.
I have a dataframe df with a column “Values”. Here is how I define the knob :

min_value = df["Values"].min()
max_value = df["Values"].max()
init_value = df["Values"][max(0, int(2*len(df)/3))]  # I want the initial position at 2/3rd of available value. df is ordered by "Values" btw

selector = daq.Knob(id="selector", label = "Select a minimum value", min = min_value, max = max_value, value = init_value)

And below the knob, there is a card displaying how many elements of df have “Values” over what’s selected with the knob :

display_card = dbc.Card([dbc.CardBody(id="display_card")])

To display my information in the knob, I use the following callback :

@app.callback(Output(component_id="display_card", component_property="children"),
              Input(component_id ="selector", component_property="value"))  
def my_callback(knob_value):
    print("In the callback!!!") # for demonstration purpose
    n_items = len(df[df["Values"] >= knob_value])
    return_txt = "{} elements were selected".format(n_items)
    return html.Div(return_txt)

Now, execution of the callback is not very time consuming. But when I try to select a new value, the callback seems to be fired on every increment of the knob, and I get a multitude of “In the callback!!!” messages. And that’s taking a painfully long time.

knob_callback356×529 4.58 KB

So my question is : How would you go to only fire the callback once the mouse is released on the final knob value?

Many thanks in advance if you can help me

1 post - 1 participant

Read full topic

Dashtable775×399 15.6 KB

1 post - 1 participant

Read full topic

Here is a simple function to convert an HTML string to Dash dash_html_components components.
Can be useful to convert existing pages/layout to Dash.

def convert_html_to_dash(html_code):
    """Convert standard html to Dash components"""
    from xml.etree import ElementTree
    import dash_html_components as html

    def parse_css(css):
        """Convert a style in ccs format to dictionary accepted by Dash"""
        return {k: v for style in css.strip(";").split(";") for k, v in [style.split(":")]}

    def _convert(elem):
        comp = getattr(html, elem.tag.capitalize())
        children = [_convert(child) for child in elem]
        if not children:
            children = elem.text
        attribs = elem.attrib.copy()
        if "class" in attribs:
            attribs["className"] = attribs.pop("class")
        attribs = {k: (parse_css(v) if k == "style" else v) for k, v in attribs.items()}

        return comp(children=children, **attribs)

    et = ElementTree.fromstring(html_code)

    return _convert(et)

2 posts - 2 participants

Read full topic

When i spin up my dashboard, initially i will be thrown an “ValueError: Invalid value”, and only 1 of my 4 graphs will show. which one shows, is random for each time i run the dashboard.

However, if i change the “area-radio” button to another value and then change it back to the initial one (the exact same one as when i spin up the dashboard…) everything works fine.

Each callback works without any errors if i comment out the remaining ones (ie. test them out one at a time). But if they are there simultaniously i get an error as mentioned on startup.

The dashboard is fed a df on creation.

Has anyone experience anything similar, and how did you go about fixing it?

any help will be much appreciated!

layout

  return html.Div([
            dcc.RadioItems(
                id="area-radio",
                options=[
                    {"label": "Områder i produktion", "value": "oip"},
                    {"label": "Alle områder", "value": "ao"},
                ],
                value="oip",
                labelStyle={"display": "inline-block"},
            ),

   html.Div(
                [
                    dcc.DatePickerRange(
                        id="my-date-picker-range",  # ID to be used for callback
                        calendar_orientation="horizontal",  # vertical or horizontal
                        day_size=39,  # size of calendar image. Default is 39
                        end_date_placeholder_text="Return",  # text that appears when no end date chosen
                        with_portal=False,  # if True calendar will open in a full screen overlay portal
                        first_day_of_week=0,  # Display of calendar when open (0 = Sunday)
                        reopen_calendar_on_clear=True,
                        is_RTL=False,  # True or False for direction of calendar
                        clearable=True,  # whether or not the user can clear the dropdown
                        number_of_months_shown=1,  # number of months shown when calendar is open
                        min_date_allowed=df.ml_log_date.astype("datetime64[ns]").min().date() - timedelta(days=1),  # minimum date allowed on the DatePickerRange component
                        max_date_allowed=df.ml_log_date.astype("datetime64[ns]").max().date() + timedelta(days=1),  # maximum date allowed on the DatePickerRange component
                        initial_visible_month=df.ml_log_date.astype("datetime64[ns]").max().date(),  # the month initially presented when the user opens the calendar
                        start_date=df.ml_log_date.astype("datetime64[ns]").min().date(),
                        end_date=df.ml_log_date.astype("datetime64[ns]").max().date(),
                        display_format="D-M-Y",  # how selected dates are displayed in the DatePickerRange component.
                        month_format="MMMM, YYYY",  # how calendar headers are displayed when the calendar is opened.
                        minimum_nights=1,  # minimum number of days between start and end date
                        persistence=True,
                        persisted_props=["start_date"],
                        persistence_type="session",  # session, local, or memory. Default is 'local'
                        updatemode="singledate",  # singledate or bothdates. Determines when callback is triggered
                    ),
                   dcc.RadioItems(
                        id="timeperiod-radio",
                        options=[
                            {"label": "uge", "value": "uge"},
                            {"label": "dag", "value": "dag"},
                        ],
                        value="dag",
                        labelStyle={"display": "inline-block"},
                    ),
                    dcc.Graph(id="timeseries_predicted_count"),
                    html.Br(),
                    dcc.Graph(id="timeseries_change_share"),
                    html.Br(),
                    dcc.Graph(id="timeseries_predicted_timediff"),
                    html.Br(),
                    dcc.Graph(id="timeseries_blanks_selected"),
                ]
            ),
        ]
)

Callbacks

 @dash_app.callback(
        Output("timeseries_predicted_count", "figure"),
        [
            Input("my-date-picker-range", "start_date"),
            Input("my-date-picker-range", "end_date"),
            Input("area-radio", "value"),
            Input("timeperiod-radio", "value"),
        ],
    )
    def handled_pr_area(
        start_date, end_date, data_filter_value, date_filter_value
    ):
        if check_pickle():
            dff = prepare_pickle_df(df, start_date, end_date)
        if data_filter_value == "oip":
            dff = dff.loc[dff.ml_prediction != "empty_list"]
        else:
            dff = df.copy()
        periode = toggle_week_day(date_filter_value)
        dff = dff.groupby([periode, "Område"]).sum()
        dff.reset_index(inplace=True)
        dff_pivot = (
            dff.loc[:, [periode, "Område", "count"]]
            .pivot_table(
                index=periode, columns="Område", values=["count"], fill_value=0
            )
            .reset_index()
        ).round(1)
        dff_pivot.columns = [periode] + list(dff.Område.unique())
        print(dff_pivot.dtypes, dff_pivot)
        fig = px.line(
            dff_pivot,
            x=periode,
            y=dff_pivot.columns,
            labels=dict(value="antal", variable="område", date="tid", week_year="tid"),
            title="Håndterede emails",
        )
        fig.update_xaxes(dtick="D1", tickformat="%Y-%d-%m")

        return fig

    @dash_app.callback(
        Output("timeseries_change_share", "figure"),
        [
            Input("my-date-picker-range", "start_date"),
            Input("my-date-picker-range", "end_date"),
            Input("area-radio", "value"),
            Input("timeperiod-radio", "value"),
        ],
    )
    def handled_pr_area_change(
        start_date, end_date, data_filter_value, date_filter_value
    ):
        if check_pickle():
            dff = prepare_pickle_df(df, start_date, end_date)
        if data_filter_value == "oip":
            dff = dff.loc[dff.ml_prediction != "empty_list"]
        else:
            dff = df.copy()
        periode = toggle_week_day(date_filter_value)
        dff = dff.groupby([periode, "Område"]).sum()
        dff["andel"] = dff["Antal ændrede Email templates"] / dff["count"] * 100
        dff.reset_index(inplace=True)
        dff_pivot = (
            dff.loc[:, [periode, "Område", "andel"]]
            .pivot_table(
                index=periode, columns="Område", values=["andel"], fill_value=0
            )
            .reset_index()
        ).round(1)
        dff_pivot.columns = [periode] + list(dff.Område.unique())
        print(dff_pivot.dtypes, dff_pivot)
        fig = px.line(
            dff_pivot,
            x=periode,
            y=dff_pivot.columns,
            labels=dict(value="%", variable="område", date="tid", week_year="tid"),
            title="Email templates der er blevet ændret - andel",
        )
        fig.update_xaxes(dtick="D1", tickformat="%Y-%d-%m")

        return fig

    @dash_app.callback(
        Output("timeseries_predicted_timediff", "figure"),
        [
            Input("my-date-picker-range", "start_date"),
            Input("my-date-picker-range", "end_date"),
            Input("area-radio", "value"),
            Input("timeperiod-radio", "value"),
        ],
    )
    def time_avg_pr_area(
        start_date, end_date, data_filter_value, date_filter_value
    ):
        if check_pickle():
            dff = prepare_pickle_df(df, start_date, end_date)
        if data_filter_value == "oip":
            dff = dff.loc[dff.ml_prediction != "empty_list"]
        else:
            dff = df.copy()
        periode = toggle_week_day(date_filter_value)
        dff = dff.groupby([periode, "Område"]).mean().reset_index()
        dff_pivot = pd.pivot_table(
            dff,
            index=periode,
            columns="Område",
            values=["timediff_seconds"],
            fill_value=0,
        ).reset_index().round(1)
        dff_pivot.columns = [periode] + list(dff.Område.unique())
        print(dff_pivot.dtypes, dff_pivot)
        fig = px.line(
            dff_pivot,
            x=periode,
            y=dff_pivot.columns,
            labels=dict(
                value="sekunder", variable="område", date="tid", week_year="tid"
            ),
            title="Email håndtering - sekunder",
        )
        fig.update_xaxes(dtick="D1", tickformat="%Y-%d-%m")

        return fig

    @dash_app.callback(
        Output("timeseries_blanks_selected", "figure"),
        [
            Input("my-date-picker-range", "start_date"),
            Input("my-date-picker-range", "end_date"),
            Input("area-radio", "value"),
            Input("timeperiod-radio", "value"),
        ],
    )
    def blank_selected_pr_area_share(
        start_date, end_date, data_filter_value, date_filter_value
    ):
        if check_pickle():
            dff = prepare_pickle_df(df, start_date, end_date)
        if data_filter_value == "oip":
            dff = dff.loc[dff.ml_prediction != "empty_list"]
        else:
            dff = df.copy()
        periode = toggle_week_day(date_filter_value)
        dff_tom = dff.loc[dff.selectedTemplate == "tom"]
        dff_tom = dff_tom.groupby([periode, "Område"]).sum()
        dff_tom.reset_index(inplace=True)
        dff_pivot_tom = dff_tom.loc[:, [periode, "Område", "count"]].pivot_table(
            index=periode, columns="Område", values=["count"], fill_value=0
        )
        dff_alle = dff.copy()
        dff_alle = dff_alle.groupby([periode, "Område"]).sum()
        dff_alle.reset_index(inplace=True)
        dff_pivot_alle = dff_alle.loc[:, [periode, "Område", "count"]].pivot_table(
            index=periode, columns="Område", values=["count"], fill_value=0
        )
        dff_kombineret = ((dff_pivot_tom / dff_pivot_alle) * 100).fillna(0)
        dff_kombineret = dff_kombineret.reset_index().round(1)
        dff_kombineret.columns = [periode] + list(
            dff_alle.Område.sort_values().unique()
        )
        print(dff_kombineret.dtypes, dff_kombineret)
        fig = px.line(
            dff_kombineret,
            x=periode,
            y=dff_kombineret.columns,
            labels=dict(value="%", variable="område", date="tid", week_year="tid"),
            title="Blanke templates - andel",
        )

        fig.update_xaxes(dtick="D1", tickformat="%Y-%d-%m")

        return fig

2 posts - 2 participants

Read full topic

He guys,
I´m using scattermapbox for plotting maps. Is there a way to get the scroll zoom (by the mouse) value?

For example, every time the use use the scroll mouse to change the zoom, I can see the zoom value on the console.

thanks always for all the help.

4 posts - 3 participants

Read full topic

Hi,

I want to use backend filtering with pandas and derived_filter_query_structure ( https://dash.plotly.com/datatable/filtering ). A user is filtering the desired row in the dataframe and then I would like to further process the data provided in the link. But how do I access the filtered data/ the row the user just filtered out?

Many thanks in advance for your help and support!

1 post - 1 participant

Read full topic

Greetings, I have a dropdown input that fires off from a click of a button. I don’t want people to enter not more than 4 values. So I made a callback that reads the state of the dropdown input, and determines whether the length of values is >= 4. I want the input to stop working and a warning for users letting them know they have entered the max limit.

For some reason I’ve seen my code work very inconsistent with my syntax. For now consider it not working as intended, atleast my def limit() function part of my callback.

@app.callback(
    dash.dependencies.Output("input-warning", "children"),
    [dash.dependencies.Input("button_c", "n_clicks")],
    [dash.dependencies.State("dynamic-dropdown", "value")],
)
def update_multi_options(n_clicks, value):
    conn.rollback()
    if value is None:
        return PreventUpdate  
    else:
    # Make sure that the set values are in the option list, else they will disappear
    # from the shown select list, but still part of the `value`.
        return [
            o for o in OPTIONS if value.upper() in o["label"].upper() or o["value"] in (value or [])
        ]

@app.callback(
    [dash.dependencies.Output("input-warning","children"),
    dash.dependencies.Output("dynamic-dropdown", "options")],
    [dash.dependencies.Input("dynamic-dropdown", "value")]
    )
def limit(value):
    if value is None:
        return PreventUpdate
    elif len(value) >=4:
        children = html.P("limit reached",id='input-warning')
        return [children,[option for option in OPTIONS if option['value'] in value]] 

How can I solve for this?

1 post - 1 participant

Read full topic

I created a callback to update Gauges and indicators on this layout with the idea of updating the max or the gauges according to parameters that are saved in a JSON file. The callback runs fine until the return line where the output values are updated. at that point the page becomes unresponsive in the web browser. What could I be doing wrong here?

Here’s the layout and callback:

********Live data Layout
“”"
LiveDataLayout = html.Div([
html.Div([
html.H1(
children=‘KUKA Leak Test System’,
id=‘title’
),
], style={‘color’:‘orange’,‘display’: ‘block’}
),

        html.Div(
            id='leftContent',
            children=[
                dcc.Link('Parameter Screen', href='/parameters'),
                html.Br(),
                dcc.Link('Calibrate Supply Pressure', href='/calSP'),
                html.Br(),
                dcc.Link('Calibrate Back Pressure', href='/calBP'),
                html.Br(),
                dcc.Link('Test Results', href='/TestResults'),
                html.Br(),
                dcc.Link('Back to Live Data Screen', href='/LiveData'),
            ], style={'width': 220, 'box-sizing': 'border-box', 'padding': 10,
                    'position': 'absolute', 'top': 60, 'left': 15,'background-color':'white','border-style': 'solid', 'border-color': 'light grey','border-radius':'5%'}
        ),
        html.Div(
            id='gauge1field',
            children=[

                daq.Gauge(
                    id='SuppPressureGauge',
                    label={'label': 'Supply Pressure', 'style':{'font-size': 'x-large'}},
                    showCurrentValue=1,
                    value=90.000,#replace with Supply Pressure varable
                    color="#00FF00",
                    size=200,
                    max=100,#replace 1000 with max Supply Pressure varable * 1.1
                    style={'float': 'left', 'display': 'block'}
                    )
            ], style={'width': 262, 'box-sizing': 'border-box',
                    'position': 'absolute', 'top': 60, 'left': 330, 'padding-left': 10,'color': 'lightgray','background-color': 'black',
                    'border-style': 'solid', 'border-color': 'grey', 'border-radius':'10%','display':'block'}
        ),
        html.Div(
            id='gauge2field',
            children=[

                daq.Gauge(
                    id='testPressureGauge',
                    label={'label': 'Test Pressure', 'style':{'font-size': 'x-large'}},
                    showCurrentValue=1,
                    value=95.000,#replace 0 with Test Pressure varable
                    color="#00FF00",
                    size=200,
                    max=100,#replace 1000 with max Test Pressure varable * 1.1
                    style={'float': 'left', 'display': 'block'}
                    )
            ], style={'width': 262, 'box-sizing': 'border-box',
                    'position': 'absolute', 'top': 60, 'left': 602, 'padding-left': 10,'color': 'lightgray','background-color': 'black',
                    'border-style': 'solid', 'border-color': 'grey', 'border-radius':'10%','display':'block'}
        ),
        html.Div(
            id='gauge3field',
            children=[
                daq.Gauge(
                    id='flowGauge',
                    label={'label':'Leak Flow','style':{'font-size': 'x-large'}},
                    showCurrentValue=1,
                    value=6,
                    size=200,
                    max=leakRateMax,#replace 1000 with max Leak Rate varable * 1.1
                    color="#00FF00",
                    style={'float': 'left', 'display': 'block'}
                    )
            ], style={'width': 262, 'box-sizing': 'border-box',
                    'position': 'absolute', 'top': 60, 'left': 874, 'padding-left': 10,'color': 'lightgray','background-color': 'black',
                    'border-style': 'solid', 'border-color': 'grey', 'border-radius':'10%','display':'block'}
        ),
            html.Div(
                id='indicatorfield',
                children=[
                
                
                daq.Indicator(
                    id='TestValveIndicator',
                    label={'label':'Test Valve Open','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
                    width=30,
                    color="#fb6060",
                    labelPosition='right',
                    value=False
                ),
            html.Br(),
                daq.Indicator(
                    id='BypassValveIndicator',
                    label={'label':'Bypass Valve Closed','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
                    width=30,
                    color="#fb6060",
                    labelPosition='right',
                    value=True
                ),
            html.Br(),
                daq.Indicator(
                    id='VentValveIndicator',
                    label={'label':'Vent Valve Open','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
                    width=30,
                    color="#fb6060",
                    labelPosition='right',
                    value=False
                    #style={'border': '5px solid red','width': 30}
                ),
            html.Br(),    
                
                ], style={'width': 262, 'box-sizing': 'border-box',
                    'position': 'absolute', 'top': 385, 'left': 330, 'padding-left': 10,'color': 'lightgray','background-color': 'black',
                    'border-style': 'solid', 'border-color': 'grey', 'border-radius':'10%','display':'block'}
                
        ),
        
        html.Div(
            id='spacer',
            children=[
            html.Br(),
            ],
            style={'width': 30, 'box-sizing': 'border-box',
                    'float': 'left', 'padding-left': 30,'display':'block'},
            ),
        
        html.Div(
            id='togglefield',
            children=[
            
                daq.ToggleSwitch(
                    id='TestValveToggle',
                    label={'label':'Open Test Valve','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
                    color='grey',
                    labelPosition='right',
                    value=False
                ),
            html.Div(id='TestValveToggle-output'),
            html.Br(),
                daq.ToggleSwitch(
                    id='BypassValveToggle',
                    label={'label':'Close Bypass Valve','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
                    color='grey',
                    labelPosition='right',
                    value=False
                ),
            html.Div(id='BypassValveToggle-output'),
            html.Br(),
                daq.ToggleSwitch(
                    id='VentValveToggle',
                    label={'label':'Open Vent Valve','style':{'text-align': 'center','font-size': 'x-large', 'width': 130}},
                    color='grey',
                    labelPosition='right',
                    value=False
                ),
            html.Br(),
            html.Div(id='VentValveToggle-output'),
            
            ], style={'width': 262, 'box-sizing': 'border-box',
                    'position': 'absolute', 'top': 385, 'left': 602, 'padding-left': 10,'color': 'lightgray','background-color': 'black',
                    'border-style': 'solid', 'border-color': 'grey', 'border-radius':'10%','display':'block'}#document.getElementById("element").style.display = "block"; change to 'none' to hide
        ),
          html.Br(),
                
                

                
        dcc.Interval(
            id='liveUpdateTimer',
            interval=5500,  # in milliseconds
            n_intervals=0,
        )      
    ])

“”"

Update the live data when liveUpdateTimer n_intervals ticks
by running the update_live() function.

“”"

@app.callback(
[Output(‘TestValveIndicator’, ‘value’),
Output(‘BypassValveIndicator’, ‘value’),
Output(‘VentValveIndicator’, ‘value’),
Output(‘SuppPressureGauge’,‘value’),
Output(‘testPressureGauge’,‘value’),
Output(‘flowGauge’, ‘value’),
Output(‘SuppPressureGauge’,‘max’),
Output(‘testPressureGauge’,‘max’),
Output(‘flowGauge’, ‘max’)],
[Input(‘liveUpdateTimer’, ‘n_intervals’),
Input(‘TestValveToggle’, ‘value’),
Input(‘BypassValveToggle’, ‘value’),
Input(‘VentValveToggle’, ‘value’)],
[State(‘sWS_ParamConfig’, ‘children’)],
prevent_initial_call = True
)
def update_live(app_intervals,TVtog, BVtog, VVtog, config):

sWS_ParamConfig = json.loads(config)
print(sWS_ParamConfig)

SupPres = float(sWS_ParamConfig['supplyPressure']['lowerLimit']),
TestPres = float(sWS_ParamConfig['supplyPressure']['upperLimit']),
flo = float(sWS_ParamConfig['leakRate']['lowerLimit']),
SupPresMax = float(sWS_ParamConfig['supplyPressure']['upperLimit']),
TestPresMax = float(sWS_ParamConfig['leakRate']['upperLimit']),
floMax = float(sWS_ParamConfig['leakRate']['upperLimit']), 
print(floMax)    
return TVtog, BVtog, VVtog, SupPres, TestPres, flo, SupPresMax, TestPresMax, floMax

1 post - 1 participant

Read full topic

Hi, I have two tables side by side that I would like to synchronise the vertical scroll bars, has anyone been able to do this / have any ideas how to implement it?

1 post - 1 participant

Read full topic

I have created a datatable and placed it inside a div that is colored and shadowed. However the DataTable expands beyond the width of the div by a few pixels horizontally:

Screen Shot 2020-11-19 at 7.50.35 PM2470×796 169 KB

you can see the html table on the left fits nicely assigning style={‘width’: ‘100%’} but making the same assignment within the DataTables css hash or defining margin and padding seem to reduce the size appropriately.

How do I get a dt.DataTable to correctly fit inside a html.Div widthwise?

4 posts - 1 participant

Read full topic

I have created a data table with numerical values. However I need to format the values to .2d and add textual characters like +, -, %. Doing so converts them to strings and then they are sorted as strings instead of numbers and come out in incorrect order (1, 100, 15, 2).

Is there any way to either load numbers and format within the Datatable to sort properly or to get the Datatable to perform numeric based sorting on the strings?

2 posts - 1 participant

Read full topic

I have created a DataTable and want to set the background color of a column by a simple
equation that sets the index of a list of colors I have defined. Something like:

           style_cell_conditional=[
                   'if': {
                       'column_id': 'myCol',
                   },
                   'backgroundColor': my_color[int(my_color_formula(cell_value))],
               },

Is this possible?

The Highlighting cells by value with a colorscale like a heatmap example seems absolutely bonkers to accomplish this.

If this is not available, please make it a high priority as this seems like the most intuitive way to set variable colors versus everything being conditionalized to fixed values. Conditionals are great if you have 2-5 colors, but not if you have 255.

1 post - 1 participant

Read full topic

is there any way to create one simple title row to a DataTable above the column headers? The Multi-Headers example seems convoluted and I don’t need multi, just a simple title.

1 post - 1 participant

Read full topic

In a normal table it is easy to put an html.A() inside an html.Td(). Can this be done within a DataTable?

1 post - 1 participant

Read full topic