| Server IP : 162.0.232.25 / Your IP : 13.58.180.210 Web Server : LiteSpeed System : Linux premium276.web-hosting.com 4.18.0-513.11.1.lve.el8.x86_64 #1 SMP Thu Jan 18 16:21:02 UTC 2024 x86_64 User : kwacuqig ( 988) PHP Version : 8.2.26 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/kwacuqig/voltify.malawisounds.com/ |
Upload File : |
<?php
include './head.php';
include './header.php';
include './navbar.php';
?>
<!-- Breadcomb area Start-->
<div class="breadcomb-area">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="breadcomb-list">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="breadcomb-wp">
<div class="breadcomb-icon">
<i class="notika-icon notika-bar-chart"></i>
</div>
<div class="breadcomb-ctn">
<h2>Utilisation Table</h2>
<p>Welcome to Voltify Utilisation</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Breadcomb area End-->
<!-- Data Table area Start-->
<div class="data-table-area">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="data-table-list">
<div class="table-responsive">
<table id="data-table-basic" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Meter Number</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
$run = mysqli_query($conn, "SELECT * FROM `customers` ORDER BY `firstname` ASC") or die(mysqli_error($conn));
while ($row = mysqli_fetch_array($run)) {
?>
<tr>
<td><?php echo $row['firstname'] . ' ' . $row['surname']; ?></td>
<td><?php echo $row['meter_number']; ?></td>
<td>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#<?php echo $row['cid']; ?>"><i class="fa fa-eye"></i></a>
<a href="#" class="btn btn-warning"><i class="fa fa-bell"></i></a>
</td>
</tr>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="<?php echo $row['cid']; ?>" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Daily Load Curve</h4>
</div>
<div class="modal-body">
<canvas id="power"></canvas>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Meter Number</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Data Table area End-->
<?php
include './footer.php';
include './scripts.php';
?>
<script>
document.querySelectorAll(".main-menu-area .nav li")[1].classList.add('active')
document.querySelector(".main-menu-area .tab-content #Tables").classList.add('in')
document.querySelector(".main-menu-area .tab-content #Tables").classList.add('active')
document.querySelector("title").innerHTML = "Voltify ~ Utilisation";
window.onload = function() {
loadData();
}
function loadData() {
var url = "./php/read_all.php";
$.getJSON(url, function(data) {
var power = [];
var stamp = [];
for (var a = 0; a < 100; a++) {
power[a] = data['voltify'][(Object.keys(data['voltify']).length) - (a + 1)]['power'];
stamp[a] = data['voltify'][(Object.keys(data['voltify']).length) - (a + 1)]['stamp'];
}
const ctx = document.getElementById('power').getContext('2d');
// const chat1 = new Chart(ctx, {
// type: 'line',
// data: {
// labels: stamp.reverse(),
// datasets: [{
// label: 'Power',
// data: power.reverse(),
// backgroundColor: [
// // 'rgba(51, 153, 255, 0.6)'
// 'transparent'
// ],
// borderColor: [
// // 'rgba(51, 153, 255, 1)'
// 'green'
// ],
// borderWidth: 3
// }]
// },
// options: {
// scales: {
// y: {
// beginAtZero: true
// }
// }
// }
// });
const chat1 = new Chart(ctx, {
type: 'line',
data: {
labels: stamp.reverse(),
datasets: [{
label: 'Power',
data: power.reverse(),
backgroundColor: 'transparent',
borderColor: 'green',
borderWidth: 3,
}]
},
options: {
scales: {
x: [{
type: 'time', // Use a time scale
time: {
unit: 'minute', // Display labels by minute
displayFormats: {
minute: 'HH:mm', // Format for hours and minutes
},
},
position: 'bottom',
ticks: {
maxRotation: 0, // Rotates the labels to 0 degrees (horizontal)
autoSkip: true,
maxTicksLimit: 10, // Set the maximum number of labels to display
},
}],
y: {
beginAtZero: true,
},
},
},
});
})
}
window.setInterval(function() {
loadData();
}, 1000);
</script>