CODEWITHSUNDEEP
pythonhtmlflaskdata-visualizationplotly
Ire
Ire

Reputation: 1109

Plotly graph not showing up in HTML (Python)

I'm trying to create a dashboard in Python using Plotly for the graphs and HTML for the front end.

In my app.py I have the graph defined and then: 

graph1Plot = plotly.offline.plot(graph1, 
    config={"displayModeBar": False}, 
    show_link=False, include_plotlyjs=False, 
    output_type='div')

return render_template('layouts/index.html', graph1Plot=graph1Plot)

In the HTML Template I have: 

`<head>
...
    <script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js">
    </script>
</head>
<body>
    ...
    <div id=1>{{ graph1Plot }}> </div>
...`

But it just shows the content of the div wrapped in " ", not the actual plot. If I paste the literal content of the div, it does work, but that's not a solution for me. e.g.

`<div id="b03d4a83-ac91-4125-9d6e-4c62d9e32298" style="height: 100%; width: 30%;display: inline-block;" class="plotly-graph-div"></div>

<script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("b03d4a83-ac91-4125-9d6e-4c62d9e32298", [{"type": "bar", "x": ["apples", "bananas", "pears", "pineapples", "watermelons", "strawberries"], "y": [231, 12, 321, 33, 44, 423]}], {"title": "Bar Plot", "yaxis": {"title": "Count"}, "xaxis": {"title": "Fruit"}}, {"showLink": false, "linkText": "Export to plot.ly", "displayModeBar": false})</script>`

What am I missing to make the content of the div show up as HTML code and not wrapped in double quotes as text?

Thanks a mil!

Upvotes: 1

Views: 2856

Answers (1)

Ire
Ire

Reputation: 1109

After a lot of researching I solved my own question. I just had to mark it as safe either in the HTML template {{ graph1Plot|safe }}

or in the .py file from flask import Markup ... graph1Plot = Markup(graph1Plot)

Upvotes: 3

Related Questions