"I am trying get the values of the single row based on drop down value selected. getting error with output."

Question

"I am trying to get the values of the single row based on the drop-down value selected.

I am confirming the output to ensure I can do a bar plot on the same late." need your expertise help fr the same.

Any otherr ways to call the same. Thanks for your help in advance.

---

code :

import dash
import pandas as pd
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
df = pd.read_csv('E:\pylab\dshlab\my_dash_app\solar.csv')

app = dash.Dash()
dpdown = []
for i in df['state']:
   str(dpdown.append({'label':i,'value':(i)}))

app.layout = html.Div([
    html.H4('Select your State'),
    dcc.Dropdown(id='dropdown', style={'height': '30px', 'width': '100px'}, options=dpdown,
        value=df['state']),
    #dcc.Graph(id='graph'),
    html.Div(id='table-container')
])

@app.callback(
    dash.dependencies.Output('table-container','children'),
    [dash.dependencies.Input('dropdown', 'value')])

def display_table(dpdown):
    return(df[df['state']==dpdown])

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

---

Error:

ash.exceptions.InvalidCallbackReturnValue: The callback for <Outputtable-container.children> returned a value having type DataFrame which is not JSON serializable.

The value in question is either the only value returned, or is in the top level of the returned list, and has string representation

state Number of Solar Plants Installed Capacity (MW) Average MW Per Plant Generation (GWh) 1 Arizona 48 1078 22.5 2550

In general, Dash properties can only be dash components, strings, dictionaries, numbers, None, or lists of those.

Answer 1

I used dash_table for creation of the table. You can read more about it here.

Code is as follows:

import dash
import pandas as pd
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
df = pd.read_csv('E:\pylab\dshlab\my_dash_app\solar.csv')

app = dash.Dash()
dpdown = []
for i in df['state']:
   str(dpdown.append({'label':i,'value':(i)}))

app.layout = html.Div([
    html.H4('Select your State'),
    dcc.Dropdown(id='dropdown', style={'height': '30px', 'width': '100px'}, options=dpdown),
    #dcc.Graph(id='graph'),
    html.Div(
        id='table-container',
        className='tableDiv'
    )
])

@app.callback(
    dash.dependencies.Output('table-container','children'),
    [dash.dependencies.Input('dropdown', 'value')])

def display_table(dpdown):
    df_temp = df[df['state']==dpdown]
    return html.Div([
        dt.DataTable(
            id='main-table',
            columns=[{'name': i, 'id': i} for i in df_temp.columns],
            data=df_temp.to_dict('rows')
        )
    ])

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

This will temporarily subset the dataframe and filter for your state every time a callback occurs, and output only the row corresponding to the state.