forked from sborsay/Serverless-IoT-on-AWS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
GoogleCharts_CSV.html
76 lines (57 loc) · 2.29 KB
/
GoogleCharts_CSV.html
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
<!DOCTYPE html>
<!–– This project by Stephen Borsay www.device2cloud.net ––>
<!–– Check out my AWS IoT Courses on Udemy https://www.udemy.com ––>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="chart_div"></div>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get( "https://<YOUR_DATA_BUCKET>.s3-<YOUR_REGION>.amazonaws.com/<YOUR-FOLDER>/<YOUR-DATA_OBJECT>.csv", function( data ) {
//alert( "Data Loaded: " + data );
var temperature = data.match( /(?<=^")[0-9.]+/gm );
var humidity = data.match( /(?<=^"\d\d",")[0-9.]+/gm );
var timestamps = data.match( /(?<=^"\d\d","\d\d",")[0-9.]+/gm )
//use a string literal to output our values before graphing
alert(`Values in our temerature array to grap ${temperature}`);
alert(`Valuesin our humidity array to graph ${humidity}`);
alert(`Values in our timestamp array to graph ${timestamps}`);
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'time');
data.addColumn('number', 'temperature');
data.addColumn('number', 'humidity');
//the followig three loops convert our strings in into numbers
for(var ts=0; ts<timestamps.length;ts++) timestamps[ts] = parseInt(timestamps[ts], 10);
for(var tem=0; tem<temperature.length;tem++) temperature[tem] = parseInt(temperature[tem], 10);
for(var hum=0; hum<humidity.length;hum++) humidity[hum] = parseInt(humidity[hum], 10);
for (i = 0; i < timestamps.length; i++) {
data.addRows([
[timestamps[i],temperature[i],humidity[i]]
]);
}
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Environmental Data'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
});
});
});
</script>
</head>
<body>
<img src="YOUR_IMAGE.jpg" alt="Your own IoT AWS Project">
<br>
<button>Press to display our most recent data</button>
</body>
</html>