You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.7 KiB
103 lines
2.7 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- EXTERNAL LIBS-->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
<script src="https://www.google.com/jsapi"></script>
|
|
|
|
<!-- EXAMPLE SCRIPT -->
|
|
<script>
|
|
|
|
|
|
|
|
// onload callback
|
|
function drawChart() {
|
|
|
|
// var volt, amp;
|
|
|
|
var public_key = '2J8dEzMvpGhoAXg3zy6E';
|
|
|
|
// JSONP request
|
|
var jsonData = $.ajax({
|
|
url: 'https://data.sparkfun.com/output/' + public_key + '.json',
|
|
data: {
|
|
'gte': {
|
|
// 'timestamp': 'now - 1 day',
|
|
'timestamp': 'now - 186 hour',
|
|
'current': 0.05,
|
|
'voltage': 200,
|
|
},
|
|
'lte': {
|
|
'timestamp': 'now - 174 hour',
|
|
},
|
|
},
|
|
cache: true,
|
|
dataType: 'jsonp',
|
|
});
|
|
|
|
jsonData.done(function (results) {
|
|
|
|
var data = new google.visualization.DataTable();
|
|
|
|
data.addColumn('datetime', 'Time');
|
|
data.addColumn('number', 'RMS Voltage [V]');
|
|
data.addColumn('number', 'RMS Current [A]');
|
|
|
|
$.each(results, function (i, row) {
|
|
var date = (new Date(row.timestamp));
|
|
var voltage = parseFloat(row.voltage);
|
|
var current = parseFloat(row.current);
|
|
|
|
// The last measurement
|
|
if (i == 0) {
|
|
var va = voltage * current;
|
|
// console.log(voltage + " V; " + current + " A; " + va + " VA; @ " + date);
|
|
$('#va').html("Last measured apparent power: <strong>" + va.toFixed(4) + " VA</strong>");
|
|
}
|
|
|
|
data.addRow([date, voltage, current]);
|
|
});
|
|
|
|
var chart = new google.visualization.LineChart($('#chart').get(0));
|
|
|
|
chart.draw(data, {
|
|
// title: 'ESP8266 Thing Example Stream',
|
|
hAxis: {format: 'HH:mm:ss'},
|
|
vAxes:[
|
|
{title: 'Voltage (blue)', maxValue: 255}, // Left axis
|
|
{title: 'Current (red)'} // Right axis
|
|
],
|
|
series:[
|
|
{targetAxisIndex:0},
|
|
{targetAxisIndex:1}
|
|
],
|
|
});
|
|
|
|
$('#relay').visible();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
// load chart lib
|
|
google.load('visualization', '1', {
|
|
packages: ['corechart']
|
|
});
|
|
|
|
// call drawChart once google charts is loaded
|
|
google.setOnLoadCallback(drawChart);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="chart" style="width: 100%;"></div>
|
|
<div id="va" style="font-size: 3em; margin: 0 100px; "></div>
|
|
<div id="relay" style="visibility: hidden; font-size: 2em; margin: 50px 100px; ">
|
|
<stron>Relay: </stron><input type="button" value="Turn OFF" />
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|