Hey everyone,
I'm attempting to pass live temperature data from a thermistor to a highcharts plot on my agent URL. I was able to use the dynamic web page tutorial (https://electricimp.com/docs/examples/webserver/) to post the current temperature on my site, which I was super pleased with.
I’ve since tried to incorporate the dynamically updated tutorial on Highcharts (http://www.highcharts.com/stock/demo/dynamic-update), which also shows up on my page as long as the data is just the random numbers used in the tutorial. I tried to replace the y-value with savedData.temp, which is what is successfully being pushed and displayed on the site, but no luck.
This is the deep end of the pool for me, so any help would be appreciated.
Here’s my Agent and Device code.
Thanks in advance!
Ben
AGENT CODE
`
#require “Rocky.class.nut:1.3.0”
// GLOBALS
local api = null;
local savedData = null;
// CONSTANTS
const htmlString = @"
Environment Data
Temperature: °C
Location:
From: %s
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script>
var agenturl = '%s';
getState(updateReadout);
$('.update-button button').on('click', getStateInput);
function getStateInput(e){
e.preventDefault();
var place = document.getElementById('location').value;
setLocation(place);
$('#name-form').trigger('reset');
}
function updateReadout(data) {
$('.temp-status span').text(data.temp);
$('.locale-status span').text(data.locale);
setTimeout(function() {
getState(updateReadout);
}, 15000);
}
function getState(callback) {
$.ajax({
url : agenturl + '/state',
type: 'GET',
success : function(response) {
if (callback && ('temp' in response)) {
callback(response);
}
}
});
}
function setLocation(place) {
$.ajax({
url : agenturl + '/location',
type: 'POST',
data: JSON.stringify({ 'location' : place }),
success : function(response) {
if ('locale' in response) {
$('.locale-status span').text(response.locale);
}
}
});
}
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 15000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live Temperature Data'
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i += 1) {
data.push([
time + i * 15000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
}]
});
});
</script>
</body>
// FUNCTIONS
function postReading(reading) {
savedData.temp = format("%.2f", reading.temp);
local result = server.save(savedData);
if (result != 0) server.error(“Could not back up data”);
}
// START OF PROGRAM
// Instantiate objects
api = Rocky();
// Set up the app’s API
api.get("/", function(context) {
// Root request: just return standard web page HTML string
context.send(200, format(htmlString, http.agenturl(), http.agenturl()));
});
api.get("/state", function(context) {
// Request for data from /state endpoint
context.send(200, { temp = savedData.temp, locale = savedData.locale });
});
api.post("/location", function(context) {
// Sensor location string submission at the /location endpoint
local data = http.jsondecode(context.req.rawbody);
if (“location” in data) {
if (data.location != “”) {
savedData.locale = data.location;
context.send(200, { locale = savedData.locale });
local result = server.save(savedData);
if (result != 0) server.error(“Could not back up data”);
return;
}
}
context.send(200, "OK");
});
// Set up the backup data
savedData = {};
savedData.temp <- “TBD”;
savedData.locale <- “Unknown”;
local backup = server.load();
if (backup.len() != 0) {
savedData = backup;
} else {
local result = server.save(savedData);
if (result != 0) server.error(“Could not back up data”);
}
// Register the function to handle data messages from the device
device.on(“reading”, postReading);
server.log(savedData.temp);
`