Warning: This example stopped working because Eurostat removed the EU27+UK data from the une_rt_a dataset.
An example on retrieving the JSON-stat Javascript Toolkit and Highcharts using ECMAScript modules.
See also EuroJSONstat: EU vs. Brexit EU.
Last active
September 8, 2021 20:31
-
-
Save badosa/bb54e97c3b2e37cc7060fa2c7c262f65 to your computer and use it in GitHub Desktop.
EU vs. Brexit EU
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>EU vs. Brexit EU</title> | |
| <link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css"> | |
| <style> | |
| </style> | |
| </head> | |
| <body> | |
| <main id="chart"></main> | |
| <script nomodule> | |
| //For old browsers not supporting ES modules | |
| window.alert("Sorry, your browser does not support ECMAScript modules!"); | |
| </script> | |
| <script type="module"> | |
| import { JSONstat } from "https://unpkg.com/jsonstat@0.13.13/export.mjs"; | |
| import Highcharts from "https://code.highcharts.com/js/es-modules/masters/highcharts.src.js"; | |
| const | |
| url="https://ec.europa.eu/eurostat/wdds/rest/data/v2.1/json/en/une_rt_a?precision=1&sex=T&lastTimePeriod=19&geo=EU27_2020&geo=EU28&unit=PC_ACT&age=Y15-74", | |
| main=async function(url){ | |
| const | |
| res=await fetch(url), | |
| json=await res.json(), | |
| stat=JSONstat(json), | |
| start=stat.Dimension("time").Category(0).label, | |
| geo=stat.Dimension("geo") | |
| ; | |
| Highcharts.chart("chart", { | |
| title: { text: "EU vs. Brexit EU" }, | |
| subtitle: { text: "Source: " + stat.source }, | |
| yAxis: { | |
| title: { text: "Unemployment rate (%)" } | |
| }, | |
| plotOptions: { | |
| series: { | |
| label: { connectorAllowed: false }, | |
| pointStart: Number(start) | |
| } | |
| }, | |
| series: [ | |
| { | |
| name: geo.Category(0).label, | |
| data: stat.Data({geo: geo.id[0]}, false) | |
| }, | |
| { | |
| name: geo.Category(1).label, | |
| data: stat.Data({geo: geo.id[1]}, false) | |
| } | |
| ] | |
| }); | |
| } | |
| ; | |
| main(url); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment