Skip to content

Instantly share code, notes, and snippets.

@badosa

badosa/index.html

Last active October 2, 2022 16:42
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/ddd1b3783800dffa9cf7426f6042cc83 to your computer and use it in GitHub Desktop.
Save badosa/ddd1b3783800dffa9cf7426f6042cc83 to your computer and use it in GitHub Desktop.
Download ZIP
JJT v1: GET request
Raw
readme.md

This code exemplifies how to use the connection capabilities of the JSON-stat Javascript Toolkit version 1 (compare with the version 0 example).

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"/>
<link rel="stylesheet" type="text/css" media="all" href="/d/af4edd90b99f5461e70345c23bc308f1/styles.css"/>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<!-- Using JSONstat XHR capabilities require Promises and Fetch support. Polyfill included for IE, for example -->
<script src="https://cdn.jsdelivr.net/combine/npm/es6-promise@4.2.8,npm/whatwg-fetch@3.0.0"></script>
<!-- End of optional polyfilling -->
<script src="https://unpkg.com/jsonstat-toolkit@latest"></script>
</head>
<body>
<article></article>
<footer>% of population by educational attainment level (ISCED11 levels 0-2, 3-4 &amp; 5-8). <span class="nowrap">Year: <time></time>.</span> <span class="nowrap">Source: Eurostat.</span></footer>
<script>
var
year="2017",
url="https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/edat_lfse_03?sex=T&geo=AT&geo=BE&geo=BG&geo=CH&geo=CY&geo=CZ&geo=DE&geo=DK&geo=EE&geo=EL&geo=ES&geo=EU28&geo=FI&geo=FR&geo=HR&geo=HU&geo=IE&geo=IS&geo=IT&geo=LT&geo=LU&geo=LV&geo=ME&geo=MK&geo=MT&geo=NL&geo=NO&geo=PL&geo=PT&geo=RO&geo=SE&geo=SI&geo=SK&geo=TR&geo=UK&unit=PC&isced11=ED0-2&isced11=ED3_4&isced11=ED5-8&age=Y15-64&time="+year
;
JSONstat(url).then(main);
function main(jsonstat){
var
geo=jsonstat.Dimension("geo")
;
geo.id.forEach(function(e){
var
title=geo.Category(e).label,
div=document.createElement("div"),
data=jsonstat.Data( { geo: e }, false )
;
div.id=e;
div.className="donut ct-perfect-fourth";
document.getElementsByTagName("article")[0].appendChild(div);
div.innerHTML='<p class="' + countryClass(data) + '" data-title="' + title + '">' + e + "</p>";
chart(e, data);
});
document.getElementsByTagName("time")[0].innerText=jsonstat.Dimension("time").id[0];
}
function chart(id, data){
var
options={
donut: true,
donutWidth: 35,
startAngle: 270,
total: 200,
showLabel: true,
chartPadding: 0
}
;
new Chartist.Pie("#"+id, { series: data }, options);
}
function countryClass(arr){
if(arr[0]>=arr[1] && arr[0]>=arr[2]){
return "country-a";
}
if(arr[1]>=arr[0] && arr[1]>=arr[2]){
return "country-b";
}
if(arr[2]>=arr[0] && arr[2]>=arr[1]){
return "country-c";
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment