badosa/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This always up-to-date graphical inflation calculator uses the Statistics Sweden API to retrieve the Consumer Price Index (Shadow Index numbers, 1980=100) in the JSON-stat format. The data is then processed with the help of the JSON-stat Javascript Toolkit. Finally, it is visualized using Idescat Visual.

  
## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Swedish Inflation Calculator</title>
		<meta charset="utf-8" />

		<link href="/d/20735ba5bbecbc079d78/style.css" type="text/css" rel="stylesheet" />

		<!-- DO NOT DO THIS IN PRODUCTION -->
		<!-- js.org and json-stat.org ARE NOT CDNs -->
		<link href="https://visual.js.org/visual.css" rel="stylesheet" type="text/css" />
		<script src="https://visual.js.org/lazyvisualsetup.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
		<!-- /DO NOT DO THIS IN PRODUCTION -->

		<link href="http://fonts.googleapis.com/css?family=Alef" rel="stylesheet" type="text/css" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	</head>
	<body>
		<div id="container">
			<h1>Swedish Inflation Calculator</h1>
			<form>
				<fieldset>
					<legend>From</legend>
					<select id="from"></select>
					<input id="amount" type="number" name="amount" value="1000" /> <abbr title="Swedish kronas">kr</abbr>
				</fieldset>
				<input type="button" value="&rarr;" id="calc" />
				<fieldset>
					<legend>Till</legend>
					<select id="till"></select>
					<input readonly="readonly" id="result" /> <abbr title="Swedish kronas">kr</abbr>
				</fieldset>
			</form>
			<div class="visual" id="visual"></div>
		</div>

		<script type="text/javascript">
		var
			//Consumer Price Index (CPI), total, Shadow Index numbers, 1980=100 by observations and month
			url="http://api.scb.se/OV0104/v1/doris/en/ssd/START/PR/PR0101/PR0101A/KPISkuggM",
			query='{"query": [],"response": {"format": "json-stat"}}',

			gel=function(e){ return document.getElementById(e); },
			from=gel("from"),
			till=gel("till"),
			amount=gel("amount"),
			result=gel("result"),
			calc=gel("calc"),
			chart=gel("chart")
		;

		calc.onclick=function(){ window.alert("Data not loaded yet!"); };

		$.ajax({
			type: "POST",
			url: url,
			data: query,
			success: function( json ) {
				var
					ds=JSONstat(json).Dataset(0),
					time=ds.Dimension("Tid"),
					timeTxt=function(t){
						var
							m=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
							arr=t.split("M")
						;
						return m[arr[1]-1] + " " + arr[0];
					},
					draw=function(tbl){
						var
							t=tbl.map(function(e){ return e.time.substring(0,4)+e.time.substring(5,7)}),
							v=tbl.map(function(e){ return e.value})
						;

						visual({
							"lang": "en",
							"fixed": [310, 270],
							"autoheading": false,
							"axis": { "x": false},
							"grid": {"border": 0, "line": 1, "shadow": 4, "point": 0},

							"type": "tsline",
							"time": t,
							"data": [{"label": "","val": v}],
							"unit": {"label": "kronas"},
							"dec": 2
						});
					},
					calculate=function(from, till, amount, ds){
						var
							timeFrom=from.options[from.selectedIndex].value,
							timeTill=till.options[till.selectedIndex].value,
							indexFrom=ds.Data( {"Tid": timeFrom} ).value,
							indexTill=ds.Data( {"Tid": timeTill} ).value,
							val=amount.value,
							updval=val*(indexTill/indexFrom),
							tbl=ds.toTable(
								{type:"arrobj", content: "id"},
								function(d){
									var
										time=d["Tid"],
										interval=(timeFrom<timeTill) ?
										(time>=timeFrom && time<=timeTill) :
										(time<=timeFrom && time>=timeTill)
									;
									if(interval){
										return {
											"time": d["Tid"],
											"value": updval*(d.value/indexTill)
										};
									}
								}
							)
						;
						result.value=updval.toFixed(2);
						return tbl;
					}
				;

				for(var i=0, len=time.length; i<len; i++){
					var
						id=time.id[i],
						t=timeTxt(id)
					;
					from.options[i]=new Option(t, id);
					till.options[i]=new Option(t, id);
				}
				from.options.selectedIndex=len-13;
				till.options.selectedIndex=len-1;

				draw(calculate(from, till, amount, ds));
				calc.onclick=function() {
					draw(calculate(from, till, amount, ds));
				};
			}
		});
		</script>
	</body>
</html>

