Flask Plotly Dash integration

Question

I am starting my first experience with Flask and Plotly Dash to create a web-based dashboard. I would like to know if I can embed Dash components in the Flask app.

Answer 1

if use 'px' in dash you can parse it using this method:

fig = px.bar(df, x='Fruit', y='Amount', color='City', 
      barmode='group')    graphJSON = 
json.dumps(fig,cls=plotly.utils.PlotlyJSONEncoder)    
return render_template('notdash.html', plot=graphJSON)

if use 'go' :

data = [
        go.Bar(
            x=df['x'], # assign x as the dataframe column 'x'
            y=df['y']
        )
    ]

    graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
    return render_template('notdash.html', plot=graphJSON)

For frontend add this line in the header of your HTML:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"> 
</script>

and you can plot your figure as easy as writing lines below :

<div class = "divider py-1 text-center text-white bg-dark">Plotly data</div>
<div class="chart" id="linegraph">
    <script>
        var layout = { title : "", xaxis : {title: "Date+Time",dtick: 1,type: 
        'category' },
         yaxis :{title: "whatever"}}
        var graphs = {{plot | safe}};
        Plotly.plot('linegraph',graphs,layout);
    </script>