<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>