Statistics Denmark supports the JSON-stat format. In this example, data is retrieved using the Danish API, processed with the JSON-stat Javascript Toolkit and finally visualized with Idescat Visual.
Check also this similar example.
Statistics Denmark supports the JSON-stat format. In this example, data is retrieved using the Danish API, processed with the JSON-stat Javascript Toolkit and finally visualized with Idescat Visual.
Check also this similar example.
<!DOCTYPE html> | |
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
<!--[if IE 7]><html class="lt-ie9 lt-ie8"> <![endif]--> | |
<!--[if IE 8]><html class="lt-ie9"> <![endif]--> | |
<!--[if gt IE 8]><!--> <html> <!--<![endif]--> | |
<head> | |
<title>Visual + JSON-stat: simple line chart</title> | |
<!-- DO NOT DO THIS IN PRODUCTION --> | |
<!-- js.org and json-stat.org ARE NOT CDNs! Link to your own copies or to a CDN. --> | |
<link href="https://visual.js.org/visual.css" rel="stylesheet" type="text/css" /> | |
<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script> | |
<script src="https://visual.js.org/lazyvisualsetup.js"></script> | |
<!-- /DO NOT DO THIS IN PRODUCTION --> | |
</head> | |
<body> | |
<section id="visual" class="visual"></section> | |
<script> | |
var | |
url="https://api.statbank.dk/v1/data/AKU100K/JSONSTAT?lang=en&valuePresentation=Default&timeOrder=Ascending&Tid=(-n%2B41)&BESKSTATUS=BESTOT%2CAKUL" | |
//"Tid" contains time; "BESKSTATUS", employment status | |
; | |
JSONstat(url, function(){ | |
var | |
ds=this.Dataset(0), | |
tid=ds.Dimension("Tid").id, | |
time=[], | |
empl=[], | |
act=[] | |
; | |
tid.forEach(function(t){ | |
var | |
//employment | |
e=ds.Data({"Tid": t, "BESKSTATUS": "BESTOT"}).value*1000, | |
//unemployment | |
u=ds.Data({"Tid": t, "BESKSTATUS": "AKUL"}).value*1000 | |
; | |
time.push(t.replace(/K/,"")); //Normalize time for Visual | |
empl.push(e); | |
act.push(e+u); | |
}); | |
visual({ | |
lang: "en", | |
title: "Labor market", | |
geo: "Denmark", | |
time: time, | |
footer: "Source: " + ds.source + ".", | |
unit: {label: "people"}, | |
dec: 0, | |
grid: { | |
line: 5, | |
shadow: 6, | |
point: 0 | |
}, | |
type: "tsline", | |
data: [ | |
{ label: "Labor force", val: act }, | |
{ label: "Employment", val: empl } | |
] | |
}); | |
}); | |
</script> | |
</body> | |
</html> |