## style.css
body {
  font-family: "Alef", sans-serif;
  background-color: #f0f0f0;
  font-size: 90%;
}
#container {
  width: 300px;
  height: 358px;
  border: 1px solid  #c2c26b;
  padding: 2px;
  margin: 5em auto;
  background-color: #fff;
}
h1, form {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
}
#chart {
  width: 287px;
  height: 242px;
}
h1 {
  font-size: 100%;
  text-align: center;
  margin: 0;
  background-color: #6d6d46;
  color: #fff;
}
form {
  background-color: #f0f0c0;
  padding-top: 4px;
  padding-bottom: 10px;
}
fieldset {
  display: inline-block;
  width: 94px;
  border: 1px solid white;
  margin: 0;
  padding: 4px 8px;
}
#calc {
  display: inline-block;
  width: 32px;
}
#amount, #result {
  width: 65px;
  text-align: right;
  padding: 0 4px;
}
label, legend {
  font-weight: bold;
}
select {
  width: 95px;
}
abbr {
  border-bottom: none;
}
#visual h1 {
  background-color: #fff;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Swedish Inflation Calculator</title>
	<meta charset="utf-8" />

	<link href="/d/20735ba5bbecbc079d78/style.css" type="text/css" rel="stylesheet" />

	<!-- DO NOT DO THIS IN PRODUCTION -->
	<!-- js.org and json-stat.org ARE NOT CDNs -->
	<link href="https://visual.js.org/visual.css" rel="stylesheet" type="text/css" />
	<script src="https://visual.js.org/lazyvisualsetup.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13"></script>
	<!-- /DO NOT DO THIS IN PRODUCTION -->

	<link href="http://fonts.googleapis.com/css?family=Alef" rel="stylesheet" type="text/css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	</head>
	<body>
	<div id="container">
	<h1>Swedish Inflation Calculator</h1>
	<form>
	<fieldset>
	<legend>From</legend>
	<select id="from"></select>
	<input id="amount" type="number" name="amount" value="1000" /> <abbr title="Swedish kronas">kr</abbr>
	</fieldset>
	<input type="button" value="→" id="calc" />
	<fieldset>
	<legend>Till</legend>
	<select id="till"></select>
	<input readonly="readonly" id="result" /> <abbr title="Swedish kronas">kr</abbr>
	</fieldset>
	</form>
	<div class="visual" id="visual"></div>
	</div>

	<script type="text/javascript">
	var
	//Consumer Price Index (CPI), total, Shadow Index numbers, 1980=100 by observations and month
	url="http://api.scb.se/OV0104/v1/doris/en/ssd/START/PR/PR0101/PR0101A/KPISkuggM",
	query='{"query": [],"response": {"format": "json-stat"}}',

	gel=function(e){ return document.getElementById(e); },
	from=gel("from"),
	till=gel("till"),
	amount=gel("amount"),
	result=gel("result"),
	calc=gel("calc"),
	chart=gel("chart")
	;

	calc.onclick=function(){ window.alert("Data not loaded yet!"); };

	$.ajax({
	type: "POST",
	url: url,
	data: query,
	success: function( json ) {
	var
	ds=JSONstat(json).Dataset(0),
	time=ds.Dimension("Tid"),
	timeTxt=function(t){
	var
	m=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
	arr=t.split("M")
	;
	return m[arr[1]-1] + " " + arr[0];
	},
	draw=function(tbl){
	var
	t=tbl.map(function(e){ return e.time.substring(0,4)+e.time.substring(5,7)}),
	v=tbl.map(function(e){ return e.value})
	;

	visual({
	"lang": "en",
	"fixed": [310, 270],
	"autoheading": false,
	"axis": { "x": false},
	"grid": {"border": 0, "line": 1, "shadow": 4, "point": 0},

	"type": "tsline",
	"time": t,
	"data": [{"label": "","val": v}],
	"unit": {"label": "kronas"},
	"dec": 2
	});
	},
	calculate=function(from, till, amount, ds){
	var
	timeFrom=from.options[from.selectedIndex].value,
	timeTill=till.options[till.selectedIndex].value,
	indexFrom=ds.Data( {"Tid": timeFrom} ).value,
	indexTill=ds.Data( {"Tid": timeTill} ).value,
	val=amount.value,
	updval=val*(indexTill/indexFrom),
	tbl=ds.toTable(
	{type:"arrobj", content: "id"},
	function(d){
	var
	time=d["Tid"],
	interval=(timeFrom<timeTill) ?
	(time>=timeFrom && time<=timeTill) :
	(time<=timeFrom && time>=timeTill)
	;
	if(interval){
	return {
	"time": d["Tid"],
	"value": updval*(d.value/indexTill)
	};
	}
	}
	)
	;
	result.value=updval.toFixed(2);
	return tbl;
	}
	;

	for(var i=0, len=time.length; i<len; i++){
	var
	id=time.id[i],
	t=timeTxt(id)
	;
	from.options[i]=new Option(t, id);
	till.options[i]=new Option(t, id);
	}
	from.options.selectedIndex=len-13;
	till.options.selectedIndex=len-1;

	draw(calculate(from, till, amount, ds));
	calc.onclick=function() {
	draw(calculate(from, till, amount, ds));
	};
	}
	});
	</script>
	</body>
	</html>
	body {
	font-family: "Alef", sans-serif;
	background-color: #f0f0f0;
	font-size: 90%;
	}
	#container {
	width: 300px;
	height: 358px;
	border: 1px solid #c2c26b;
	padding: 2px;
	margin: 5em auto;
	background-color: #fff;
	}
	h1, form {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	}
	#chart {
	width: 287px;
	height: 242px;
	}
	h1 {
	font-size: 100%;
	text-align: center;
	margin: 0;
	background-color: #6d6d46;
	color: #fff;
	}
	form {
	background-color: #f0f0c0;
	padding-top: 4px;
	padding-bottom: 10px;
	}
	fieldset {
	display: inline-block;
	width: 94px;
	border: 1px solid white;
	margin: 0;
	padding: 4px 8px;
	}
	#calc {
	display: inline-block;
	width: 32px;
	}
	#amount, #result {
	width: 65px;
	text-align: right;
	padding: 0 4px;
	}
	label, legend {
	font-weight: bold;
	}
	select {
	width: 95px;
	}
	abbr {
	border-bottom: none;
	}
	#visual h1 {
	background-color: #fff;
	}