Untitled

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="refresh" content="30" >
    <title>Sledování produktivity stroje</title>
    <link rel="stylesheet" href="jquery-ui.css">
    <link rel="icon" type="image/x-icon" href="//192.168.31.94/evidence_tpv/img/favicon.ico" />
    <script src="jquery-1.12.4.js"></script>
    <script src="jquery-ui.js"></script>
	<script src="utils.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
	<script src="chart.js"></script>
		<style type="text/css">
			body {
				background: #FFFFFF;
				padding: 16px;
			}

			.datum {
				margin: auto;
				width: 50%;
			}

			canvas {
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
			}
		</style>
		<script>
			$( function() {
				$("#date").datepicker({
				dateFormat: "yy-mm-dd",
				numberOfMonths: 3,
				minDate: "-6m",
				maxDate: "+0m",
				firstDay: 1,
				dayNamesMin: ["Ne", "Po", "Út", "St", "Čt", "Pá", "So"],
				monthNames: ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"],
				showAnim: "clip",
				onSelect: function(dateText, inst){
					window.location.href = "?date="+dateText;
				}
				});
			} );
		</script>
	</head>
	<body>
	<pre>
		<?php
			$date = isset($_GET["date"]) ? $_GET["date"] : date("Y-m-d");
		?>
		<div id="datum" class="datum"> Datum: <input type="text" id="date" class="date" size="30" value="<?php echo $date;?>">  </div>
		<?php
			$servername = "localhost";
			$username = "weiss";
			$password = "Nad+699";
			$dbname = "tpv";
			$y = 0;
			$yTrans = 0;

			// Create connection
			$conn = new mysqli($servername, $username, $password, $dbname);
			$sensors = $conn->query("SELECT sensor_id FROM produktivita_stroje group by sensor_id");
			while($rows = $sensors->fetch_assoc()) {
				foreach($rows as $sensor){
					$sql = "SELECT * FROM produktivita_stroje WHERE sensor_id = '$sensor' and input_datetime LIKE '%$date%'";
					$result = $conn->query($sql);
					while ($row = $result->fetch_assoc()) {
                        $dateFormat = strtotime($row["input_datetime"]);
                        $dateFormat = new DateTime("@$dateFormat");
                        $data[] = [
                            "t" => strtotime($row["input_datetime"]),
                            "y" => $y
                        ];
                        $labels[] = [
                            "t" => $dateFormat
                        ];
						$y = $y+(strtotime($row["output_datetime"]) - strtotime($row["input_datetime"]));
						$yTrans = new DateTime("@$y");
					}
					echo '<div class="chart-container">
							<canvas id="graph_'.$sensor.'"></canvas>
						</div>';
				}
            }
		?>
		</pre>

		<div style="width:1000px">
			<canvas id="chart1"></canvas>
		</div>
		<script>
			var data = <?php echo json_encode($data);?>;
            var labels = <?php echo json_encode($labels);?>;

			var ctx = document.getElementById('chart1').getContext('2d');
			ctx.canvas.width = 1000;
			ctx.canvas.height = 300;

			var color = Chart.helpers.color;
			var cfg = {
				type: 'bar',
				data: {
					labels: labels,
					datasets: [{
						label: 'Průběh procesu',
						backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
						borderColor: window.chartColors.red,
						data: data,
						type: 'line',
						pointRadius: 0.5,
						fill: false,
						lineTension: 0,
						borderWidth: 2
					}]
				},
				options: {
					scales: {
						xAxes: [{
							type: 'time',
							distribution: 'series',
							ticks: {
								source: 'labels'
                            },
                            time: {
                                unit: 'hour'
                            }
						}],
						yAxes: [{
							scaleLabel: {
								type: 'time',
								display: true,
								labelString: 'Čas stroje (s)'
							}
						}]
					}
				}
			};
			var chart = new Chart(ctx, cfg);
		</script>
	</body>
</html>