I've recently started experimenting sparkfun's phant data server at data.sparkfun.com
The stream creation and data upload are super easy. But I can't say the same about data retrieval. Has anyone got some experience with phant? I'm graphing my data and want to graph last 24 hours and be able to retrieve data with a specific date range. Can't seem to find a way on either. The following javascript embedded web page can only retrieve the last chunk (whatever amount that has not filled up the latest page yet), which is not a fixed length. I imagine this may be done using some JS voodoos to combine two latest pages together in one array. Not a JS shaman. Any hint? Thanks.
My stream:
https://data.sparkfun.com/streams/0lzK7vGNXoiygzGlZbrY
This requests the last chunk with page=1:
var jsonData = $.ajax({
url: 'https://data.sparkfun.com/output/' + public_key + '.json',
data: {page: 1},
If I create two variables one for each page, maybe I can filter through data until it reaches enough, 24 hours? Can someone hint me how to compare timestamp? It seems to be a hot mess in JS, i.e. timestamp formats.
Complete code:
<!DOCTYPE html>
<html>
<head>
<!-- EXTERNAL LIBS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<!-- EXAMPLE SCRIPT -->
<script>
// onload callback
function drawChart() {
var public_key = '0lzK7vGNXoiygzGlZbrY';
// JSONP request
var jsonData = $.ajax({
url: 'https://data.sparkfun.com/output/' + public_key + '.json',
data: {page: 1},
dataType: 'jsonp',
}).done(function (results) {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Temp-1');
data.addColumn('number', 'Temp-2');
$.each(results, function (i, row) {
//if (i>2048) return;
var d=new Date(0);
d.setUTCSeconds(row.tstamp);
// console.log(d);
data.addRow([
(d),
parseFloat(row.d5tm1t),
parseFloat(row.d5tm2t)
]);
});
var chart = new google.visualization.LineChart(document.getElementById('chart'));// https://developers.google.com/chart/interactive/docs/gallery/linechart
chart.draw(data, {
title: 'Soil logger test stream',
height: 400,
width: 1000,
axisTitlesPosition: 'out',
explorer: {},
hAxis :{title: 'Time', titleTextStyle: {color: '#000000'}},
vAxis :{title: 'Temperature', titleTextStyle: {color: '#000000'}}
});
});
}
// load chart lib
google.load('visualization', '1', {
packages: ['corechart']
});
// call drawChart once google charts is loaded
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart" style="width:1000; height:400"></div>
<p><a href="https://data.sparkfun.com/output/0lzK7vGNXoiygzGlZbrY.csv?page=1" target=new>Download most recent 50KB of data</a></p>
<p><a href="https://data.sparkfun.com/output/0lzK7vGNXoiygzGlZbrY.csv?page=2" target=new>Download second most recent 50KB of data</a></p>
<p><a href="https://data.sparkfun.com/output/0lzK7vGNXoiygzGlZbrY.csv" target=new>Download all availabe data</a></p>
</body>
</html>
