Comparing Albania with Albania is not very interesting: pick different countries by clicking on the red or blue bar.
This is the same example as (Eurostat's) Unemployment Trend Comparison but using the UNECE API, that supports the JSON-stat format.
Comparing Albania with Albania is not very interesting: pick different countries by clicking on the red or blue bar.
This is the same example as (Eurostat's) Unemployment Trend Comparison but using the UNECE API, that supports the JSON-stat format.
<!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>Using the UNECE API</title> | |
<link href="/d/e3e065fe80f2b0084bef/style.css" rel="stylesheet" type="text/css" /> | |
<!-- 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 --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
</head> | |
<body> | |
<h1></h1> | |
<form> | |
<select id="geo1"></select> | |
<select id="geo2"></select> | |
</form> | |
<div id="visual" class="visual"></div> | |
<script> | |
var | |
url="https://w3.unece.org/PXWeb2015/api/v1/en/STAT/20-ME/3-MELF/40_en_MEUnRateY_r.px", | |
query='{"query": [],"response": {"format": "json-stat"}}' | |
; | |
$.ajax({ | |
type: "POST", | |
url: url, | |
data: query, | |
success: function( json ){ | |
var | |
html="", | |
egeo=[ document.getElementById("geo1"), document.getElementById("geo2") ], | |
title=document.getElementsByTagName("h1")[0], | |
ds=JSONstat( json ).Dataset( 0 ), | |
time=ds.Dimension( "Year" ), | |
geod=ds.Dimension( "Country" ), | |
draw=function( geo ){ | |
var | |
label=[ geod.Category( geo[0] ).label, geod.Category( geo[1] ).label ] | |
val=[[],[]] | |
; | |
time.id.forEach(function(t){ | |
val[0].push( ds.Data( { "Year": t, "Country": geo[0] } ).value ); | |
val[1].push( ds.Data( { "Year": t, "Country": geo[1] } ).value ); | |
}); | |
title.innerHTML="Unemployment rate: " + label[0] + " <i>vs</i> " + label[1]; | |
visual({ | |
fixed: [ 960, 395], | |
lang: "en", | |
autoheading: false, | |
time: time.Category().map(function(e){ return e.label; }), | |
unit: { label: "%" }, | |
dec: 1, | |
range: [0, 30], | |
grid: { | |
line: 5, | |
shadow: 6, | |
point: 0 | |
}, | |
legend: false, | |
type: "tsline", | |
data: [ | |
{ label: label[0], val: val[0] }, | |
{ label: label[1], val: val[1] } | |
] | |
}); | |
} | |
; | |
geod.id.forEach(function(e){ | |
html+='<option value="'+e+'"'+'>'+geod.Category(e).label+'</option>'; | |
}); | |
egeo[0].innerHTML=html; | |
egeo[1].innerHTML=html; | |
var select=[ | |
egeo[0].options[egeo[0].selectedIndex].value, | |
egeo[1].options[egeo[1].selectedIndex].value | |
]; | |
draw( select ); | |
[].forEach.call(document.getElementsByTagName("select"), function (e) { | |
e.addEventListener("change", function() { | |
select[ this.id.substr(3)-1 ]=this.options[this.selectedIndex].value; | |
draw( select ); | |
}, false); | |
}); | |
} | |
}); | |
</script> | |
</body> | |
</html> |