Skip to content

Instantly share code, notes, and snippets.

@reinholdsson

reinholdsson/README.md

Last active December 19, 2015 18:58
Show Gist options
  • Save reinholdsson/6002420 to your computer and use it in GitHub Desktop.
Save reinholdsson/6002420 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

metagraf

Prisbasbelopp

Data för de olika indexen har hämtats från SCB:s API för Statistikdatabasen. Utifrån dessa har sedan de alternativa prisbasbeloppen beräknats.

<style> img { width: 120px; } </style>
Raw
index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
<link rel='stylesheet' href="http://twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.css">
<link rel='stylesheet' href="http://aozora.github.io/bootplus/assets/css/docs.css">
<script src='https://rawgithub.com/Polychart/polychart2/develop/polychart2.standalone.js' type='text/javascript'></script>
<style>
.rChart {
display: block
margin: auto auto;
width: 100%;
height: 400px;
}
</style>
</head>
<body ng-app>
<div class='container' ng-controller="DemoCtrl" ng-init="drawChart()">
<div class='row'>
<div class='span3'>
<form class='well'>
<label><b>Välj beräkningsunderlag:</b></label>
<select ng-model="opts.y.var"
ng-options="ctl for ctl in controls.y.values">
</select><br>
</form>
</div>
<div class='span8'>
<div class="bs-docs-example">
<div id='chartb949704f034c' class='rChart '>
<svg></svg>
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
function DemoCtrl($scope){
$scope.chartParams = {
"dom": "chartb949704f034c",
"width": 700,
"height": 400,
"layers": [
{
"x": "Year",
"y": "Basbeloppet",
"data": {
"Year": [ 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014 ],
"KPISkuggM": [ 36400, 36500, 36800, 37800, 38500, 39200, 39300, 39600, 40200, 40900, 42600, 42200, 42600, 43900, 44400, 44300 ],
"KPIF": [ 36800, 37300, 37700, 38700, 39400, 40300, 40800, 41200, 42000, 42500, 43900, 44400, 45200, 45900, 46300, 46700 ],
"NPIM": [ 35600, 35200, 35900, 36900, 37700, 38100, 38200, 38300, 38700, 39600, 41000, 40600, 41100, 42000, 42600, 42400 ],
"HIKPIND2": [ 36900, 37100, 37600, 38600, 39300, 40100, 40500, 40900, 41600, 42200, 43900, 44600, 45300, 45900, 46300, 46600 ],
"Basbeloppet": [ 36400, 36600, 36900, 37900, 38600, 39300, 39400, 39700, 40300, 41000, 42800, 42400, 42800, 44000, 44500, 44400 ]
},
"facet": null,
"type": "line",
"size": {
"const": 2
},
"opacity": {
"const": 0.75
}
},
{
"x": "Year",
"y": "Basbeloppet",
"data": {
"Year": [ 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014 ],
"KPISkuggM": [ 36400, 36500, 36800, 37800, 38500, 39200, 39300, 39600, 40200, 40900, 42600, 42200, 42600, 43900, 44400, 44300 ],
"KPIF": [ 36800, 37300, 37700, 38700, 39400, 40300, 40800, 41200, 42000, 42500, 43900, 44400, 45200, 45900, 46300, 46700 ],
"NPIM": [ 35600, 35200, 35900, 36900, 37700, 38100, 38200, 38300, 38700, 39600, 41000, 40600, 41100, 42000, 42600, 42400 ],
"HIKPIND2": [ 36900, 37100, 37600, 38600, 39300, 40100, 40500, 40900, 41600, 42200, 43900, 44600, 45300, 45900, 46300, 46600 ],
"Basbeloppet": [ 36400, 36600, 36900, 37900, 38600, 39300, 39400, 39700, 40300, 41000, 42800, 42400, 42800, 44000, 44500, 44400 ]
},
"facet": null,
"type": "line",
"size": {
"const": 2
},
"opacity": {
"const": 0.75
},
"color": {
"const": "black"
}
},
{
"x": "Year",
"y": "Basbeloppet",
"data": {
"Year": [ 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014 ],
"KPISkuggM": [ 36400, 36500, 36800, 37800, 38500, 39200, 39300, 39600, 40200, 40900, 42600, 42200, 42600, 43900, 44400, 44300 ],
"KPIF": [ 36800, 37300, 37700, 38700, 39400, 40300, 40800, 41200, 42000, 42500, 43900, 44400, 45200, 45900, 46300, 46700 ],
"NPIM": [ 35600, 35200, 35900, 36900, 37700, 38100, 38200, 38300, 38700, 39600, 41000, 40600, 41100, 42000, 42600, 42400 ],
"HIKPIND2": [ 36900, 37100, 37600, 38600, 39300, 40100, 40500, 40900, 41600, 42200, 43900, 44600, 45300, 45900, 46300, 46600 ],
"Basbeloppet": [ 36400, 36600, 36900, 37900, 38600, 39300, 39400, 39700, 40300, 41000, 42800, 42400, 42800, 44000, 44500, 44400 ]
},
"facet": null,
"type": "point",
"size": {
"const": 3
},
"color": {
"const": "black"
},
"tooltip": function(item){return item.Basbeloppet}
}
],
"facet": [],
"guides": {
"y": {
"title": ""
},
"x": {
"title": "",
"numticks": 16,
"min": 1998.5,
"max": 2014.5
}
},
"coord": [],
"id": "chartb949704f034c"
}
_.each($scope.chartParams.layers, function(el){
el.data = polyjs.data(el.data)
})
$scope.controls = {
"y": {
"name": "y",
"value": "Basbeloppet",
"values": [ "Basbeloppet", "HIKPIND2", "KPIF", "KPISkuggM", "NPIM" ],
"label": "Välj beräkningsunderlag:"
}
}
$scope.opts = $scope.chartParams.layers[0];
$scope.drawChart = function(){
$scope.chart = polyjs.chart($scope.chartParams)
}
$scope.updateChart = function(){
$scope.chart.make($scope.chartParams)
}
$scope.$watch('opts', function(){
$scope.chartParams.layers[0] = $scope.opts;
$scope.updateChart();
}, true)
}
</script>
</body>
<!-- Google Prettify -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script
src='https://google-code-prettify.googlecode.com/svn-history/r232/trunk/src/lang-r.js'>
</script>
<script>
var pres = document.getElementsByTagName("pre");
for (var i=0; i < pres.length; ++i) {
pres[i].className = "prettyprint linenums";
}
prettyPrint();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment