Comparing Austria with Austria is not very interesting: pick different countries by clicking on the red or blue bar.
In this example, data is retrieved from Eurostat in the JSON-stat format, processed with the JSON-stat Javascript Toolkit and visualized with Idescat Visual.
See a simpler version of this example: EU vs Germany.
| <!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>Visual + JSON-stat: simple line chart</title> | |
| <link href="/d/e3e065fe80f2b0084bef/style.css" rel="stylesheet" type="text/css" /> | |
| <!-- DO NOT DO THIS IN PRODUCTION --> | |
| <!-- js.org and json-stat.org ARE 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 --> | |
| <script src="https://cdn.jsdelivr.net/npm/jsonstat-toolkit@1.4.2"></script> | |
| </head> | |
| <body> | |
| <h1></h1> | |
| <form> | |
| <select id="geo1"></select> | |
| <select id="geo2"></select> | |
| </form> | |
| <div id="visual" class="visual"></div> | |
| <script> | |
| var | |
| //tesem120: Unemployment rate | |
| url="https://ec.europa.eu/eurostat/api/dissemination/statistics/1.0/data/tesem120?sex=T&unit=PC_ACT&age=Y15-74&lang=EN" | |
| ; | |
| JSONstat(url).then(function(ds){ | |
| var | |
| html="", | |
| egeo=[ document.getElementById("geo1"), document.getElementById("geo2") ], | |
| title=document.getElementsByTagName("h1")[0], | |
| time=ds.Dimension( "time" ).id, | |
| geod=ds.Dimension( "geo" ), | |
| draw=function( geo ){ | |
| var | |
| label=[ geod.Category( geo[0] ).label, geod.Category( geo[1] ).label ], | |
| val=[[],[]] | |
| ; | |
| time.forEach(function(t){ | |
| val[0].push( ds.Data( { "time": t, "geo": geo[0] } ).value ); | |
| val[1].push( ds.Data( { "time": t, "geo": geo[1] } ).value ); | |
| }); | |
| title.innerHTML="Unemployment rate: " + label[0] + " <i>vs</i> " + label[1]; | |
| visual({ | |
| fixed: [ 960, 395], | |
| lang: "en", | |
| autoheading: false, | |
| time: time, | |
| unit: { label: "%" }, | |
| dec: 1, | |
| range: [0, 30], | |
| grid: { | |
| line: 5, | |
| shadow: 6, | |
| point: 0 | |
| }, | |
| legend: false, | |
| type: "tsline", | |
| data: [ | |
| { label: label[0], val: val[0] }, | |
| { label: label[1], val: val[1] } | |
| ] | |
| }); | |
| } | |
| ; | |
| geod.id.forEach(function(e){ | |
| html+='<option value="'+e+'"'+'>'+geod.Category(e).label+'</option>'; | |
| }); | |
| egeo[0].innerHTML=html; | |
| egeo[1].innerHTML=html; | |
| var select=[ | |
| egeo[0].options[egeo[0].selectedIndex].value, | |
| egeo[1].options[egeo[1].selectedIndex].value | |
| ]; | |
| draw( select ); | |
| [].forEach.call(document.getElementsByTagName("select"), function (e) { | |
| e.addEventListener("change", function() { | |
| select[ this.id.substr(3)-1 ]=this.options[this.selectedIndex].value; | |
| draw( select ); | |
| }, false); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
| h1 { | |
| font-family: verdana; | |
| font-size: 14px; | |
| margin: 10px 0 8px 8px; | |
| } | |
| select { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| margin: 2px 0 0 8px; | |
| padding: 6px; | |
| font-size: 14px; | |
| color: #fff; | |
| border-radius: 0; | |
| width: 920px; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| #geo1 { | |
| background-color: #2b527b; | |
| } | |
| #geo2 { | |
| background-color: #a52a2a; | |
| } | |
| /* Only for the example with several indicators */ | |
| #indicator { | |
| box-sizing: border-box; | |
| width: 920px; | |
| background-color: #eee; | |
| margin: 2px 0 0 8px; | |
| padding: 6px; | |
| } | |
| label { | |
| margin: 0 55px 0 0; | |
| font-family: verdana; | |
| font-size: 13px; | |
| } | |
| footer { | |
| font-family: verdana; | |
| font-size: 13px; | |
| margin: 0 0 8px 8px; | |
| } |