Last Updated
Viewed 11 Times
        

In the next code ( is an example), callback is called twice in every single event. when you show the slider’s id the last id will be repeated in every short time period. Why? how i can fix it?

CODE:

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div([
        dcc.Slider(
            id='{}'.format(i),
            min=0,
            max=20,
            step=0.5,
            value=10,
        ) for i in range(10)]),
    html.Div(id='slider-output-container')
])

def generate_inputs():
    return  [Input('{}'.format(_),'value') for _ in range(10)]

@app.callback(
    dash.dependencies.Output('slider-output-container', 'children'),
    generate_inputs()
)
def update_output(*values):
    ctx = dash.callback_context
    id = ctx.triggered[0]['prop_id'].split('.')[0]
    print(id)
    return 'You have selected "{}"'.format(values[0])


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

Similar Question 1 : Dash output with multiple inputs

I am trying to have a dash component properly input variables and give appropriate output.

Currently multiple inputs will make the functionality not work.

I've put multi=true for my dcc dropdown - hasn't worked successfully yet.

This is the code I have used.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd

import plotly.graph_objs as go

df = pd.read_excel('FreewayFDSData.xlsx', 'Volume', parse_dates=True, index_col="Time")
df = df.T

Detectors = list(df.columns)

mf = pd.read_excel('FreewayFDSData.xlsx', 'Coordinates')

mapbox_access_token = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'

#  Layouts

layout_map = dict(
    autosize=True,
    height=500,
    font=dict(color="#191A1A"),
    titlefont=dict(color="#191A1A", size='18'),
    margin=dict(
        l=35,
        r=35,
        b=35,
        t=45
    ),
    hovermode="closest",
    plot_bgcolor='#fffcfc',
    paper_bgcolor='#fffcfc',
    legend=dict(font=dict(size=10), orientation='h'),
    title='Freeway detectors',
    mapbox=dict(
        accesstoken=mapbox_access_token,
        style="light",
        center=dict(
            lon=145.061,
            lat=-37.865
        ),
        zoom=12,
    )
)


def generate_table(dataframe, max_rows=10):
    return html.Table(
        # Header
        [html.Tr([html.Th(col) for col in dataframe.columns])] +

        # Body
        [html.Tr([
            html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
        ]) for i in range(min(len(dataframe), max_rows))]

        #Styling

    )


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[

    html.H1(children='Managed Motorway'),

    html.Div([

        html.Div([
            dcc.Dropdown(
                id='xaxis-column',
                options=[{'label': i, 'value': i} for i in Detectors],
                value='Volume per 15 seconds',
                style={"width" : '48%'}
            ),
            dcc.RadioItems(
                id='xaxis-type',
                options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
                value='Linear',
                labelStyle={'display': 'inline-block'}
            )
        ]),
        dcc.Graph(id='indicator-graphic'),
        dcc.Graph(
            id='graph',
            figure={
                'data': [{
                    'lat': mf.Y, 'lon': mf.X, 'type': 'scattermapbox'
                }],
                'layout': layout_map
            }
        )
    ], style={'display': 'block'}),

    html.Div([
    html.H4(children='Example of Freeway FDS Data'),
        html.Div([
        generate_table(df)
    ], style={'overflowX': 'scroll','overflowY': 'scroll', 'width':'48%','height':'300px'})
])
])


@app.callback(
    Output('indicator-graphic', 'figure'),
    [Input('xaxis-column', 'value'),
     Input('xaxis-type', 'value')])

def update_graph(xaxis_column_name, xaxis_type):
    # xaxis column name will assign the x axis data being sought
    return {
        'data': [go.Scatter(
            x=df.index,
            y=df[xaxis_column_name])]
    }


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

This is an example of the data being inputted.

