Plotting 3D Chart in Dash Plotly

Question

I have some difficulties to create a 3D chart for my Dash App. The code does not throw any error. It returns an empty 2D chart (not even a 3D chart).

I checked the variables z, x, y - they contain the correct values + shape. Code snippet is from Plotly, Chart Example "Passing x and y data to 3D Surface Plot". Any idea what I am missing?

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output
import plotly.graph_objects as go

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children="My 3D Chart!"),
    dcc.Graph(
        id='my-graph'
    ),
    ])

@app.callback(Output('my-graph', 'figure'))

def create_chart():
    z = df_size_rolled.values
    sh_0, sh_1 = z.shape
    x, y = np.linspace(0, 1, sh_0), np.linspace(0, 1, sh_1)

    fig = go.Figure(data=[go.Surface(z=z, x=x, y=y)])

    return fig

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

I also tried, but didn't work:

data=[go.Surface(z=z, x=x, y=y)]

return {'data': [data]}

Any help much appreciated.

Maeaex1 Maeaex1 · Accepted Answer · 2020-01-12T17:34:24

Seems like the ´data´- property is not needed in Dash.

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("3D Charts", style={"textAlign": "center"}),
    html.Div([html.Div([html.Span("Type Of Chart : ")], className="six columns",
                       style={"textAlign": "right", "padding-right": 30, "padding-top": 7}),
              html.Div([dcc.Dropdown(id='select-date', options=[{'label': i, 'value': i} for i in my_dates],
                                     value="2018-02-06")], className="six columns",
                       style={"width": "40%", "margin-left": "auto", "margin-right": "auto", "display": "block"}),
              ], className="row", style={"width": "80%"}),
    html.Div([dcc.Graph(id='my-graph')], className="row")
], className="container")

@app.callback(
    dash.dependencies.Output('my-graph', 'figure'),
    [dash.dependencies.Input('select-date', 'value')])
def update_graph(selected):
    global df_sliced

    df_sliced = df_size.loc[selected:selected]
    df_sliced = df_sliced.rolling(6).mean()
    df_sliced = df_sliced.dropna()

    trace2 = [go.Surface(
        z = df_sliced.values,

        colorscale='Rainbow', colorbar={"thickness": 10, "len": 0.5, "title": {"text": "Volume"}})]
    layout2 = go.Layout(
        title="Orderbook Structure " + str(selected), height=1000, width=1000, scene = dict(
                    xaxis_title='Order Level - Bid Side[0-9], Ask Side[10-19]',
                    yaxis_title='Time 08.00 until 22.00 (5Min Intervals)',
                    zaxis_title='Volume (Trailing Mean - 30Min)',
                    aspectmode='cube'),
        scene_camera_eye=dict(x=2, y=-1.5, z=1.25),
    )
    return {"data": trace2, "layout": layout2}

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

Plotting 3D Chart in Dash Plotly

1 Answers