title: Plotly.offline plot output_type='div' not working inside HTML - How to embed Plotly to HTML
body: <p>I have created a simple Flask app which renders a template 'index.html' and in that HTML I am attempting to list various plots as a sort of dashboard-style webpage with other content. I know the basics of Flask and Dash though am not using Dash as I want to have more control over the HTML/CSS hence using Flask to create a website to embed the graphs using Plotly.</p>
  
  <p>So far I've had no luck with any of the official documentation or any medium.com or suchlike articles. The closest I have come to is this answer: <a href="https://stackoverflow.com/questions/56787941/embedding-dash-plotly-graphs-into-html">Embedding dash plotly graphs into html</a></p>
  
  <p>However, it isn't working when I run my app and the browser launches in localhost. Instead it just gives me a lot of text which is clearly the plotly figure, but it isn't turning into a graph.</p>
  
  <p>Here is all my py/html/css even if the navbar stuff isn't relevant; just in case (I am still learning so I'm sure there will be some better ways to do things..)</p>
  
  <p>Thanks for any help.</p>
  
  <p>DataFrame class which grabs the latest Coronavirus data and returns as pandas.dataframe:</p>
  
  <pre><code>import pandas as pd
  import requests
  
  
      class DataFrame:
          """
          Class which grabs the data live from the ECDC and returns it in a pandas dataframe
          """
  
          def __init__(self):
              """
              Creating the pandas dataframe of the ECDC JSON data
              """
              self.url = "https://opendata.ecdc.europa.eu/covid19/casedistribution/json"
              self.file = requests.get(self.url).json()
              self.file = self.file['records']
              self.df = pd.DataFrame(data=self.file)
  
          def converter(self):
              """
              Converting the dtypes from object to int for ints, and date to date
              Also renames the columns to more visual-friendly names
              :return: None
              """
              self.df['cases'] = self.df['cases'].astype(int)
              self.df['deaths'] = self.df['deaths'].astype(int)
              self.df['popData2018'] = self.df['popData2018'].astype(str).replace('', 0).astype(int)
              self.df['dateRep'] = self.df['dateRep'].to_timestamp
              cols_rename = 'date day month year cases deaths country geo_id country_id population continent'.split()
              cols_rename = [s.capitalize() for s in cols_rename]
              self.df.columns = cols_rename
  
          def return_df(self):
              """
              :return: pandas DataFrame
              """
              self.converter()
              return self.df
  </code></pre>
  
  <p>app.py</p>
  
  <pre><code>from plotly.offline import plot
  import plotly.graph_objects as go
  from dataframe.dataframe import DataFrame
  from flask import Flask, render_template, redirect, request, url_for
  
  app = Flask(__name__)
  
  
  def graph_maker():
      df = DataFrame().return_df()
      data = []
  
      for continent in df['Continent'].unique():
          df_filt = df[df['Continent'] == continent]
          data.append(go.Scatter(x=df_filt["Cases"],
                                 y=df_filt["Deaths"],
                                 mode='markers',
                                 text=df_filt['Country'],
                                 name=continent))
  
      layout = go.Layout(title="Deaths (Y) v Cases (X) by continent")
  
      fig = go.Figure(data=data, layout=layout)
  
      return plot(figure_or_data=fig,
                  include_plotlyjs=False,
                  output_type='div')
  
  
  @app.route('/')
  def index():
      graph = graph_maker()
      return render_template('index.html',
                             graph=graph)
  
  
  if __name__ == '__main__':
      app.run(debug=True)
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>{% extends "navbar.html" %}
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link type="text/css" rel="stylesheet" href="..\static\master.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Maven+Pro&amp;display=swap" rel="stylesheet"&gt;
      &lt;!-- Plotly.js --&gt;
      &lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  {% block nbar %}
  &lt;body&gt;
  &lt;div class="global-box" id="global-stats"&gt;
      &lt;h1&gt;Global charts&lt;/h1&gt;
      &lt;p&gt;Title here&lt;/p&gt;
      &lt;ul class="global-box-ul"&gt;
          &lt;li class="global-box-ul-li"&gt;
              {{ graph }}
          &lt;/li&gt;
          &lt;li class="global-box-ul-li"&gt;
              Another chart here
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  {% endblock %}
  </code></pre>
  
  <p>navbar.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;C19DB&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link type="text/css" rel="stylesheet" href="..\static\master.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Maven+Pro&amp;display=swap" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;nav class="navbar"&gt;
      &lt;div class="logo"&gt;c19db&lt;/div&gt;
      &lt;div class="list"&gt;
      &lt;ul class="navbar_items"&gt;
         &lt;li class="navbar_item"&gt;&lt;a href="#"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
         &lt;li class="navbar_item"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
         &lt;li class="navbar_item"&gt;&lt;a href="#"&gt;Register&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
  {% block nbar %}
  
  {% endblock %}
  &lt;/html&gt;
  </code></pre>
  
  <p>master.css</p>
  
  <pre><code>html, body {
      font-family: 'Maven Pro';
      height: 700px;
      margin: 0;
  }
  
  .navbar {
      background: rgb(237, 232, 232);
      vertical-align: middle;
  }
  
  .logo {
      vertical-align: middle;
      display: inline-block;
      color: rgb(196, 69, 69);
      font-size: 50px;
      width: 250px;
      padding: 5px 15px 5px 15px;
  }
  
  .list{
      vertical-align: middle;
      display: inline-block;
      width: calc(100% - 285px);
      text-align: right;
  }
  
  .navbar_items {
      list-style: none;
      font-size: 20px;
      color: rgb(61, 61, 61)
  }
  
  .navbar_item{
      display: inline-block;
      padding: 5px 15px 5px 15px;
  }
  
  a {
      text-decoration: none;
  }
  
  .navbar_item &gt; a{
      display: inline-block;
      padding: 5px 15px 5px 15px;
      color: rgb(61, 61, 61);
  }
  
  .navbar_item &gt; a:hover {
      display: inline-block;
      padding: 5px 15px 5px 15px;
      color: rgb(196, 69, 69);
  }
  
  .footer, .footer a {
      position: relative;
      background: rgb(237, 232, 232, 0.2);
      width: 100%;
      color: rgb(61, 61, 61, 0.2);
      text-align: center;
  }
  
  span {
      font-weight: bold;
  }
  
  .global-box {
      text-align: center;
      border: 2px black solid;
      list-style: none;
      margin: auto;
  }
  
  .global-box &gt; h1, .global-box &gt; p {
      margin: 1px;
  }
  
  ul {
      display: contents;
  }
  
  .global-box-ul-li {
      display: inline-block;
      border: 2px lightblue solid;
      list-style: none;
      margin: auto;
      width: 48%;
      height: 100%;
  }
  </code></pre>
  
  <p>Thank you for any help!</p>