{% 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 %}
|
