PHP_SMART_HOME_V3/class/ChartManager.php

87 lines
2.1 KiB
PHP

<?php
class ChartManager{
function generateChart($data, $min = 0, $max = 100)
{
echo '<br>Aktuální Hodnota: '.$data[0]['value'];
echo "<style>
.sloupec {
border-top: solid 2px red;
}
</style>";
echo '<div class=graph>';
echo '<div class="posuv " graf-max="'.$max.'" graf-min='.$min.'>';
for ($valuesRow = 0; $valuesRow < count($data); $valuesRow++) {
$row = $data[$valuesRow];
echo '<div class="sloupec " name="sloupec" value="' . $row['value'] . '" data-toggle="tooltip" title=""></div>';
}
echo '</div>';
echo '</div>';
echo '<script src="./include/js/chartDrwer.js"></script>';
echo 'Poslední Update: ';
echo '<style>
.graph {
width: 100%;
overflow: hidden;
margin-top: auto;
}
.posuv {
display: flex;
height: 200px;
background-image: url(./img/graph.png);
padding: 20px;
background-repeat: repeat;
border-bottom: 1px solid black;
}
.sloupec {
border-top: solid 2px blue;
background-color: grey;
float: left;
margin: auto 0 0;
display: inline-block;
width: 1%;
}
</style>
<script>
var posuvList = document.getElementsByClassName("posuv");
var maxHeight = posuvList[0].clientHeight;
for (i = 0; i < posuvList.length; i++) {
var maxPx = 0;
var grafMax = Number(posuvList[i].getAttribute("graf-max")); //100%
var grafMin = Number(posuvList[i].getAttribute("graf-min")); //0%
if (grafMin == 0 && grafMax == 100) {
var onePercent = 1;
} else {
var stepsBetWene = grafMax;
if (grafMin !== 0) {
if (grafMin < 0) {
stepsBetWene = grafMax + Math.abs(grafMin);
}
if (grafMin > 0) {
stepsBetWene = grafMax - grafMin;
}
}
var onePercent = stepsBetWene / 100;
}
var sloupceList = posuvList[i].querySelectorAll(".sloupec");
for (ai = 0; ai < sloupceList.length; ai++) {
var onePxPercent = maxHeight / 100;
var heightInPercent =
Math.abs(sloupceList[ai].getAttribute("value")) / onePercent;
var outputPx = onePxPercent * heightInPercent;
sloupceList[ai].style.height = outputPx + "px";
}
}
</script>';
}
}
?>