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.
Klicka under grafen för att visa de olika prisbasbeloppen och markera linjerna för att visa siffrorna.
<style> img { width: 120px; } </style>| <!doctype HTML> | |
| <meta charset = 'utf-8'> | |
| <html> | |
| <head> | |
| <script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script> | |
| <script src='http://code.highcharts.com/highcharts.js' type='text/javascript'></script> | |
| <script src='http://code.highcharts.com/highcharts-more.js' type='text/javascript'></script> | |
| <style> | |
| .rChart { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 800px; | |
| height: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='chartb1cb141a1b55' class='rChart highcharts'></div> | |
| <script type='text/javascript'> | |
| (function($){ | |
| $(function () { | |
| var chart = new Highcharts.Chart({ | |
| "dom": "chartb1cb141a1b55", | |
| "width": 800, | |
| "height": 400, | |
| "credits": { | |
| "href": null, | |
| "text": null | |
| }, | |
| "title": { | |
| "text": "" | |
| }, | |
| "yAxis": { | |
| "title": { | |
| "text": "Kronor" | |
| }, | |
| "labels": { | |
| "formatter": function() { | |
| return Highcharts.numberFormat(this.value, 0, '', ' '); | |
| } | |
| } | |
| }, | |
| "series": [ | |
| { | |
| "data": [ 36400, 36600, 36900, 37900, 38600, 39300, 39400, 39700, 40300, 41000, 42800, 42400, 42800, 44000, 44500, 44400 ], | |
| "name": "Prisbasbelopp", | |
| "visible": true, | |
| "dashStyle": "Solid", | |
| "showInLegend": false | |
| }, | |
| { | |
| "data": [ 36400, 36500, 36800, 37800, 38500, 39200, 39300, 39600, 40200, 40900, 42600, 42200, 42600, 43900, 44400, 44300 ], | |
| "name": "KPI, skuggindextal", | |
| "visible": false, | |
| "dashStyle": "ShortDash" | |
| }, | |
| { | |
| "data": [ 36800, 37300, 37700, 38700, 39400, 40300, 40800, 41200, 42000, 42500, 43900, 44400, 45200, 45900, 46300, 46700 ], | |
| "name": "KPI med fast ränta", | |
| "visible": false, | |
| "dashStyle": "ShortDash" | |
| }, | |
| { | |
| "data": [ 35600, 35200, 35900, 36900, 37700, 38100, 38200, 38300, 38700, 39600, 41000, 40600, 41100, 42000, 42600, 42400 ], | |
| "name": "Nettoprisindex", | |
| "visible": false, | |
| "dashStyle": "ShortDash" | |
| }, | |
| { | |
| "data": [ 36900, 37100, 37600, 38600, 39300, 40100, 40500, 40900, 41600, 42200, 43900, 44600, 45300, 45900, 46300, 46600 ], | |
| "name": "Harmoniserat KPI", | |
| "visible": false, | |
| "dashStyle": "ShortDash" | |
| } | |
| ], | |
| "xAxis": { | |
| "title": { | |
| "enabled": false | |
| }, | |
| "categories": [ 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014 ], | |
| "labels": { | |
| "rotation": -45, | |
| "align": "right", | |
| "formatter": function() { | |
| return Highcharts.numberFormat(this.value, 0, '', ''); | |
| } | |
| } | |
| }, | |
| "tooltip": { | |
| "formatter": function() { | |
| var s = '<b>'+ this.x +'</b>'; | |
| $.each(this.points, function(i, point) { | |
| s += '<br/>'+ point.series.name +': '+ | |
| Highcharts.numberFormat(point.y, 0, '', ' '); | |
| }); | |
| return s; | |
| } , | |
| "shared": true | |
| }, | |
| "colors": ["rgba(0, 0, 0, .75)", "rgba(223, 83, 83, .75)", "rgba(60, 179, 113, .75)", "rgba(238, 130, 238, .75)", "rgba(30, 144, 255, .75)"], | |
| "chart": { | |
| "zoomType": "x", | |
| "marginTop": 30, | |
| "renderTo": "chartb1cb141a1b55" | |
| }, | |
| "legend": { | |
| "margin": 30 | |
| }, | |
| "plotOptions": { | |
| "series": { | |
| "marker": { | |
| "symbol": "circle" | |
| } | |
| } | |
| }, | |
| "id": "chartb1cb141a1b55" | |
| }); | |
| }); | |
| })(jQuery); | |
| </script> | |
| </body> | |
| </html> |
