Senaste månadens fördelning

		
<header>
    <h1>Senaste månadens fördelning</h1>
</header>
<main>
    <article>
        <section>
            <h3>Total kostnad</h3>
            <canvas id="total" width="200" height="200">[No canvas support]</canvas>
            <iframe title="Transaktioner" class="table short" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ9t4IfM5i_Zv0iLCg35D5DIWgfiYntQqKCasIQKQil8mGzZ7Cs9ZQnzvoY2gyrPUoYqn9RVdbuG9cZ/pubhtml/sheet?headers=false&gid=0&range=A2:C4"></iframe>
        </section>
        <section>
            <h3>Boende kostnad</h3>
            <canvas id="housing" width="200" height="200">[No canvas support]</canvas>
            <iframe title="Transaktioner" class="table short" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ9t4IfM5i_Zv0iLCg35D5DIWgfiYntQqKCasIQKQil8mGzZ7Cs9ZQnzvoY2gyrPUoYqn9RVdbuG9cZ/pubhtml/sheet?headers=false&gid=0&range=D2:F5"></iframe>
        </section>
        <section>
            <h3>Fasta kostnad</h3>
            <canvas id="fixed" width="200" height="200">[No canvas support]</canvas>
            <iframe title="Transaktioner" class="table tall" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ9t4IfM5i_Zv0iLCg35D5DIWgfiYntQqKCasIQKQil8mGzZ7Cs9ZQnzvoY2gyrPUoYqn9RVdbuG9cZ/pubhtml/sheet?headers=false&gid=0&range=G2:I10"></iframe>
        </section>
        <section>
            <h3>Rörliga kostnad</h3>
            <canvas id="variable" width="200" height="200">[No canvas support]</canvas>
            <iframe title="Transaktioner" class="table tall" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ9t4IfM5i_Zv0iLCg35D5DIWgfiYntQqKCasIQKQil8mGzZ7Cs9ZQnzvoY2gyrPUoYqn9RVdbuG9cZ/pubhtml/sheet?headers=false&gid=0&range=J2:L10"></iframe>
        </section>
    </article>
</main>
<script src="JavaScript/RGraph/RGraph.common.core.js"></script>
<script src="JavaScript/RGraph/RGraph.common.sheets.js"></script>
<script src="JavaScript/RGraph/RGraph.common.key.js"></script>
<script src="JavaScript/RGraph/RGraph.common.dynamic.js"></script>
<script src="JavaScript/RGraph/RGraph.common.tooltips.js"></script>
<script src="JavaScript/RGraph/RGraph.pie.js"></script>
<script>
    new RGraph.Sheets(
    			'AIzaSyA9oqmzJDyQQ451lKHuBaCOzRTw9hsETxY',
    			'1TAWiJ7i6kiPt0tSmZK0dy2LqpAZSV_U_mHb9da_DIPE',
    			'Charts',
    		function (sheet) {
        "use strict";
        var data, labels, row;
        data = sheet.get("C2:C4");
        labels = sheet.get("B2:B4");
        row = sheet.get("C2:C4");
    
        for (var i = 0; i < row.length; i++) {
            row[i] = Number(String(row[i]).replace(/\s/, ""));
            labels[i] = "\n" + labels[i];
        }
    
        var bar = new RGraph.Pie({
            id: "total",
            data: data,
            options: {
                colors: ["#425ffd", "#3a7822", "#f46524"],
                shadow: false,
                colorsStroke: "white",
                linewidth: 2,
                textSize: 16,
                tooltips: '<span style="font-size:12pt">%{property:myDaynames[%{index}]}<br /><span style="font-weight: bold; font-size:20pt">%{value_formatted}</span>',
                tooltipsFormattedUnitsPost: "%",
                tooltipsPointer: false,
                tooltipsPositionStatic: false,
                tooltipsCss: {
                    backgroundColor: "white",
                    color: "black",
                    border: "3px solid black",
                },
                myDaynames: labels,
                keyPositionGraphBoxed: false,
            },
        }).draw();
    });
