<html> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <body> {% if first and request.args.get('first') == None %} <form method="post"> <p>DB is missing table. <input type="submit" value="Create" name="Create"/> </form> {% endif %} {% if result == [] %} <form method="post"> <p>No comics imported. <input type="submit" value="Import" name="Import"/> </form> {% endif %} {% if total != covers %} <form method="post"> <p>Some covers missing <input type="submit" value="Generate" name="Generate"/> </form> {% endif %} <h1>Total Comics: {{ total }}</h1> <canvas id="myChart" style="width:100%;max-width:600px"></canvas> <script> var xValues = {{ pub_list | safe }}; var yValues = {{ count }}; var barColors = ["red", "green","blue","orange", "purple"]; new Chart("myChart", { type: "bar", data: { labels: xValues, datasets: [{ backgroundColor: barColors, data: yValues }] }, options: { legend: {display: false}, title: { display: true, text: "Publishers" } } }); </script> <canvas id="myChart3" style="width:100%;max-width:600px"></canvas> <script> var xValues = {{ x | safe }}; var yValues = {{ y | safe }}; new Chart("myChart3", { type: "line", data: { labels: xValues, datasets: [{ fill: false, backgroundColor: "rgba(0,0,255,1.0)", borderColor: "rgba(0,0,255,0.1)", data: yValues }] }, options: { legend: {display: false}, } }); </script> <table id="comics"> {% for i in result %} <tr> {% for j in range(0,9) %} <td>{{ i[j] }}</td> {% endfor %} </tr> {% endfor %} </table> </body> </html>