loleg/.block

## .block
license: bsd-3-clause
border: no
scrolling: no
height: NaN

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## index.html
<!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>

## proxy.php
<?
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;
?>
	<!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;
	?>