90 lines
2.0 KiB
HTML
90 lines
2.0 KiB
HTML
{% extends "layout/base.html" %}
|
|
|
|
{% block head_title %}
|
|
| Dashboard
|
|
{% endblock %}
|
|
|
|
{% block normal_layout %}
|
|
{% include "layout/header.html" %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="page-header page-header-bleed-right">
|
|
<h2>Dashboard</h2>
|
|
</div>
|
|
<h4>Overview</h4>
|
|
<div class="row">
|
|
<div class="frequency" id="allCharts">
|
|
<h2 class='bg-info'>No data available</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block body_js %}
|
|
<script src="/static/js/charts.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
var chartID = "#allCharts";
|
|
var chartdiv = $(chartID);
|
|
|
|
var mainchart = c3.generate({
|
|
axis: {
|
|
x: {
|
|
show: true,
|
|
type: 'timeseries',
|
|
tick: {
|
|
format: '%Y-%m-%d',
|
|
culling: false
|
|
}
|
|
},
|
|
y: {
|
|
show: false
|
|
}
|
|
},
|
|
bindto: chartID,
|
|
color: {
|
|
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
|
|
},
|
|
data: {
|
|
columns: [],
|
|
x: 'date',
|
|
type: 'bar'
|
|
},
|
|
bar: {
|
|
width: {
|
|
ratio: 0.9
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
size: {
|
|
height: 120
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: '/event/dashboard/',
|
|
dataType: 'json'
|
|
})
|
|
.success(function(data) {
|
|
if (data.groups.length === 1 && data.columns.length === 1) {
|
|
mainchart.destroy();
|
|
return;
|
|
}
|
|
mainchart.load({
|
|
columns: data.columns,
|
|
groups: data.groups
|
|
});
|
|
})
|
|
.fail(function() {
|
|
mainchart.destroy();
|
|
chartdiv.html("<h2 class='bg-warning'>Cannot load chart data</h2>");
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|