Updating graph after choosing different dataframe

[s1kor]

Hi Everyone,
So, I have a problem because I want to create a graph that will update automatically when I select different data frame from the checklist.

my graph looks like that:

              figure={'data': [
                  go.Scatter(
                      x=df.index,
                      y=df[0],
                      line=dict(color='#ae5a41'),
                      opacity=0.8),
                  go.Scatter(
                      x=df.index,
                      y=df[1],
                      line=dict(color='#5a5255'),
                      opacity=0.8),
                  go.Scatter(
                      x=df.index,
                      y=df[2],
                      line=dict(color='#1b85b8'),
                      opacity=0.8),
                  go.Scatter(
                      x=df.index,
                      y=df[3],
                      line=dict(color='#c3cb71'),
                      opacity=0.8),
                  go.Scatter(
                      x=df.index,
                      y=df[4],
                      line=dict(color='#559e83'),
                      opacity=0.8)
              ],
                  'layout': go.Layout(title='',
                                      xaxis=dict(
                                          rangeselector=dict(
                                              buttons=list([
                                                  dict(count=1, label='1 day', step='day', stepmode='backward'),
                                                  dict(count=7, label='1 week', step='day', stepmode='backward'),
                                                  dict(count=1, label='1 month', step='month', stepmode='backward'),
                                                  dict(count=3, label='3 months', step='month', stepmode='backward'),
                                                  dict(count=6, label='6 months', step='month', stepmode='backward'),
                                                  dict(step='all')
                                              ])
                                          ),
                                          rangeslider=dict(), type='date'
                                      )
                                      )}, style={'width': '100%', 'display': 'inline-block'}),
    dcc.Markdown(''' --- '''),
])

my checlist:

dcc.Checklist(id='account_options',
                            options=[
                                {'label': 'Free Accounts', 'value': 'free'},
                                {'label': 'Paid Accounts', 'value': 'pro'},
                                {'label': 'All Accounts', 'value': 'all'}
                            ],
                            values=['all'])
              ], style={'display': 'inline-block', 'verticalAlign': 'top', 'width': '30%'}),

could you please help me out how to change that graph to be "dynamic" 

I have read some answer already, but nothing that suits my problem.
[https://community.plotly.com/t/graphs-are-not-automatically-updated-after-dropdown-value-selection-when-animate-true/4644/7](https://community.plotly.com/t/graphs-are-not-automatically-updated-after-dropdown-value-selection-when-animate-true/4644/7)
or
 [https://plot.ly/dash/getting-started-part-2](https://plot.ly/dash/getting-started-part-2)

Thank you everyone for help.

[SantoshiT]

Hello! plotly uses a lot of lists and dictionaries. So to be able to free code a lot of the graphs, it would be immensely helpful to learn concepts like type conversions, handling dictionaries and most importantly list comprehension.

Here’s the code.

DataOut=[]
colors=[’#ae5a41’,’’,’’,’’,’’]
for i in range (5):
data = go.Scatter(x=df.index,
y=df[i],
line=dict(color=colors[i]),
opacity=0.8),
DataOut.append(data)

counts=[1,7,1,3…]
labels=[‘1 day’,‘1 week’,…]
steps=[‘day’,‘day’]
n= len(counts)
xrange= dict(rangeselector=dict(buttons=list([
dict(count=1, label=‘1 day’, step=‘day’, stepmode=‘backward’)for i in range(n)
])),
rangeslider=dict(), type=‘date’)
layout= go.Layout(title=’’,
xaxis=xrange)

[s1kor]

thank you very much @SantoshiT, so, from here how I can pass data to create different dataframes and return different plots?

[SantoshiT]

to plot you simply use:

import plotly.offline as pyo
fig = dict(data=DataOut, layout=layout)
pyo.plot(fig, filename=‘Categoricalplot.html’, config=config)

if you don’t use a drop down, all n plots will overlap.

[jmmease]

Hi @SantoshiT,

Thanks for your contributions to the forums! When you post code examples, it would be helpful for people reading your posts if you put the code inside a “Fenced code block” (See explanation at https://help.github.com/articles/creating-and-highlighting-code-blocks/)

Thanks!

[SantoshiT]

hello @jmmease,

That was very helpful. This is my first time contributing to a Forum, the input is much appreciated.

Thank You!

[s1kor]

In dash if I want to create a plot that takes input from radioitems, and transfers it to the graph.
So, the question is: should I make a callback? or do some kind of list comprehension in radioitems or list comprehension in the graph itself?

[jmmease]

Hi @s1kor,

For questions about Dash, you’ll have better luck finding someone who can help if you move your post to the Dash category (right now it’s in API/Python).

Thanks!

-Jon

[chriddyp]

In dash if I want to create a plot that takes input from radioitems, and transfers it to the graph.
So, the question is: should I make a callback?

Yup! Make a callback. I highly recommend taking some time with the Dash Tutorial, at the least the first 3 chapters: https://dash.plot.ly. In particular “Part 3. Basic Callbacks” has some examples that would help you out.

[s1kor]

Thank you very much for the answer @chriddyp. I have read it and tries, but still don’t get the desired output. Maybe someone could give me a hint what to change.
I know that I’m still don’t doing this right…
My radioitem and callback:

all_options = {'free': free, 'paid': paid, 'all': df} #this are dataframes that I want
app.layout = html.Div([
    dcc.Markdown(''' --- '''),
    html.H1(''),
    html.Div([html.H3('Choose:', style={'paddingRight': '30px'}),
              dcc.RadioItems(id='account_options',
                             options=[{'label': k, 'value': k} for k in all_options.keys()],
                             value='df')
              ], style={'display': 'inline-block', 'verticalAlign': 'top', 'width': '30%'}),

    html.H1('Chart of accounts closed divided into accounts payable and free'),
    dcc.Graph(id='my_graph'),
])


@app.callback(Output('my_graph', 'figure'),
              [Input('account_options', 'value')])
def update_graph(xaxis_column_name, yaxis_column_name,
                 selected_df):
    selected = all_options == selected_df
    return {
        'data': [go.Scatter(
            x=selected[selected.index == xaxis_column_name]['Value'],
            y=selected[selected.column == yaxis_column_name]['Value'],
            name=selected[selected.column == yaxis_column_name]['Value'],
            opacity=0.8
        )],
        'layout': go.Layout(
            xaxis={
                'title': xaxis_column_name,
            },
            yaxis={
                'title': yaxis_column_name,
            },
            margin={'l': 40, 'b': 40, 't': 10, 'r': 0},
        )
        }

What and where I’m missing?

[s1kor]

OK! I did it,

Solution:

@app.callback(Output('my_graph', 'figure'),
              [Input('account_options', 'value')])
def update_graph(selected_df):
    selected = all_options[selected_df]
    return {
        'data': [...]
       'layout': [...]

it was easy as that Thank you everyone for helping out

[SantoshiT]

That’s great, glad you got the solution!