Updating DataTable to latest version

Dash Python
1

Hi Ive used the previous DataTable-experiments example to create a table and graph, along with adding my own map. Im having trouble understanding/updating my code to the latest version (DataTable). My previous code was displaying the table, graph, and map (even though the interactivity was broken). My updates to the latest version are not working, and Im not really sure why. Essentially Im just trying to get it back to the same point I was with the experiments version - having the data display properly. Im not getting much of an error message, only “Error loading layout” in the browser.

Version:
dash 0.28.3
dash-core-components 0.33.1
dash-html-components 0.13.2
dash-renderer 0.14.3
dash-table 3.1.7
dash-table-experiments 0.6.0
plotly 3.3.0
pandas 0.23.4

This is what I have:

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table as dt
import json
import plotly
from plotly import graph_objs as go
from plotly.graph_objs import *
import pandas as pd

mapbox_access_token = 'myKey'

df  = pd.read_csv('test.csv')
site_lat = list(df['lat'])
site_lon = list(df['lon'])
locations_name = list(df['lot'])

app = dash.Dash()
app.scripts.config.serve_locally=True

app.layout = html.Div([
    html.H4('Parking Lots'),
    html.Div([
        html.Div([
            dcc.Graph(
            	id = 'map',
            	figure = {
            		'data': [ go.Scattermapbox(
                                lat = site_lat,
            		    lon = site_lon,
                        mode = 'markers',
                        marker = {
                            'size':10,
                            'color':'#265465',
                        }
                    )],
            		'layout': go.Layout(
                                    hovermode = "closest",
            			height = 800,
            			autosize = True,
            			mapbox = dict(
            				accesstoken = mapbox_access_token,
            				center = {'lat' : 41.808611,'lon' : -87.888889},
            		        zoom = 9,
            		        style = 'light'
                        )
                    )
            	}
            )], className = 'six columns'),
        html.Div([
            dcc.Graph(
                id = 'graph-lots'
            )
    ], className = 'six columns')
    ], className = 'row'),

    html.Div([
        dt.DataTable(
            id = 'datatable-lots',
            data=df.to_dict("rows"),
            #rows = df.to_dict('records'),
            columns = sorted(df.columns.difference(['geom'])),
            editable=True,
            filtering=True,
            sorting=True,
            sorting_type="multi",
            row_selectable="multi",
            row_deletable=True,
            selected_rows=[]
        )
    ]),
], className = "container")

@app.callback(
    Output('datatable-lots', 'selected_rows'),
    [Input('graph-lots', 'clickData')],
    [State('datatable-lots', 'selected_rows')])
def update_selected_rows(clickData, selected_rows):
    if clickData:
        for point in clickData['points']:
            if point['pointNumber'] in selected_rows:
                selected_rows.remove(point['pointNumber'])
            else:
                selected_rows.append(point['pointNumber'])
    return selected_rows


@app.callback(
    Output('graph-lots', 'figure'),
    [Input('datatable-lots', 'data'),
     Input('datatable-lots', 'selected_rows')])
def update_figure(data, selected_rows):
    dff = pd.DataFrame(data)
    data = [go.Bar(
            x = dff['lot'],
            y = dff['sqft'],
            width = 1,
            name = 'Lot Square Feet'
            )
        ]
    fig = go.Figure(data=data)
    return fig

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

I’d recommend starting from scratch by reading through the documentation in https://dash.plot.ly/datatable. A lot has changed between the two versions.