Interactive graphing wind rose

Dash Python
1

I’m a beginner in Dash and plotly. I would like to create a interactive graphing like it’s explained in the tutorial : https://dash.plot.ly/interactive-graphing [https://dash.plot.ly/interactive-graphing]

I have followed this example but it doesn’t work and I don’t know why.

here is my code :


df = pd.DataFrame(...)
app = dash.Dash()

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}



app.layout = html.Div(children=[
    html.H1(
        children='My title',
        style={
            'textAlign': 'center',
            'color': 'black'
        }
    ),

    html.Div(children='subtitle', style={
        'textAlign': 'center',
        'color': 'black'}),

    html.Div([dcc.Graph(id="id_map",figure="my_figure")]),

    html.Div(dcc.Graph(id = 'id_interactive_graph'))
])



@app.callback(
    Output('id_interative_graph', 'figure'),
    [Input('id_map', 'clickData')])
def update_figure(clickData):
    click = clickData['points'][0]["customdata"]
    print(f(df,click)
    return f(df,click)

## f return a dictionnary : { "data" : [...]; "layout" : {...}  }



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

The problem is that the graph “id_interactive_graph” isn’t displayed but no error is raised.

The function f() works properly. I can verify it, with the print().
The format of the result of this function it’s correct too ; I’ve ever tried to put the result directly in the app.layout().
The callback works because I’ve ever tried to return a more simple figure which is displayed.
The clickData works well too, I’ve ever succeeded in displaying the “click”.

All works well separately but not in interraction.
I don’t understand at all what’s happening.

Is it possible that my function f() is a too long dictionary too be displayed ?

2

In fact, the problem seems to be due to the format of my figure. I would like to display a wind rose and my function f(df,click) return a figure like that

trace1 = go.Area(
        r=[...],
        t=['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'],
        name='8-12 m/s',
        marker=dict(
            color='rgb(106,81,163)'
        )
    )


    
    trace2 = go.Area(
        r=[...],
        t=['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'],
        name='7-8 m/s',
        marker=dict(
            color='rgb(158,154,200)'
        )
    )

    trace3 = go.Area(
        r=[...],
        t=['North', 'N-E', 'East', 'S-E', 'South', 'S-W', 'West', 'N-W'],
        name='5-7 m/s',
        marker=dict(
            color='rgb(203,201,226)'
        )
    )


    data = [trace1, trace2, trace3]
    layout = go.Layout(
        font=dict(
            size=16
        ),
        legend=dict(
            font=dict(
                size=16
            )
        ),
        radialaxis=dict(),
        orientation=270
    )

    return( {'data' : data,
           'layout' : layout})
3

You misspelled the id on this line:

Output(‘id_interative_graph’, ‘figure’)

The ‘c’ is missing in interactive :slight_smile:

4

Thanks. But it’s not the problem, in my own code there is no error at that line.

5

go.Area is pretty old, buggy code. A customer has sponsored the development of a polar bar rewrite (more about how to sponsor development: https://plot.ly/products/consulting-and-oem/) and in fact it was just merged into master today: https://github.com/plotly/plotly.js/pull/2954. A new release will be out in a week or two, you can follow https://github.com/plotly/plotly.js/releases and https://github.com/plotly/dash-core-components/blob/master/CHANGELOG.md for release updates.

6

Ok, thanks a lot for your help !

7

The new polar area charts were released today! https://github.com/plotly/dash-core-components/blob/master/CHANGELOG.md