</script>
<script>
    new RGraph.Sheets(
    				'AIzaSyA9oqmzJDyQQ451lKHuBaCOzRTw9hsETxY',
    				'1TAWiJ7i6kiPt0tSmZK0dy2LqpAZSV_U_mHb9da_DIPE',
    				'Charts',
    			function (sheet)
    			{
    			var data = sheet.get('F2:F5');
    			var labels = sheet.get('E2:E5');
    			var row = sheet.get('F2:F5');
    
    			for (var i=0; i<row.length; ++i) {
    				row[i] = Number(String(row[i]).replace(/\s/, ''));
    			}
    
    			for (var i=0; i<labels.length; i+=2) {
    				labels[i] = "\n" + labels[i];
    			}
    
    			var bar = new RGraph.Pie({
    				id: 'housing',
    				data: data,
    				options: {
    					colors: ['#425ffd','#687ffe','#8e9ffe','#b3bffe'],
    					shadow: false,
    					colorsStroke: 'white',
    					linewidth: 2,
    					textSize: 16,
    					tooltips: '<span style="font-size:12pt">%{property:myDaynames[%{index}]}<br /><span style="font-weight: bold; font-size:20pt">%{value_formatted}</span>',
    					tooltipsFormattedUnitsPost: '%',
    					tooltipsPointer: false,
    					tooltipsPositionStatic: false,
    					tooltipsCss: {
    						backgroundColor: 'white',
    						color: 'black',
    						border: '3px solid black'
    					},
    					myDaynames: labels,
    					keyPositionGraphBoxed: false,
    			}
    			}).draw();
    		});
</script>
<script>
    new RGraph.Sheets(
    				'AIzaSyA9oqmzJDyQQ451lKHuBaCOzRTw9hsETxY',
    				'1TAWiJ7i6kiPt0tSmZK0dy2LqpAZSV_U_mHb9da_DIPE',
    				'Charts',
    			function (sheet)
    			{
    			var data = sheet.get('I2:I10');
    			var labels = sheet.get('H2:H10');
    
    			for (var i=0; i<data.length; ++i) {
    				data[i] = Number(String(data[i]).replace(/\s/, ''));
    			}
    
    			for (var i=0; i<labels.length; i+=2) {
    				labels[i] = "\n" + labels[i];
    			}
    
    			var bar = new RGraph.Pie({
    				id: 'fixed',
    				data: data,
    				options: {
    					colors: ['#3a7822','#418626','#48952b','#4fa32f','#56b233','#5ec137','#67c941','#73cd50','#7fd15f'],
    					shadow: false,
    					colorsStroke: 'white',
    					linewidth: 2,
    					textSize: 16,
    					tooltips: '<span style="font-size:12pt">%{property:myDaynames[%{index}]}<br /><span style="font-weight: bold; font-size:20pt">%{value_formatted}</span>',
    					tooltipsFormattedUnitsPost: '%',
    					tooltipsPointer: false,
    					tooltipsPositionStatic: false,
    					tooltipsCss: {
    						backgroundColor: 'white',
    						color: 'black',
    						border: '3px solid black'
    					},
    					myDaynames: labels,
    					keyPositionGraphBoxed: false,
    			}
    			}).draw();
    		});
</script>
<script>
    new RGraph.Sheets(
    				'AIzaSyA9oqmzJDyQQ451lKHuBaCOzRTw9hsETxY',
    				'1TAWiJ7i6kiPt0tSmZK0dy2LqpAZSV_U_mHb9da_DIPE',
    				'Charts',
    			function (sheet)
    			{
    			var data = sheet.get('L2:L10');
    			var labels = sheet.get('K2:K10');
    			var row = sheet.get('L2:L10');
    
    			for (var i=0; i<row.length; ++i) {
    				row[i] = Number(String(row[i]).replace(/\s/, ''));
    			}
    
    			for (var i=0; i<labels.length; i+=2) {
    				labels[i] = "\n" + labels[i];
    			}
    
    			var bar = new RGraph.Pie({
    				id: 'variable',
    				data: data,
    				options: {
    					colors: ['#f46524','#f67132','#f87d40','#fa884e','#fb935c','#fd9e6a','#fea978','#ffb387','#ffbd96'],
    					shadow: false,
    					colorsStroke: 'white',
    					linewidth: 2,
    					textSize: 16,
    					tooltips: '<span style="font-size:12pt">%{property:myDaynames[%{index}]}<br /><span style="font-weight: bold; font-size:20pt">%{value_formatted}</span>',
    					tooltipsFormattedUnitsPost: '%',
    					tooltipsPointer: false,
    					tooltipsPositionStatic: false,
    					tooltipsCss: {
    						backgroundColor: 'white',
    						color: 'black',
    						border: '3px solid black'
    					},
    					myDaynames: labels,
    					keyPositionGraphBoxed: false,
    			}
    			}).draw();
    		});
</script>