125 lines
3.0 KiB
PHP
125 lines
3.0 KiB
PHP
|
<?php
|
||
|
|
include('parts/header.php');
|
||
|
|
?>
|
||
|
|
|
||
|
|
<!-- Page Heading -->
|
||
|
|
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
||
|
|
<h1 class="h3 mb-0 text-gray-800">Orari</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Content Row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
|
||
|
|
<!-- Lista dispositivi -->
|
||
|
|
<div class="col-lg-9">
|
||
|
|
<div class="card shadow mb-4">
|
||
|
|
<div class="card-header py-3">
|
||
|
|
<h6 class="m-0 font-weight-bold text-primary">Dispositivi per orario</h6>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="chart-bar">
|
||
|
|
<canvas id="chart-giorni"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$('#menu-orari').addClass('active');
|
||
|
|
|
||
|
|
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
|
||
|
|
Chart.defaults.global.defaultFontColor = '#858796';
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// Bar Chart Example
|
||
|
|
var ctx = document.getElementById("chart-giorni");
|
||
|
|
var myBarChart = new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: ["January", "February", "March", "April", "May", "June"],
|
||
|
|
datasets: [{
|
||
|
|
label: "Revenue",
|
||
|
|
backgroundColor: "#4e73df",
|
||
|
|
hoverBackgroundColor: "#2e59d9",
|
||
|
|
borderColor: "#4e73df",
|
||
|
|
data: [4215, 5312, 6251, 7841, 9821, 14984],
|
||
|
|
}],
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
layout: {
|
||
|
|
padding: {
|
||
|
|
left: 10,
|
||
|
|
right: 25,
|
||
|
|
top: 25,
|
||
|
|
bottom: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
xAxes: [{
|
||
|
|
time: {
|
||
|
|
unit: 'month'
|
||
|
|
},
|
||
|
|
gridLines: {
|
||
|
|
display: false,
|
||
|
|
drawBorder: false
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
maxTicksLimit: 6
|
||
|
|
},
|
||
|
|
maxBarThickness: 25,
|
||
|
|
}],
|
||
|
|
yAxes: [{
|
||
|
|
ticks: {
|
||
|
|
min: 0,
|
||
|
|
max: 15000,
|
||
|
|
maxTicksLimit: 5,
|
||
|
|
padding: 10,
|
||
|
|
// Include a dollar sign in the ticks
|
||
|
|
callback: function(value, index, values) {
|
||
|
|
return '$' + number_format(value);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
gridLines: {
|
||
|
|
color: "rgb(234, 236, 244)",
|
||
|
|
zeroLineColor: "rgb(234, 236, 244)",
|
||
|
|
drawBorder: false,
|
||
|
|
borderDash: [2],
|
||
|
|
zeroLineBorderDash: [2]
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
display: false
|
||
|
|
},
|
||
|
|
tooltips: {
|
||
|
|
titleMarginBottom: 10,
|
||
|
|
titleFontColor: '#6e707e',
|
||
|
|
titleFontSize: 14,
|
||
|
|
backgroundColor: "rgb(255,255,255)",
|
||
|
|
bodyFontColor: "#858796",
|
||
|
|
borderColor: '#dddfeb',
|
||
|
|
borderWidth: 1,
|
||
|
|
xPadding: 15,
|
||
|
|
yPadding: 15,
|
||
|
|
displayColors: false,
|
||
|
|
caretPadding: 10,
|
||
|
|
callbacks: {
|
||
|
|
label: function(tooltipItem, chart) {
|
||
|
|
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
|
||
|
|
return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<?php
|
||
|
|
include('parts/footer.php');
|