Simple x,y, plot from editable DataTable ValueError

Dash Python
1

Hi. I am new to dash, and trying to implement the simplest (apparently) of apps, which is an x,y graph of input Float data to an editable table. I did a search, but all the questions were involving far more complex apps.

With this code, I get a ValueError that the Shape of passed values is wrong, indices imply (2, 4) but the passed data is always (2, n) where n is the number of rows.

Please can somebody help me, I can’t understand why this isn’t working. I’m assuming it’s something to do with the way I’m passing the data between the DataTable and the dcc.Graph. I had to add the “data” property of the layout in order to have a cell to select to paste my data into. Is this where the error is?

Thanks so very much in advance!!

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

app = dash.Dash(__name__)

app.layout = html.Div([
    dash_table.DataTable(
        id='table-editing-simple',
        columns=([{
            'id': 'Pressure',
            'name': 'P_Gpa',
            'type': 'numeric'
        }, {
            'id': 'Temperature',
            'name': 'T_degC',
            'type': 'numeric'
        }]
        ),
        data=[{'P_Gpa':0, 'T_degC':0}
        ],
        editable=True
    ),
    dcc.Graph(id='table-editing-simple-output')
])


@app.callback(
    Output('table-editing-simple-output', 'figure'),
    [Input('table-editing-simple', 'data'),
     Input('table-editing-simple', 'columns')])
def display_output(rows, columns):
    df = pd.DataFrame(rows, columns)
    return {
        dcc.Graph(
            figure={
                "data": [{
                    "x": df['P_Gpa'],
                    "y": df['T_degC']
                }]
            })
    }

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

The error I got:

dash.exceptions.InvalidCallbackReturnValue:
The callback for <Output table-editing-simple-output.figure>
returned a value having type set
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
{Graph(figure={'data': [{'x': [0, 2], 'y': [0, 1]}]})}
In general, Dash properties can only be
dash components, strings, dictionaries, numbers, None,
or lists of those.

This is because the following is a set:

{
        dcc.Graph(
            figure={
                "data": [{
                    "x": df['P_Gpa'],
                    "y": df['T_degC']
                }]
            })
    }

To return to the figure property of the graph, all you need is a figure object or a dictionary.
So to fix, change the return statement to:

    return {
        "data": [{
            "x": df['P_Gpa'],
            "y": df['T_degC']
        }]
    }

which should work.

3

Thank you so very much for replying!
That makes sense, however the figure still doesn’t update when I enter data in the table (although at least now it doesn’t throw an error!).

I will go back to the examples and figure it out some more. Thanks so much for the step in the right direction! =)