PHP_SMART_HOME_V3/www/app/models/managers/ChartManager.php

<?php
class ChartScale{
	const HOUR = 'info';
	const DAY = 'warning';
	const MONTH = 'warning';
	const YEAR = 'error';
}
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>';
	}

	function generateChartData(int $subDeviceId, string $periode, string $groupBy) {
		$chartData = [];

		$subDevice = SubDeviceManager::getSubDevice($subDeviceId);
		$records = RecordManager::getAllRecordForGraph($subDeviceId, $periode, $groupBy);

		$array = array_column($records, 'value');
		$arrayTime = array_column($records, 'time');
		$output = [];

		foreach ($array as $key => $value) {
			$output[$key]['y'] = $value;
			if ($subDevice['type'] == 'light'){
				if ($value > 810){
					$output[$key]['y'] = 1;
				} else {
					$output[$key]['y'] = 0;
				}
			}

			$timeStamp = new DateTime($arrayTime[$key]);
			$output[$key]['t'] = $timeStamp->format("Y-m-d") . 'T' . $timeStamp->format("H:i:s") . 'Z';
		}

		$data = json_encode($output);
		$data = $output;
		$arrayTimeStamps = array_column($records, 'time');
		foreach ($arrayTimeStamps as $key => $value) {
			$arrayTimeStamps[$key] = (new DateTime($value))->format(TIMEFORMAT);
		}

		$chartData['graphRange'] = RANGES[$subDevice['type']];
		$chartData['graphType'] = RANGES[$subDevice['type']]['graph'];
		$chartData['graphData'] = $data;

		return $chartData;
	}
}
?>