The main difference between the JSON-stat Javascript Toolkit (JJT) version 0 and version 1 is how requests are done. This code exemplifies how to do a JJT POST request in version 1 (JJT POST requests are not supported in version 0).
Compare with the original version 0 example.
| <!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>Finnish Labor Market</title> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <!-- DO NOT DO THIS IN PRODUCTION --> | |
| <!-- JS.ORG IS 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://visual.js.org/lazyvisualsetup.js"></script> | |
| <!-- /DO NOT DO THIS IN PRODUCTION --> | |
| <!-- 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> | |
| <section id="visual" class="visual"></section> | |
| <script> | |
| var | |
| //Population by labor force status | |
| url="https://pxnet2.stat.fi/PXWeb/api/v1/en/StatFin/tym/tyti/vv/statfin_tyti_pxt_11pl.px", | |
| query={ "query": [ { "code": "Sukupuoli", "selection": { "filter": "item", "values": [ "SSS" ] } }, { "code": "Ikäluokka", "selection": { "filter": "item", "values": [ "15-74" ] } }, { "code": "Tiedot", "selection": { "filter": "item", "values": [ "Tyovoima", "Tyolliset" ] } } ], "response": { "format": "json-stat" } }, | |
| options={ | |
| method: "POST", | |
| redirect: "follow", | |
| body: JSON.stringify(query) | |
| } | |
| ; | |
| JSONstat(url, options).then(main); | |
| function main(j){ | |
| var | |
| //dim names | |
| year="Vuosi", concept="Tiedot", | |
| status={ | |
| active: { | |
| value: "Tyovoima", | |
| label: "Labor force" | |
| }, | |
| employ: { | |
| value: "Tyolliset", | |
| label: "Employment" | |
| } | |
| }, | |
| ds=j.Dataset(0), | |
| time=ds.Dimension(year).id, | |
| empl=[], | |
| act=[] | |
| ; | |
| time.forEach(function(t){ | |
| var | |
| active={}, | |
| employ={} | |
| ; | |
| active[year]=employ[year]=t; | |
| active[concept]=status.active.value; | |
| employ[concept]=status.employ.value; | |
| act.push( ds.Data(active).value*1000 ); | |
| empl.push( ds.Data(employ).value*1000 ); | |
| }); | |
| visual({ | |
| lang: "en", | |
| title: "15-74 years old population by labor force status", | |
| geo: "Finland", | |
| time: time, | |
| footer: "Source: "+ds.source+".", | |
| unit: {label: "people"}, | |
| dec: 0, | |
| grid: { | |
| line: 5, | |
| shadow: 6, | |
| point: 0 | |
| }, | |
| type: "tsline", | |
| data: [ | |
| { label: status.active.label, val: act }, | |
| { label: status.employ.label, val: empl } | |
| ] | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |