Plotly graph not showing up in HTML (Python)

📊 Plotly Python
1

Hi,
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?

Also, maybe a silly question but I’m pretty new to all this. If I want to call functions on click (e.g. link to open another webpage), can I create them on the .py file?

Thanks a mil!

2

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)