This will run on the Agent side. You don’t need any Imp code to test. This will display a 2 line graph using 2 of your streams all you need to change is the Stream Name and add your API key and Feed Id. There is also an example of just displaying the xively PNG graph on the page, just uncomment those 2 lines to see those graphs.
`
Stream1Name <- “Your_Stream_Name_1”;
Stream2Name <- “Your_Stream_Name_2”;
stream1 <- null;
stream2 <- null;
htmlresp <- “”;
const FEED_ID = “YOUR_FEED_ID”;
const API_KEY = “YOUR_API_KEY”;
http.onrequest(function(req, resp) {
if (req.body == “”){
gethtmlresponse();
resp.send(200, htmlresp);//send this if just site was accessed and no requests
}
});
function gethtmlresponse(){
//Google Line Chart
local T1Data = blob(644);
local T2Data = blob(644);
getStreamData(FEED_ID)
local cnt = 0;
foreach(datapoint in stream1.datapoints) {
T1Data.writen(datapoint.value.tofloat(),‘f’);
cnt++;
//server.log(datapoint.value.tofloat());
}
foreach(datapoint in stream2.datapoints) {
T2Data.writen(datapoint.value.tofloat(),‘f’);
//server.log(datapoint.value.tofloat());
}
server.log("Number of Data Points: " + cnt);
T1Data.seek(0,‘b’);
T2Data.seek(0,‘b’);
htmlresp = “\r
”;
htmlresp += “\r
”;
htmlresp += “\r
”;
//from google chart example for line chart
htmlresp += “<script type=“text/javascript” src=“https://www.google.com/jsapi”>\r
”;
htmlresp += “<script type=“text/javascript”>\r
”;
htmlresp += “google.load(“visualization”, “1”, {packages:[“corechart”]});\r
”;
htmlresp += “google.setOnLoadCallback(drawChart);\r
”;
htmlresp += “function drawChart() {\r
”;
htmlresp += “var data = google.visualization.arrayToDataTable([\r
”;
htmlresp += “[‘Count’, '” + Stream1Name + “’, '” + Stream2Name + “’],\r
”;
local dt = 6.0;
local dtm = “”;
local t = 0;
for (t = 0; t < cnt; t++){
try{
htmlresp += “[’” + (cnt - t).tostring() + "’, " + T1Data.readn(‘f’) + ", " + T2Data.readn(‘f’) + “],\r
”;
}
catch(e){
break;
}
}
htmlresp += “]);\r
”;
htmlresp += “var options = {\r
”;
//htmlresp += “title: ‘Graph Title’,curveType: ‘function’,legend: { position: ‘bottom’ }};\r
”;
htmlresp += “title: ‘Graph Title’,”;
htmlresp += “curveType: ‘function’,”;
//htmlresp += “chartArea:{left:10,top:10,width:‘100%’,height:‘500’}”;
htmlresp += “};\r
”;
htmlresp += “var chart = new google.visualization.LineChart(document.getElementById(‘chart_div’));\r
”;
htmlresp += “chart.draw(data, options);\r
”;
htmlresp += “}\r
”;
htmlresp += “\r
”;
htmlresp += “\r
”;
//display google chart with 2 steams on 1 chart
htmlresp += “<div id=“chart_div”>\r
”
//get Xively png chart for each stream if you want
//htmlresp += “<img src=“https://api.xively.com/v2/feeds/” + FEED_ID + “/datastreams/” + Stream1Name + “.png?c=2188c5&g=true&t=%22” + Stream1Name + “%22&b=true&scale=manual&min=-25&max=100&h=200”>
”;
//htmlresp += “<img src=“https://api.xively.com/v2/feeds/” + FEED_ID + “/datastreams/” + Stream2Name + “.png?c=FFCC33&g=true&t=%22” + Stream2Name + “%22&b=true&scale=manual&min=-25&max=100&h=200”>
”;
htmlresp += “\r
”;
htmlresp += “\r
”;
}
function getStreamData(feedID){
local trigger_url = "https://api.xively.com/v2/feeds/" + FEED_ID + ".json?duration=6hours&interval=0&limit=600";
//may need to play with the limit=600 number to make sure you are getting all the available reading for last 6 hrs.
local req = http.get(trigger_url, {"X-ApiKey":API_KEY, "User-Agent":"xively-Imp-Lib/1.0"}); //add headers
local res = req.sendsync(); //send request
//server.log(res.body);
local data = http.jsondecode(res.body);
local dataStreams = data.datastreams;
foreach(s in dataStreams) {
if (s.id == Stream1Name) {
server.log("Xively Stream: " + s.id + " found.");
stream1 = s;
}
if (s.id == Stream2Name) {
server.log("Xively Stream: " + s.id + " found.");
stream2 = s;
}
}
return;
};`