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