Scribd
Upload
11 views4 pages

Document 3

The document contains charts and tables summarizing supply inventory and supply requests from a database. It includes: - Pie charts showing the number of supply records and request records - A scatter plot comparing inventory levels to request amounts - A line chart overlaying trends of average request amounts and inventory levels

Uploaded by

Quezon Medical Center Administrative Office
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views4 pages

Document 3

The document contains charts and tables summarizing supply inventory and supply requests from a database. It includes: - Pie charts showing the number of supply records and request records - A scatter plot comparing inventory levels to request amounts - A line chart overlaying trends of average request amounts and inventory levels

Uploaded by

Quezon Medical Center Administrative Office
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<div class="card card-statistic-1">

<div class="card-icon bg-warning">


<i class="fas fa-user-tie"></i>
</div>
<div class="card-wrap">
<div class="card-header">
<h4><a href="#">Supplies</a></h4>
</div>
<div class="card-body">
<?php
$res=mysqli_query($link, "select * from sup");
$row=mysqli_num_rows($res);
echo $row;
?>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-12">
<div class="card card-statistic-1">
<div class="card-icon bg-danger">
<i class="fas fa-people-carry"></i>
</div>
<div class="card-wrap">
<div class="card-header">
<h4><a href="#">Supplies Request</h4>
</div>
<div class="card-body">
<?php
$res=mysqli_query($link, "select * from sup_req");
$row=mysqli_num_rows($res);
echo $row;
?>
</div>
</div>
</div>
</div>
</div>
<h4>Supply Request Vs. Inventory</h4>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/regression/1.3.0/
regression.min.js"></script>
<div class="row">
<div id="myPlot" style="width:100%;max-width:100%">
</div>
</div>

<script>
var xArray = <?php echo json_encode($inventory);?>;
var yArray = <?php echo json_encode($request); ?>;

var data = [
{x:xArray, y:yArray, mode:"markers"},
{x:[1, <?php $inventory2=mysqli_query($link, "select sum(quantity) as quantity
from sup_req WHERE status=5");
$inv2=mysqli_fetch_assoc($inventory2);
echo $inv2["quantity"]; ?>], y:[1, <?php
$request2=mysqli_query($link, "select * from sup_req WHERE status=2");
$req1=mysqli_num_rows($request2);
echo $req1;
?>], mode:"line"},
];

var layout = {
xaxis: {range: [-1, <?php $inventory2=mysqli_query($link, "select sum(quantity)
as quantity from sup_req WHERE status=5");
$inv2=mysqli_fetch_assoc($inventory2);
echo $inv2["quantity"]; ?>], title: "Inventory"},
yaxis: {range: [-1, <?php
$request2=mysqli_query($link, "select * from sup_req WHERE status=2");
$req1=mysqli_num_rows($request2);
echo $req1;
?>], title: "Supplies Request"},
title: "Supplies Request Vs. Inventory"
};

Plotly.newPlot("myPlot", data, layout);


</script>
<div class="row">
<div class="lineChartContainer">
<canvas id="lineChart"></canvas>
</div>
<style>
.lineChartContainer {
height: 500px;
width: 100%;
padding: 20px 5px;
background-color: white;
}

</style>
</div>

<script>var resultLineChart = {
"series": ["Supply Request", "Number of inventory", "Trend curve of the average
number of request", "Trendline of the number of inventory"],
"labels":
<?php echo json_encode($data); ?>
,
"data": [
<?php echo json_encode($request); ?>,
<?php echo json_encode($inventory); ?>,
]
};
const getRegression = (data, degre) => {
degre = degre || 2;
let dataRegression = [];
data.forEach((element, index) => dataRegression.push([index + 1, element]));

let resultRegression = [];


regression('linear', dataRegression, degre).points.forEach((element) =>
resultRegression.push(Math.ceil(element[1] * 100) / 100)
);
return resultRegression;
};
let reportsRegression = getRegression(resultLineChart.data[0],4);
resultLineChart.data.push([]);
reportsRegression.forEach(function(item) {
resultLineChart.data[2].push(item)
});

let commitsRegression = getRegression(resultLineChart.data[1], 3);


resultLineChart.data.push([]);
commitsRegression.forEach(function(item) {
resultLineChart.data[3].push(item)
});

var lineChartData = {
labels: resultLineChart.labels,
datasets: [{
// Nombre moyen de reports par correction
label: resultLineChart.series[0],
backgroundColor: "rgba(255, 108, 110, 0.1)",
borderColor: "rgba(255, 108, 110, 1)",
pointBackgroundColor: "rgba(255, 108, 110, 0.5)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: "rgba(255, 108, 110, 0.5)",
pointBorderWidth: 1,
yAxisID: 'y-axis-1',
data: resultLineChart.data[0]
}, {
label: resultLineChart.series[1],
backgroundColor: "rgba(50, 155, 255, 0.2)",
borderColor: "rgba(50, 155, 255, 1)",
pointBackgroundColor: "rgba(50, 155, 255, 0.5)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: "rgba(50, 155, 255, 0.5)",
pointBorderWidth: 1,
yAxisID: 'y-axis-2',
data: resultLineChart.data[1]
}, {
// Régression linéaire nb moyen de reports
label: resultLineChart.series[2],
fill: false,

You might also like