Add history graph to Devices and presence (in development)

- A change in the database is necessary
- change scan-script (pialert.py) was changed to write more data into the database
- update Chart.js to 2.9.4
This commit is contained in:
leiweibau
2022-07-12 23:52:58 +02:00
parent 49748aa564
commit c12fccb2f7
5 changed files with 16230 additions and 3648 deletions

View File

@@ -9,6 +9,7 @@
<?php
require 'php/templates/header.php';
require 'php/templates/graph.php';
?>
<!-- Page ------------------------------------------------------------------ -->
@@ -24,6 +25,60 @@
<!-- Main content ---------------------------------------------------------- -->
<section class="content">
<script src="lib/AdminLTE/bower_components/chart.js/Chart.js"></script>
<canvas id="myChart" style="width:100%; height: 150px; margin-bottom: 15px;"></canvas>
<script>
var xValues = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
label: 'All Devices',
data: [<?php pia_graph_devices_data($Pia_Graph_Device_All); ?>],
borderColor: "#00c0ef",
fill: false,
pointStyle: 'circle',
pointRadius: 2,
pointHoverRadius: 2
},{
label: 'Online Devices',
data: [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>],
borderColor: "#00a65a",
fill: false,
pointStyle: 'circle',
pointRadius: 2,
pointHoverRadius: 2
}, {
label: 'Offline/Down Devices',
data: [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>],
borderColor: "#dd4b39",
fill: false,
pointStyle: 'circle',
pointRadius: 2,
pointHoverRadius: 2
}]
},
options: {
legend: {display: false},
scales: {
yAxes: [{
ticks: {
beginAtZero:false,
fontColor: '#B0B0B0'
},
}],
xAxes: [{
ticks: {
fontColor: '#B0B0B0'
},
}]
}
}
});
</script>
<!-- top small box 1 ------------------------------------------------------- -->
<div class="row">

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,25 @@
<?php
$Pia_Graph_Device_Time = array();
$Pia_Graph_Device_All = array();
$Pia_Graph_Device_Online = array();
$Pia_Graph_Device_Down = array();
$db = new SQLite3('../db/pialert.db');
$results = $db->query('SELECT * FROM Online_History ORDER BY Scan_Date DESC LIMIT 40');
while ($row = $results->fetchArray()) {
$time_raw = explode(' ', $row['Scan_Date']);
$time = explode(':', $time_raw[1]);
array_push($Pia_Graph_Device_Time, $time[0].':'.$time[1]);
array_push($Pia_Graph_Device_Down, $row['Down_Devices']);
array_push($Pia_Graph_Device_All, $row['All_Devices']);
array_push($Pia_Graph_Device_Online, $row['Online_Devices']);
}
function pia_graph_devices_data($Pia_Graph_Array) {
$Pia_Graph_Array_rev = array_reverse($Pia_Graph_Array);
foreach ($Pia_Graph_Array_rev as $result) {
echo "'".$result."'";
echo ",";
}
}
?>

View File

@@ -9,6 +9,7 @@
<?php
require 'php/templates/header.php';
require 'php/templates/graph.php';
?>
<!-- Page ------------------------------------------------------------------ -->
@@ -24,6 +25,60 @@
<!-- Main content ---------------------------------------------------------- -->
<section class="content">
<script src="lib/AdminLTE/bower_components/chart.js/Chart.js"></script>
<canvas id="myChart" style="width:100%; height: 150px; margin-bottom: 15px;"></canvas>
<script>
var xValues = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
label: 'All Devices',
data: [<?php pia_graph_devices_data($Pia_Graph_Device_All); ?>],
borderColor: "#00c0ef",
fill: false,
pointStyle: 'circle',
pointRadius: 2,
pointHoverRadius: 2
},{
label: 'Online Devices',
data: [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>],
borderColor: "#00a65a",
fill: false,
pointStyle: 'circle',
pointRadius: 2,
pointHoverRadius: 2
}, {
label: 'Offline/Down Devices',
data: [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>],
borderColor: "#dd4b39",
fill: false,
pointStyle: 'circle',
pointRadius: 2,
pointHoverRadius: 2
}]
},
options: {
legend: {display: false},
scales: {
yAxes: [{
ticks: {
beginAtZero:false,
fontColor: '#B0B0B0'
},
}],
xAxes: [{
ticks: {
fontColor: '#B0B0B0'
},
}]
}
}
});
</script>
<!-- top small box 1 ------------------------------------------------------- -->
<div class="row">