|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Iterating through a dimension</title> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|
|
|
<!-- DO NOT DO THIS IN PRODUCTION --> |
|
<!-- js.org IS NOT A CDN! 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> |
|
function main( obj ){ |
|
var jsonstat=JSONstat( obj ); |
|
if( !jsonstat ){ |
|
return; |
|
} |
|
|
|
var |
|
values=[], |
|
dimension=jsonstat.dimension, |
|
time=getBy( dimension[by].category.index ) |
|
; |
|
time.forEach(function( e , i ){ |
|
query[by]=e; |
|
values[i]=getValue( query ); |
|
}); |
|
|
|
visual({ |
|
lang: "en", |
|
title: "Children aged 0-4 years", |
|
geo: "Norway", |
|
time: time, |
|
footer: "Source: Statistics Norway.", |
|
type: "tsline", |
|
data: [{ label: "", val: values }], |
|
dec: 0, |
|
grid: { |
|
shadow: 0, |
|
point: 0 |
|
}, |
|
axis: { |
|
x: false |
|
}, |
|
legend: false |
|
}); |
|
|
|
//Functions |
|
|
|
function getBy( ndx ) { |
|
if( isArray( ndx ) ){ |
|
return ndx; |
|
}else{ |
|
var arr=[]; |
|
|
|
for( var p in ndx ){ |
|
arr[ndx[p]]=p; |
|
} |
|
|
|
return arr; |
|
} |
|
} |
|
|
|
//getValue() converts a dimension/category object into a data value. |
|
function getValue( query ){ |
|
return jsonstat.value[getValueIndex( getDimIndices( query ) )]; |
|
} |
|
|
|
//getDimIndices() converts a dimension/category object into an array of dimensions' indices. |
|
function getDimIndices( query ){ |
|
var ids=jsonstat.id || dimension.id; //JSON-stat 2.0-ready |
|
for( var arr=[], i=0, len=ids.length; i<len ; i++ ){ |
|
arr[i]=getDimIndex( ids[i] , query[ids[i]] ); |
|
} |
|
|
|
return arr; |
|
} |
|
|
|
//getValueIndex() converts an array of dimensions' indices into a numeric value index. |
|
function getValueIndex( indices ){ |
|
var size=jsonstat.size || dimension.size; //JSON-stat 2.0-ready |
|
for( var i=0, ndims=size.length, num=0, mult=1; i<ndims; i++ ){ |
|
mult*=( i>0 ) ? size[ndims-i] : 1; |
|
num+=mult*indices[ndims-i-1]; |
|
} |
|
|
|
return num; |
|
} |
|
|
|
//getDimIndex() converts a dimension ID string and a category ID string into the numeric index of that category in that dimension. |
|
function getDimIndex( name , value ){ |
|
//In single category dimensions, "index" is optional |
|
if( !dimension[name].category.index ){ |
|
return 0; |
|
} |
|
|
|
var ndx=dimension[name].category.index; |
|
|
|
//"index" can be an object or an array |
|
if( !isArray( ndx ) ){ //Object |
|
return ndx[value]; |
|
}else{ //Array |
|
return ndx.indexOf( value ); //Polyfill required in old browsers |
|
} |
|
} |
|
|
|
//Validate |
|
function JSONstat( jsonstat ){ |
|
if( !jsonstat ){ |
|
window.alert( 'Error: no response could be retrieved.' ); |
|
return NULL; |
|
} |
|
|
|
//If no "class", "bundle" response: |
|
//use the first dataset available |
|
//(assuming single dataset bundle response) |
|
//[Of course, it'd be better to add an argument |
|
//to the function to pass a dataset ID if |
|
//bundle responses must be properly supported.] |
|
if( !jsonstat.class ){ |
|
jsonstat=jsonstat[Object.keys( jsonstat )[0]]; //Polyfill required in old browsers |
|
}else{ //Verify it's a "dataset" response |
|
if( jsonstat.class!=='dataset' ){ |
|
window.alert( 'Error: response was not a JSON-stat bundle or dataset response.' ); |
|
return NULL; |
|
} |
|
} |
|
|
|
//Program requires "value" and "dimension" properties |
|
if( !jsonstat.value || !jsonstat.dimension ){ |
|
window.alert( 'Error: response is not valid JSON-stat or does not contain required information.' ); |
|
return NULL; |
|
} |
|
|
|
return jsonstat; |
|
} |
|
|
|
function isArray( arr ){ |
|
return (Object.prototype.toString.call( arr )==="[object Array]"); |
|
} |
|
} |
|
</script> |
|
</head> |
|
|
|
<body> |
|
<section id="visual" class="visual"></section> |
|
|
|
<script> |
|
var |
|
query={ |
|
"Alder": "F00-04", //Age: 00-04 |
|
"Kjonn": "0", //Sex: Both sexes |
|
"ContentsCode": "Personer" //People |
|
}, |
|
by="Tid" //Time |
|
; |
|
</script> |
|
<script src="https://data.ssb.no/api/v0/dataset/65195.json?callback=main"></script> |
|
</body> |
|
</html> |