Time    00:00 - 00:15   00:15 - 00:30   00:30 - 00:45   00:45 - 01:00   01:00 - 01:15   01:15 - 01:30   01:30 - 01:45   01:45 - 02:00   02:00 - 02:15   02:15 - 02:30   02:30 - 02:45   02:45 - 03:00   03:00 - 03:15   03:15 - 03:30   03:30 - 03:45   03:45 - 04:00   04:00 - 04:15   04:15 - 04:30   04:30 - 04:45   04:45 - 05:00   05:00 - 05:15   05:15 - 05:30   05:30 - 05:45   05:45 - 06:00   06:00 - 06:15   06:15 - 06:30   06:30 - 06:45   06:45 - 07:00   07:00 - 07:15   07:15 - 07:30   07:30 - 07:45   07:45 - 08:00   08:00 - 08:15   08:15 - 08:30   08:30 - 08:45   08:45 - 09:00   09:00 - 09:15   09:15 - 09:30   09:30 - 09:45   09:45 - 10:00   10:00 - 10:15   10:15 - 10:30   10:30 - 10:45   10:45 - 11:00   11:00 - 11:15   11:15 - 11:30   11:30 - 11:45   11:45 - 12:00   12:00 - 12:15   12:15 - 12:30   12:30 - 12:45   12:45 - 13:00   13:00 - 13:15   13:15 - 13:30   13:30 - 13:45   13:45 - 14:00   14:00 - 14:15   14:15 - 14:30   14:30 - 14:45   14:45 - 15:00   15:00 - 15:15   15:15 - 15:30   15:30 - 15:45   15:45 - 16:00   16:00 - 16:15   16:15 - 16:30   16:30 - 16:45   16:45 - 17:00   17:00 - 17:15   17:15 - 17:30   17:30 - 17:45   17:45 - 18:00   18:00 - 18:15   18:15 - 18:30   18:30 - 18:45   18:45 - 19:00   19:00 - 19:15   19:15 - 19:30   19:30 - 19:45   19:45 - 20:00   20:00 - 20:15   20:15 - 20:30   20:30 - 20:45   20:45 - 21:00   21:00 - 21:15   21:15 - 21:30   21:30 - 21:45   21:45 - 22:00   22:00 - 22:15   22:15 - 22:30   22:30 - 22:45   22:45 - 23:00   23:00 - 23:15   23:15 - 23:30   23:30 - 23:45   23:45 - 24:00
3674S_P1    88  116 84  68  76  56  56  48  72  48  76  40  76  44  36  76  76  116 124 176 236 352 440 624 1016    1172    1260    1280    1304    1312    1252    1344    1324    1336    1212    1148    1132    1120    1084    996 924 1040    952 900 900 1116    1136    1044    1144    1152    1224    1088    1132    1184    1208    1120    1240    1196    1116    1264    1196    1240    1308    1192    1164    1096    1080    1160    1112    1244    1244    1184    1232    996 1108    876 864 776 644 520 684 724 632 620 680 724 516 504 432 396 264 252 272 256 100 144
3674S_P0    88  116 76  68  76  56  56  48  68  48  76  48  80  44  32  76  76  108 120 180 240 340 456 624 1088    1268    1352    1384    1412    1376    1356    1372    1400    1436    1296    1240    1200    1256    1120    1028    1008    1072    980 944 932 1148    1192    1040    1188    1220    1292    1140    1116    1268    1292    1172    1272    1236    1216    1280    1248    1280    1388    1244    1224    1076    1096    1148    1108    1256    1356    1308    1236    992 1100    880 872 768 640 520 680 720 636 620 660 716 512 504 428 396 260 244 272 252 100 136

The end result is a bug with the output where instead of line graphs the base variable is changed.

Any help on fixing this issue is much appreciated (and if you're able to make my code less convulted I'd appreciate it.

Cheers!

Finished code with debug complete

def update_graph(xaxis_column_name, xaxis_type):
    graph = []

    if xaxis_column_name != None :
        for i in range(0, len(xaxis_column_name)):
            graph_obj = go.Scatter(
                x=df.index,
                y=df[xaxis_column_name[i]])

            graph.append(graph_obj)
        return {
            'data': graph
        }
    return

I like to have the output to be without [] and without ''. When nothing is selected, nothing should be displayed. If Some options are selected, then just the text, not the '' should be shown.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import time

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)



app.layout = html.Div(children=[


    dcc.Checklist(id='my-checklist1',
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    value=[]
    ),
    html.Div(id='my-div-checklist1'),
    html.Hr(),



    dcc.Checklist(id='my-checklist2',
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    value=[],
    labelStyle={'display': 'inline-block'}
    ),
    html.Div(id='my-div-checklist2'),
    html.Hr(),


])



@app.callback(Output('my-div-checklist1', 'children'),
              [Input('my-checklist1', 'value'),
              Input('my-checklist2', 'value')
              ])

def prepare_data(categ1, categ2):
        return html.Div([dcc.Markdown(
                         '''{}, {}'''.format(categ1, categ2))])



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

Current vs. Expected:

Start now: [], [] What I want: ``

After selection now: 'NYC', 'SF' What I want: NYC SF

Thanks a lot for any help.

Similar Question 3 : plotly dash callback in a for loop

Say I have a for loop where each iteration only takes a short while and I want a dash figure updated in each iteration:

for i, (idx, row) in enumerate(df.iterrows()): update vector app.callback(Output('my-plot', 'figure'), [Input('vector')])

I have browsed online but there is apparently no way of doing this in dash it seems. My only solution is to use the Interval component and then the callback function retrieves some pickle files or something that are updated by running another kernel on my computer but there must be a better way.

Note: the idea is to have a graph that is updated 1 data point a time that is then appended to the graph - through Dash. Please, let me know how you would do it. It know I can just use the ordinary matplotlib.pyplot but I want a nice looking app and not matplotlib.

Similar Question 4 (1 solutions) : Plotly Dash table callback

Similar Question 5 (1 solutions) : Updating Dash Datatable through callback

Similar Question 6 (1 solutions) : Dash Callback does not update graph

Similar Question 7 (1 solutions) : A timer event for dash in Python

Similar Question 8 (1 solutions) : Pie chart wont generate - dash/plotly

cc