title: i am getting a error when i am running the flask application with python to plot graphs on web ui
body: <p>I aim to plot a line graph on the webpage using flask and charts.js I am just a beginner so I followed the link(<a href="https://www.youtube.com/watch?v=E2hytuQvLlE&amp;lc=UgzWBrS2GEx1BnNgs2V4AaABAg" rel="nofollow noreferrer">https://www.youtube.com/watch?v=E2hytuQvLlE&amp;lc=UgzWBrS2GEx1BnNgs2V4AaABAg</a>) to implement this program but it not working the error on the webpage is mentioned at the end of the question.</p>
  <p>This is my python code</p>
  <pre><code>from flask import Flask, render_template
  
  app = Flask(__name__)
  
  
  @app.route(&quot;/home&quot;)
  def home():
      plot_data = [
          (&quot;3-01-2020&quot;, 6),
          (&quot;3-02-2020&quot;, 13),
          (&quot;3-03-2020&quot;, 14),
          (&quot;3-04-2020&quot;, 41),
          (&quot;1-05-2020&quot;, 10),
          (&quot;3-06-2020&quot;, 0),
          (&quot;3-07-2020&quot;, 16),
          (&quot;3-08-2020&quot;, 10),
          (&quot;3-09-2020&quot;, 17),
          (&quot;3-10-2020&quot;, 19),
      ]
      labels = []
      values = []
      for row in plot_data:
          labels.append(row[1])
          values.append(row[0])
  
      return render_template('graph.html', lables=labels, values=values)
  
  
  if __name__ == &quot;__main__&quot;:
      app.run(debug=True)
  
  </code></pre>
  <p>This is my HTML code.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Chart view&lt;/title&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas id = &quot;voltage_graph&quot; width=&quot;900&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;
      &lt;script&gt;
          var ctx = document.getElementById(&quot;voltage_graph&quot;).getContext(&quot;2d&quot;);
          var lineChart = new Chart(ctx,{
              type: &quot;line&quot;,
              data:{
                  labels: {{labels | safe}}
                  datasets: [
                      {
                          label: &quot;BMS_CELL_01_voltage&quot;,
                          data:  {{values | safe}},
                          fill : false,
                          borderColor:&quot;rgb(75,192,192)&quot;,
                          lineTension: 0.1
                      }
                  ]
              },
              Options:{
                  responsive: false
              }
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>This is my terminal output</p>
  <pre><code>C:\Users\rohit\AppData\Local\Programs\Python\Python37\python.exe C:/Users/rohit/PycharmProjects/flask-projects/applicaton.py
   * Serving Flask app 'application (lazy loading)
   * Environment: production
     WARNING: This is a development server. Do not use it in a production deployment.
     Use a production WSGI server instead.
   * Debug mode: on
   * Restarting with stat
   * Debugger is active!
   * Debugger PIN: 275-482-683
   * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
  </code></pre>
  <p><a href="https://i.stack.imgur.com/1pEOu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1pEOu.png" alt="enter image description here" /></a></p>
  <p><strong>when I run this all I get is an error on the website stating as above</strong>
  any help would be appreciated, thanks in advance.</p>