title: loading json file to create chart
body: <p>I am trying to create a graph in chart.js from data that i have extracted from an SQL database using python. I am creating a JSON file in python which I then load in javascript (I don't know if this is the best way to do this).</p>
  <p>Here is my code</p>
  <pre><code>{% extends &quot;layout.html&quot; %}
  
  {% block head %}
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js&quot;&gt;&lt;/script&gt;
  {% block title %}
      Graph
  {% endblock %}
  
  {% block main %}
      &lt;canvas id=&quot;chart&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;
      &lt;script&gt;
          const labels = [];
          const ycoordinate = [];
          chartIt();
      
          async function chartIt(){
              await getData();
              const ctx = document.getElementById('chart').getContext('2d');
              const myChart = new Chart(ctx, {
                  type: 'line',
                  data: {
                      labels: labels,
                      datasets:[{
                         data: ycoordinate
                      }],
                  },
                  options: {}});
          }
      
          async function getData(){
              const response = await fetch('data.json');
              const data = await response.text();
              console.log(data);
              const labels = data.map((x) =&gt; x.date);
              const ycoordinate = data.map((x) =&gt; x.mass);
          }
      &lt;/script&gt;
  {% endblock %}
  </code></pre>
  <p>When I run this I get a 500 internal server error line 68, in template {% endblock %}</p>
  <p>jinja2.exceptions.TemplateSyntaxError: Unexpected end of template. Jinja was looking for the following tags: 'endblock'. The innermost block that needs to be closed is 'block'.</p>
  <p>and in my console I get Mixed content: load all resources via HTTPS to improve the security of your site</p>