Skip to content

Instantly share code, notes, and snippets.

@loleg loleg/.block
Last active Jun 25, 2018

Embed
What would you like to do?
TTN Vega-Lite Example
license: bsd-3-clause
border: no
scrolling: no
height: NaN

TTN Vega-Lite Example

This examples connects to data from an API provided by the Storage Integration application of The Things Network (TTN) platform. The results in JSON form are proxied through a PHP script (see proxy.php). This can be directly used in a Vega-Lite visualization.

You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation. Happy hacking!

forked from domoritz's block: Vega-Lite Bl.ocks example

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
<script src="https://cdn.jsdelivr.net/npm/zepto@1.2.0"></script>
</head>
<body>
<div id="vis"></div>
<script>
;(function($){
$.getJSON('https://opendata.utou.ch/ttn/pizzatime/', function(data) {
var spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "Visualization of real-time data",
"width": 500,
"data": {
"values": data
},
"mark": {
"type": "line",
"interpolate": "step-after"
},
"encoding": {
"x": {"field": "time", "type": "temporal"},
"y": {"field": "level", "type": "quantitative", "scale": {"zero": false}},
"tooltip": {"field": "level", "type": "quantitative"}
}
}
vegaEmbed('#vis', spec, {defaultStyle: true}).catch(console.warn);
});
})(Zepto)
</script>
</body>
<?
header("Access-Control-Allow-Origin: *");
$url = 'https://MYAPPID.data.thethingsnetwork.org/api/v2/query/MYDEVICEID?last=1h';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
$headers = array(
'Accept: application/json',
'Authorization: key ttn-account-v2.XYZREPLACEME',
);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$curl_scraped_page = curl_exec($ch);
curl_close($ch);
echo $curl_scraped_page;
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.