Skip to content

Instantly share code, notes, and snippets.

@badosa

badosa/index.html

Last active November 21, 2019 05:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save badosa/20735ba5bbecbc079d78 to your computer and use it in GitHub Desktop.
Save badosa/20735ba5bbecbc079d78 to your computer and use it in GitHub Desktop.
Download ZIP
Swedish Inflation Calculator
Raw
readme.md
Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment