EnergyMeter/index.html at master · fieldhof/EnergyMeter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
<style type ="text/css">
body { 	background-color: #FFFF99;
	font-size: 14px;
	font-family: Verdana;
	margin: auto;
	width: 1000px;}
h1 {	font-size: 100px;
	margin: 0; }
</style>
<body>
<content>
</content>
<div id="chart_div_hour" style="width: 900px; height: 500px;"></div>
<div id="chart_div_day" style="width: 900px; height: 500px;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


<script type="text/javascript" src="javascript/jsapi.js"></script>
<script type="text/javascript">

	google.setOnLoadCallback(function() {
		updateChart("php/gethour.php","chart_div_hour");
		updateChart("php/getday.php","chart_div_day");
		setInterval(function() {
			updateChart("php/gethour.php","chart_div_hour");
			updateChart("php/getday.php","chart_div_day");
		}, 10000);
	});
	google.load("visualization", "1", {packages:["corechart"]});

	$(function() {
		setInterval(update, 10000);
		update();
	});

	function createDate(time) {
		var split1 = time.split(" ");
		var split2 = split1[0].split("-");
		var split3 = split1[1].split(":");

		return new Date(split2[0], split2[1], split2[2], split3[0], split3[1], split3[2]);
	}

	function updateChart(url, elementID) {
		console.log("Load callback");
		var arr = [['Time', 'Consumption', 'Production']];
		$.ajax({
			url: url,
			success: function(output) {
				var tempArr = JSON.parse(output);
				$.each(tempArr, function(index, value) {
					$.each([0, 1, 2], function(index1, value1) {
						delete tempArr[index][value1];
					});
					arr.push([createDate(value.time), parseInt(value.consumption), parseInt(value.production)]);
				});

        			var data = google.visualization.arrayToDataTable(arr);
				var options = {
					title: 'Energiemeter',
					hAxis: {
						title: 'Uur'
					},
					series: [{targetAxisIndex: 1},{targetAxisIndex: 1}],
					vAxes: [
						{},
						{
							title: 'Watt',
							minValue: 10,
							gridlines: {
								count: 8
							}
						}
					],
					colors:['red', 'green']
				}
        			var chart = new google.visualization.AreaChart(document.getElementById(elementID));
        			chart.draw(data, options);
			}
		});

	}

	function update() {
		console.log("updating");
		$("content").load('php/update.php');
	}

</script>

</body>
</html>