ValueError: Cannot accept list of column references or list of columns for both `x` and `y`

Dash Python
1

I’m trying to create an interactive plot that changes according to the game dropdown, but keep the value error above. Any help would be appreciated. Thanks!

from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd

app = Dash(__name__)

df = pd.read_csv("games.csv")
df = df.loc[:, ~df.columns.str.contains('^Unnamed')]

app.layout = html.Div([
    html.Div([

        html.Div([
            dcc.Dropdown(
                df['Game'].unique(),
                'Game Number',
                id='xaxis_column'
            )
        ], style={'width': '48%', 'display': 'inline-block'})
    ]),

    dcc.Graph(id='indicator-graphic')
])


@app.callback(
    Output('indicator-graphic', 'figure'),
    Input('xaxis_column', 'value'))

def update_graph(xaxis_column):
  
    dff= df[df['Game'] == xaxis_column]
    fig = px.line(x=df[df['Game'] == xaxis_column]['Time'],
                      y=list(df[df['Game'] == xaxis_column]['T1']))

    fig.update_layout(margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest')


    return fig


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

Can you add example dataframe for us to try to run?

3

Yes! It’s just a toy data frame that I created. See blow:

Screen Shot 2023-03-31 at 3.10.35 AM
Screen Shot 2023-03-31 at 3.10.35 AM1144×1230 154 KB

Time T1 T2 Game
2 0.909297426825682 -0.416146836547142 1
3 0.141120008059867 -0.989992496600445 1
4 -0.756802495307928 -0.653643620863612 1
5 -0.958924274663138 0.283662185463226 1
6 -0.279415498198926 0.960170286650366 1
7 0.656986598718789 0.753902254343305 1
8 0.989358246623382 -0.145500033808614 1
2 0.141120008059867 -0.989992496600445 2
3 -0.756802495307928 -0.653643620863612 2
4 -0.958924274663138 0.283662185463226 2
5 -0.279415498198926 0.960170286650366 2
6 0.656986598718789 0.753902254343305 2
7 0.989358246623382 -0.145500033808614 2
8 0.412118485241757 -0.911130261884677 2
2 -0.756802495307928 -0.653643620863612 3
3 -0.958924274663138 0.283662185463226 3
4 -0.279415498198926 0.960170286650366 3
5 0.656986598718789 0.753902254343305 3
6 0.989358246623382 -0.145500033808614 3
7 0.412118485241757 -0.911130261884677 3
8 -0.54402111088937 -0.839071529076452 3

4

I think you are setting value of dcc.Dropdown as Game Number but it should be 1, 2, 3 so it didn’t work.
Please try something as below to see if it worked.

import pandas as pd
import dash
from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd

df = pd.read_csv("games.csv")
df = df.loc[:, ~df.columns.str.contains('^Unnamed')]

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([
        html.Div([
            dcc.Dropdown(
                options=[{'label':x,'value':x} for x in df['Game'].unique()],
                value=1,
                id='xaxis_column'
            )
        ], style={'width': '48%', 'display': 'inline-block'})
    ]),

    dcc.Graph(id='indicator-graphic',figure={})
])


@app.callback(
    Output('indicator-graphic', 'figure'),
    Input('xaxis_column', 'value'))

def update_graph(xaxis_column):
    fig = px.line(x=df[df['Game'] == xaxis_column]['Time'],
                      y=list(df[df['Game'] == xaxis_column]['T1']))
    fig.update_layout(margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest')

    return fig


if __name__ == '__main__':
    app.run_server(debug=False)
2 Likes
5

That worked. Thanks so much hoatran!

2 Likes