Skip to content

Instantly share code, notes, and snippets.

@badosa

badosa/index.html

Last active September 8, 2021 20:32
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/9378c6dd14a6e893a170872442ef1c5c to your computer and use it in GitHub Desktop.
Save badosa/9378c6dd14a6e893a170872442ef1c5c to your computer and use it in GitHub Desktop.
Download ZIP
EuroJSONstat: EU vs. Brexit EU
Raw
readme.md
Raw
index.html
<!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">
</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 {fetchDataset} from "https://unpkg.com/jsonstat-euro@latest/import.mjs";
import Highcharts from "https://code.highcharts.com/js/es-modules/masters/highcharts.src.js";
const
query={
dataset: "une_rt_a",
filter: {
geo: ["EU27_2020", "EU28"],
sex: ["T"],
age: ["Y15-74"],
unit: ["PC_ACT"],
lastTimePeriod: 19
}
},
main=ds=>{
const
start=ds.Dimension("time").Category(0).label,
geo=ds.Dimension("geo")
;
Highcharts.chart("chart", {
title: { text: "EU vs. Brexit EU" },
subtitle: { text: "Source: " + ds.source },
yAxis: {
title: { text: "Unemployment rate (%)" }
},
plotOptions: {
series: {
label: { connectorAllowed: false },
pointStart: Number(start)
}
},
series: [
{
name: geo.Category(0).label,
data: ds.Data({geo: geo.id[0]}, false)
},
{
name: geo.Category(1).label,
data: ds.Data({geo: geo.id[1]}, false)
}
]
});
}
;
fetchDataset(query).then(main);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment