This commit is contained in:
/jedi/ 2019-02-21 22:29:46 +01:00 committed by Katharina
parent 6e6e695bb6
commit 03655c579b
4 changed files with 253 additions and 6 deletions

View file

@ -88,15 +88,26 @@ $stats = get_stats();
</div>
<!-- Area Chart Example-->
<!--div class="card mb-3">
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-chart-area"></i>
Area Chart Example</div>
<div class="card-body">
<canvas id="myAreaChart" width="100%" height="30"></canvas>
<canvas id="frequencygraph" width="100%" height="30"></canvas>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div-->
</div>
<!-- Area Chart Example-->
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-chart-area"></i>
Area Chart Example</div>
<div class="card-body">
<canvas id="successchart" width="100%" height="30"></canvas>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
</div>
<!-- /.container-fluid -->
@ -117,6 +128,87 @@ $stats = get_stats();
<script src="js/sb-admin.min.js"></script>
<!-- Demo scripts for this page-->
<script src="js/demo/chart-area-demo.js"></script>
<!--script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-bar-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script-->
<?php
foreach ($stats["graph"] as $p){
$labels[] = "Tag ".($p["d"]-26)." ".$p["h"].":00";
$data[] = $p["c"];
}
?>
<script>
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Area Chart Example
var ctx = document.getElementById("frequencygraph");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: <?php echo json_encode($labels); ?>,
datasets: [{
label: "New Items",
lineTension: 0.3,
backgroundColor: "rgba(2,117,216,0.2)",
borderColor: "rgba(2,117,216,1)",
pointRadius: 5,
pointBackgroundColor: "rgba(2,117,216,1)",
pointBorderColor: "rgba(255,255,255,0.8)",
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(2,117,216,1)",
pointHitRadius: 50,
pointBorderWidth: 2,
data: <?php echo json_encode($data); ?>,
}],
},
options: {
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false
}
}],
yAxes: [{
ticks: {
min: 0,
max: 30,
maxTicksLimit: 5
},
gridLines: {
color: "rgba(0, 0, 0, .125)",
}
}],
},
legend: {
display: false
}
}
});
</script>
<script>
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
// Pie Chart Example
var ctx = document.getElementById("successchart");
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Lost", "Found", "Matched"],
datasets: [{
data: <?php echo json_encode(array($stats["lost"],$stats["found"],$stats["match"])); ?>,
backgroundColor: ['#ffc107', '#007bff', '#28a745', '#dc3545'],
}],
},
});
</script>