Thinkspeak battery monitor
From emboxit
Create new channel
- Using all 8 available fields
Plugin edit
<html>
<head>
<title>Google Gauge - ThingSpeak</title>
%%PLUGIN_CSS%%
%%PLUGIN_JAVASCRIPT%%
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
Plugin CSS
<style type="text/css">
body { background-color: #ddd; }
</style>
Plugin JavaScript
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
var chart;
var charts;
var data;
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(initChart);
function displayData(point) {
data.setValue(0, 0, 'Battery');
data.setValue(0, 1, point);
chart.draw(data, options);
}
function loadData() {
// variable for the data point
var p;
$.getJSON('https://api.thingspeak.com/channels/7762/feed/last.json?callback=?', function(data) {
// get the data point
p = data.field1;
if (p)
{
p = Math.round((p / 1.023) * 1.00);
displayData(p);
}
});
}
function initChart() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(1);
chart = new google.visualization.Gauge(document.getElementById('chart_div'));
options = {width: 300, height: 300, redFrom: 15, redTo: 16,
greenFrom:11.5, greenTo: 15, minorTicks: 10, max:16, min:10, yellowFrom: 10, yellowTo: 11.5};
loadData();
setInterval('loadData()', 150);
}
</script>
Google Gauge
Update
- Updating field1 to value 11
http://api.thingspeak.com/update?key=VXNFVK24YLRC5O74&field1=11
