dcc.Graph(), dcc.Tabs() and dcc.RadioItems() not working properly when used along with JSON

Dash Python
1

Hello!
I have started using Dash pretty recently and it’s my first post on this forum. So I will be really grateful for any help offered.

I’m trying to create a Dash app which will read data from a csv file and resample it into different datasets depending on inputs from dcc.Tabs() and dcc.RadioItems(). dcc.Tabs() is used for selecting the dataset corresponding to the selected component type and dcc.RadioItems() is used for selecting the type of resampling to be done on the time-based data.

I’m caching the original and resampled dataframes into the FileSystem and these dataframes are passed through the callbacks as a python dictionary of JSON objects. The required JSON object is accessed through the value of RadioItems which is set to be the same as the key of this dictionary.

However, the graphs are not being displayed and the Tabs and RadioItems don’t reflect any change on selecting a different option eventhough the corresponding ‘value’ is being updated correctly.

The basic skeleton of my app is as follows:

app.layout = html.Div([
    html.Div([
            html.Div(id='hid-div-1', style={'display': 'none'}),      # hidden div
            html.Div(id='hid-div-2', style={'display': 'none'}),    # hidden div
             html.Div([
                html.Div(
                dcc.Tabs(
                    id='nav',
                    tabs=[{'label': key, 'value': val} for key,val in components.items()],
                    value='101',
                    vertical=True                    
                ),className='tab-container'),
                html.Div([html.Div(id='content')])
             ])
       ])
])

Depending on the Tabs() input, a page is displayed in the div with id='content' which contains dcc.Radioitems() and dcc.Graphs()

@app.callback(Output('hid-div-1', 'children'), [Input('nav', 'value')])
                 #Get csv data and return it as JSON

@app.callback(Output('hid-div-2', 'children'), [Input('hid-div-1', 'children')])
                 #Returns a dict of JSON objs

@app.callback(Output('graph-1', 'figure'), [Input('radio-opts', 'value'),Input('hid-div-2', 'children')],
              [State('nav', 'value')])   
               # Selects the required JSON obj from the dict,convert it to dataframe using pd.to_json(df,orient='split') and return the figure object of the plot   

@app.callback(Output('graph-1', 'figure'), [Input('radio-opts', 'value'),Input('hid-div-2', 'children')],
              [State('nav', 'value')])   
               # Similarly code for graph 2

Please help out! It’s very urgent for my project!!
Thank you.

2

Hello!
I was able to figure out the anomaly.
The problem was resolved when I passed the group of json objects as a python list instead of a dictionary.

def func(jsonified_df):
     df=read_json(jsonified_df,orient='split')
     df1=df.iloc[:10,:]
     df2=df.iloc[10:20,:]
     df3=df.iloc[20:30,:]
     l=[df1.to_json(orient='split'),df2.to_json(orient='split'),df3.to_json(orient='split')]
     return l

Previously, it was…

       return {
            'df1': df1.to_json(orient='split'),
            'df2': df2.to_json(orient='split'),
            'df3': df3.to_json(orient='split')
        }

But can someone explain me the reason for this behavior?
Thank you.