43 lines
1.1 KiB
HTML
43 lines
1.1 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% block content %}
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
|
||
|
|
<h3>Statistics</h3>
|
||
|
|
<canvas id="myChart"></canvas>
|
||
|
|
<script language="javascript">
|
||
|
|
var ctx = document.getElementById('myChart').getContext('2d');
|
||
|
|
var chart = new Chart(ctx, {
|
||
|
|
// The type of chart we want to create
|
||
|
|
type: 'line',
|
||
|
|
|
||
|
|
// The data for our dataset
|
||
|
|
data: {
|
||
|
|
labels: [
|
||
|
|
{% for d in dayList %}
|
||
|
|
'{{ d["date"] }}',
|
||
|
|
{% endfor %}
|
||
|
|
],
|
||
|
|
datasets: [{
|
||
|
|
label: 'Mobile Data Usage in %',
|
||
|
|
//backgroundColor: 'rgb(255, 99, 132)',
|
||
|
|
borderColor: 'rgb(255, 99, 132)',
|
||
|
|
fill: false,
|
||
|
|
data: [
|
||
|
|
{% for d in dayList %}
|
||
|
|
'{{ d["usage"] }}',
|
||
|
|
{% endfor %}
|
||
|
|
]
|
||
|
|
}],
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
scales: {
|
||
|
|
yAxes: [{
|
||
|
|
ticks: {
|
||
|
|
suggestedMin: 00,
|
||
|
|
suggestedMax: 100
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|