Skip to content

Instantly share code, notes, and snippets.

@badosa
Last active November 21, 2019 05:10
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save badosa/5845359 to your computer and use it in GitHub Desktop.
Norwegian Inflation Calculator
<!DOCTYPE html>
<html>
<head>
<title>Norwegian Inflation Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Alef" rel="stylesheet" type="text/css" />
<link href="/d/5845359/style.css" type="text/css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13" type="text/javascript"></script>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function(){
var
url="https://data.ssb.no/api/v0/dataset/1086.json?lang=en",
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"),
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];
},
calculate=function(from, till, amount, ds){
var
timeFrom=from.options[from.selectedIndex].value,
timeTill=till.options[till.selectedIndex].value,
indexFrom=ds.Data( {"Konsumgrp": "TOTAL", "Tid": timeFrom, "ContentsCode": "KpiIndMnd"} ).value, //#jsontat
indexTill=ds.Data( {"Konsumgrp": "TOTAL", "Tid": timeTill, "ContentsCode": "KpiIndMnd"} ).value, //#jsontat
val=amount.value,
updval=val*(indexTill/indexFrom),
tbl=ds.toTable(
{type:"object", content: "id"},
function(d){
var
time=d.c[1].v,
interval=(timeFrom<timeTill) ?
(time>=timeFrom && time<=timeTill) :
(time<=timeFrom && time>=timeTill)
;
if(d.c[0].v==="TOTAL" && d.c[2].v==="KpiIndMnd" && interval){
var val=updval*(d.c[3].v/indexTill);
d.c[1].v=timeTxt(time);
d.c[3].v=val.toFixed(2);
return d;
}
}
) //#jsontat
;
result.value=updval.toFixed(2);
return tbl;
}
;
calc.onclick=function(){ window.alert("Data not loaded yet!"); };
JSONstat(url, function(){ //#jsontat
if(this.length){ //#jsontat
var
ds=this.Dataset(0), //#jsontat
time=ds.Dimension("Tid"), //#jsontat
draw=function(tbl){
var
opts={
chartArea: {
left: 65,
top: 40
},
vAxis: {
baselineColor: "none"
},
legend: {
position: "none"
},
lineWidth: 1,
fontSize: 8
},
data=new google.visualization.DataTable(tbl,0.6),
line=new google.visualization.DataView(data)
;
line.setColumns([1, 3]);
new google.visualization.LineChart(gel("chart")).draw(line,opts);
}
;
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));
};
}else{
window.alert("There was a problem retrieving the data. Please, try later.");
}
});
});
</script>
</head>
<body>
<div id="container">
<h1>Norwegian Inflation Calculator</h1>
<form>
<fieldset>
<legend>From</legend>
<select id="from"></select>
<input id="amount" type="number" name="amount" value="1000" /> <abbr title="Norwegian krones">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="Norwegian krones">kr</abbr>
</fieldset>
</form>
<div id="chart"></div>
</div>
</body>
</html>
body {
font-family: "Alef", sans-serif;
background-color: #f0f0f0;
font-size: 90%;
}
#container {
width: 287px;
height: 358px;
border: 1px solid #c2c26b;
padding: 2px;
margin: 5em auto;
background-color: #fff;
}
h1, form {
width: 267px;
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment