rw950431/plugin

## plugin
<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>
	<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>