There are lots of data at OECD.Stat. Unfortunately, they are not available in the JSON-stat format. But they are available in the SDMX-JSON format.
JJUS includes fromSDMX() that converts SDMX-JSON (flat favor) to JSON-stat. Warning: JJUS version 0 fromSDMX does not support Internet Explorer: you need to provide a polyfill for reduce, find and findIndex.
Once the JSON is converted, it is processed using JJT and the data is visualized with ChartJS.
| <!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" /> | |
| <!-- IE support --> | |
| <!-- fromSDMX --> | |
| <script src="polyfill.js"></script> | |
| <!-- Fetch --> | |
| <script src="https://cdn.jsdelivr.net/combine/npm/es6-promise@4.2.8,npm/whatwg-fetch@3.0.0"></script> | |
| <script src="https://cdn.jsdelivr.net/combine/npm/jsonstat@0.13.13,npm/jsonstat-utils@2.5.5"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> | |
| </head> | |
| <body> | |
| <div class="chart-container" style="position: relative; height:90vh; width:90vw"> | |
| <canvas id="chart"></canvas> | |
| </div> | |
| <script> | |
| var | |
| url="https://stats.oecd.org/SDMX-JSON/data/PDB_GR/CAN+DEU+GBR+USA+EU28.T_HRSPOP.GRW/all?startTime=1998&dimensionAtObservation=allDimensions", | |
| ctx=document.getElementById("chart").getContext("2d") | |
| ; | |
| function main(sdmx){ | |
| var | |
| ds=JSONstat( JSONstatUtils.fromSDMX(sdmx) ), | |
| time=ds.Dimension({role: "time"}, false)[0], | |
| geoId=ds.role.geo[0], | |
| geoDim=ds.Dimension(geoId), | |
| datasets=[], | |
| colors=["rgb(0, 0, 139)", "rgb(139, 0, 0)", "rgb(0, 139, 0)", "rgb(0, 0, 0)", "rgb(139, 0, 255)"] | |
| ; | |
| geoDim.id.forEach(function(e,i){ | |
| datasets.push({ | |
| label: getLabel(e), | |
| data: getData(e), | |
| borderColor: colors[i], | |
| fill: false, | |
| pointRadius: 0 | |
| }); | |
| }); | |
| new Chart(ctx, { | |
| type: "line", | |
| data: { | |
| labels: time, | |
| datasets: datasets | |
| }, | |
| options: { | |
| title: { | |
| display: true, | |
| fontSize: 20, | |
| text: ds.Dimension("SUBJECT").Category(0).label+". "+ds.Dimension("MEASURE").Category(0).label | |
| }, | |
| legend: { | |
| display: true, | |
| }, | |
| scales: { | |
| yAxes: [{ | |
| ticks: { | |
| beginAtZero:true | |
| } | |
| }] | |
| } | |
| } | |
| }) | |
| ; | |
| function getLabel(id){ | |
| return geoDim.Category(id).label; | |
| } | |
| function getData(id){ | |
| return ds.Data([[geoId, id]], false); | |
| } | |
| } | |
| fetch( url ) | |
| .then(function(resp) { | |
| resp.json().then(main); | |
| }) | |
| ; | |
| </script> | |
| </body> | |
| </html> |
| //fromSDMX uses reduce, find and findIndex, not available in IE | |
| Array.prototype.reduce||Object.defineProperty(Array.prototype,"reduce",{value:function(r){if(null===this)throw new TypeError("Array.prototype.reduce called on null or undefined");if("function"!=typeof r)throw new TypeError(r+" is not a function");var e,t=Object(this),n=t.length>>>0,o=0;if(arguments.length>=2)e=arguments[1];else{for(;o<n&&!(o in t);)o++;if(o>=n)throw new TypeError("Reduce of empty array with no initial value");e=t[o++]}for(;o<n;)o in t&&(e=r(e,t[o],o,t)),o++;return e}}),Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value:function(r){if(null==this)throw TypeError('"this" is null or not defined');var e=Object(this),t=e.length>>>0;if("function"!=typeof r)throw TypeError("predicate must be a function");for(var n=arguments[1],o=0;o<t;){var i=e[o];if(r.call(n,i,o,e))return i;o++}},configurable:!0,writable:!0}),Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(r){if(null==this)throw new TypeError('"this" is null or not defined');var e=Object(this),t=e.length>>>0;if("function"!=typeof r)throw new TypeError("predicate must be a function");for(var n=arguments[1],o=0;o<t;){var i=e[o];if(r.call(n,i,o,e))return o;o++}return-1},configurable:!0,writable:!0}); |