Last active
February 7, 2018 12:17
-
-
Save rw950431/8815072 to your computer and use it in GitHub Desktop.
Thingspeak plugin to display counter as rate
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
<script type="text/javascript" src="//www.google.com/jsapi"></script> | |
<script type="text/javascript"> | |
google.load('visualization', '1', {packages: ['annotationchart']}); | |
</script> | |
<script type="text/javascript"> | |
scale_factor=1000; // 1000 = units/sec, 60000=units/min etc | |
initial_load=24*6; // number of historical points to load initially | |
feed_id=10042; // which feed | |
fields=[1,2,3]; // fields to include in graph | |
titles=['Rx Pkts','Tx Pkts','Disk sectors written']; //Titles to use for fields | |
function update_data(r) { | |
if (r===undefined) { r=2;}; | |
var has_new_date=false; | |
var url = "https://api.thingspeak.com/channels/"+feed_id+"/feed.json?results="+r; | |
$.getJSON(url + "&callback=?", null, function(thingData) { | |
for (var item in thingData.feeds) { | |
if (item>0) { | |
var curr=new Date(thingData.feeds[item].created_at); | |
var last=new Date(thingData.feeds[item-1].created_at); | |
var num_rows=chartdata.getNumberOfRows(); | |
if (num_rows==0 || curr>chartdata.getValue(num_rows-1,0) ) { | |
d=curr-last; | |
d=d/scale_factor; | |
var new_row=[curr]; | |
for (var x=0; x<fields.length; x++) { | |
var f1=Number(thingData.feeds[item]['field'+fields[x]])-Number(thingData.feeds[item-1]['field'+fields[x]]); | |
if (f1<0 || d<=0) { | |
f1=undefined; | |
} else { | |
f1=f1/d; | |
}; | |
new_row.push(f1); | |
}; | |
chartdata.addRow(new_row); | |
has_new_data=true; | |
}; | |
}; | |
}; | |
if(has_new_data) {chart.draw(chartdata,chart_options);}; | |
}); | |
}; | |
$(document).ready(function() { | |
chartdata = new google.visualization.DataTable(); | |
chartdata.addColumn('datetime','Date'); | |
for (var x=0; x<titles.length; x++) { | |
chartdata.addColumn('number',titles[x]); | |
}; | |
chart_options= { thickness:2, displayZoomButtons:false }; | |
chart=new google.visualization.AnnotationChart(document.getElementById('col_chart')); | |
chart.draw(chartdata,chart_options); | |
update_data(initial_load); | |
setInterval(update_data ,60000); //refresh 60 seconds | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="col_chart" style="width: 420px; height: 240px;"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment