<!DOCTYPE html>
<html lang="cs">
	<head>
		<meta charset="utf-8">
		<title>Temperature control and monitoring system</title>
	</head>
	<body><center>
		<header><h1>Temperature control and monitoring system</h1></header>
		<main>
			<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
			<script>
		  		google.charts.load('current', {'packages':['line', 'corechart']});
				google.charts.setOnLoadCallback(drawChart);

				function drawChart() {
				var chartDiv = document.getElementById('chart_div');
				var data = new google.visualization.DataTable();
				data.addColumn('datetime', 'DateTime');
				data.addColumn('number', "Temp_amb");
				data.addColumn('number', "Temp_in_up");
				data.addColumn('number', "Temp_in_dwn");
				data.addColumn('number', "Temp_set");
				data.addColumn('number', "Temp_set_up");
				data.addColumn('number', "Temp_set_dwn");
				data.addColumn('number', "I_heat");
				data.addColumn('number', "I_cool");
				data.addColumn('number', "Doors_open");


				data.addRows([
					{% for record in data_log %}
					[new Date({{ record[9] }},{{ record[10] }}, {{ record[11] }},{{ record[12] }},{{ record[13] }},{{ record[14] }}),{{ record[0] }},{{ record[1] }},{{ record[2] }},{{ record[3] }},{{ record[4] }},{{ record[5] }},{{ record[6] }},{{ record[7] }},{{ record[8] }}], 
					{% endfor %}
				]);


				var classicOptions = {
					height: 750,

			  		series: {
			          0: {targetAxisIndex: 0},
			          1: {targetAxisIndex: 0},
			          2: {targetAxisIndex: 0},
			          3: {targetAxisIndex: 0},
			          4: {targetAxisIndex: 0},
			          5: {targetAxisIndex: 0},
			          6: {targetAxisIndex: 1},
			          7: {targetAxisIndex: 1},
			          8: {targetAxisIndex: 1},
			        },
			        vAxes: {
			          0: {title: 'Temperature [°C]'},
			          1: {title: 'Current [A]'}
			        },
			        hAxis: {
			          format : 'yyyy/MM/dd hh:mm:ss'
			        },
			        vAxis: {

			        }
			    };

			    var classicChart = new google.visualization.LineChart(chartDiv);
			    classicChart.draw(data, classicOptions);
			    }
		  	</script>
			<div id="chart_div"></div>   
		</main>
		</center>
	</body>
</html>
