Skip to content

Instantly share code, notes, and snippets.

@badosa
Last active May 17, 2020 08:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save badosa/dc7ff91a533159a85c3c to your computer and use it in GitHub Desktop.
Save badosa/dc7ff91a533159a85c3c to your computer and use it in GitHub Desktop.
UNECE Unemployment Trend Comparison

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment