Skip to content

Instantly share code, notes, and snippets.

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

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>
<meta charset="utf-8">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<div id="vis"></div>
$.getJSON('', function(data) {
var spec = {
"$schema": "",
"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);
header("Access-Control-Allow-Origin: *");
$url = '';
$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);
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.