{% extends 'web_template/index.html' %}
{% load i18n %}
{% load static %}
{% block stylesheets %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static  'datatables/media/css/dataTables.bootstrap.min.css' %}">
{% endblock %}
{% block page_name %}
{% trans "List of exams" %}
{% endblock %}
{% block page_description %}
{% trans "Statistics page" %}
<a href='{% url 'examstatistics' exam.id %}' class="btn btn-default"><i class="fa fa-down"></i> {% trans "Download CSV" %}</a>
{% endblock %}
{%block content %}

 <!-- BAR CHART -->
          <div class="box box-success">
            <div class="box-header with-border">
              <h3 class="box-title">Bar Chart</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <div class="box-body">
              <div class="chart">
                <canvas id="barChart" style="height:230px"></canvas>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->



{% endblock %}

{% block extra_foot %}
{{ block.super}}
<script src='{% static  'datatables/media/js/jquery.dataTables.min.js' %}'></script>
<script src='{% static  'datatables/media/js/dataTables.bootstrap.min.js' %}'></script>
<script src='{% static  'chart.js/dist/Chart.js' %}'></script>
<script>
  $(function () {

    new Chart(document.getElementById("barChart"), {
        type: 'bar',
        data: {
          labels: {{ keys }},
          datasets: [
            {
              label: "No. of students",
              backgroundColor: "#3e95cd",//, "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
              data: {{ values }}
            }
          ]
        },
        options: {
          legend: { display: false },
          title: {
            display: true,
            text: 'Statistika za rok {{ fullexam }}'
          }
        }
    });
});



</script>
{% endblock %}