gisminister/index.html

## index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Embedded chart</title>

    <link href="https://r.acdn.no/s3files/castor/arena/0.5.127/css/design0.css" rel="stylesheet" type="text/css">
    <link href="http://www.ba.no/vis/kommunebasen/stylesheets/lib/c3.min.css" rel="stylesheet" type="text/css">
    <link href="http://www.ba.no/vis/kommunebasen/stylesheets/lib/kommunebasen.c3.css" rel="stylesheet" type="text/css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
        @import url(http://fonts.googleapis.com/css?family=Open+Sans:400);

        html,body
        {
            height:100%;
            width:100%;
            margin:0;padding:0;
        }
        body {
            font-family: "Open Sans", "Helvetica Neue", sans-serif;
        }
        div.table
        {
            display:table;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        div.table > div.row
        {
            display:table-row;
            width: 100%;
        }
        div.table > div.row > div.cell
        {
            display:table-cell;
        }

        div.table > div.row.flex
        {
            height:100%;
            overflow: hidden;
        }

        h1 {
            font-size: 22px;
            font-weight: 600;
            margin: 0px;
            padding: 0px 0px 0px 5px;
            clear: none;
        }

        .loader {
            margin:auto;
        }
        .overlay {
            position: fixed;
            top: 0;
            bottom: 0;
            background-color: rgba(255,255,255,0.7);
        }
        .hidden {
            display: none;
        }

        #infoButton {
            margin: 10px;
            cursor: pointer;
            float:right;
            font-family: "Times", "Times New Roman", serif;
            font-weight: 700;
            width: 32px;
            height: 32px;
            line-height: 32px;
        }
        #infoButton:after {
            content: "i";
        }
        #infoButton.selected {
            font-size: 12px;
        }
        #infoButton.selected:after {
            content: "";
        }

        #embedGraph {
            display: table-cell;
            height: 100%;
            vertical-align: middle;
            text-align: center;
            padding: 0px;
            margin: 0px;
        }

        #graphDescription {
            padding: 10px;
            height: 100%;
            overflow-y: auto;
        }


    </style>
</head>
<body>
    <div id="page" class="table">
        <div class="row">
            <i id="infoButton" class="am-icon am-icon--circle" aria-hidden="true"></i>
            <h1 id="graphTitle"></h1>
        </div>
        <div id="contentRow" class="row flex">
            <div id="embedGraph">
                    <div class="loader am-spinner"></div>
            </div>
        </div>
    </div>
    <div id="overlay" class="overlay hidden">
        <div id="graphDescription">
            Her finner vi beskrivelse av datasettet.
            Inkludert en lenke som man kan klikke på uten å være raskere enn Lucky Luke.
            Jeg må lage denne beskrivelsen litt lang nå slik at vi ser hva som skjer teksten trenger mer plass
            enn det som er tilgjengelig. Ideelt sett skal vi da få vertikal scroll inni overlayboksen,
            men det gjenstår å se om det er det som faktisk skjer. Jeg må innrømme at jeg er veldig spent
            for selv om jeg føler at jeg byner å få kontroll på dette med data og internett og html og sånn nå,
            så er det alltid så masse nytt å lære. Det gjelder jo i livet forøvrig også det altså,
            det er jo ikke unikt for data og internett, men jeg føler at utviklingen på dette området kanskje
            går litt fortere enn, for eksempel, utviklingen innen byggfag eller apotekernæringen,
            men det er mulig jeg er ignorant.
            <p></p><a href="amedia.no" target="_blank">Her er lenka forresten</a></p>
        </div>
    </div>
    <script>
        //Set title first
        document.getElementById("graphTitle").innerHTML = "En ganske lang figurtittel som muligens vil brekke over flere linjer (men ikke sikkert)";

        var delay = 500;

        //Get some elements we need to reuse later
        var embedElement = document.getElementById("embedGraph"),
                buttonElement = document.getElementById("infoButton"),
                overlayElement = document.getElementById("overlay");

        //Wrap remaining action in a setTimeout
        setTimeout(function(){
            var bbox = calculateBBoxBelowTopOf(embedElement);
            overlayElement.style.top = bbox.top+"px";
            var chart = c3.generate({
                bindto: embedElement,
                size: bbox.size,
                data: {
                    x: 'x',
                    columns: [
                        ['x', 2010, 2011, 2012, 2013, 2014, 2015, 2016],
                        ['Oyslo', 30, 200, 100, 400, 150, 250, 233],
                        ['Bjarum', 50, 20, 10, 40, 15, 25, 34],
                        ['Djammen', 40, 44, 65, 47, 34, 67, 65],
                        ['Biargen', 20, 45, 10, 44, 87, 54, 20],
                        ['Hoygesund', 100, 150, 300, 200, 100, 50, 70],
                        ['Toinsberg', 45, 34, 10, 87, 46, 35, 80]
                    ]
                },
                point: {
                    r: 4
                },
                padding: {
                    right: 12
                },
                margin: {
                    left: 0
                },
                axis: {
                    x: {
                        show: true,
                        tick: {
                            centered: true
                        }
                    },
                    y: {
                        show: true,
                        label: {
                            text: "Kroner per innbygger",
                            position: 'outer-middle'
                        },
                        tick: {
                            format: function (d) { return d.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); }
                        }
                    }
                }
            });

            //On window resize, update chart and overlay top
            window.onresize = function(){
                var bbox = calculateBBoxBelowTopOf(embedElement);
                overlayElement.style.top = bbox.top+"px";
                chart.resize(bbox.size);
                return;
            };

            //Show info on button click
            buttonElement.onclick = function(){
                toggleOverlay(buttonElement, overlayElement);
                return;
            }

        }, 1000);

        //Toggle overlay visibility and btn state
        function toggleOverlay(btn, overlay){
            btn.classList.toggle("selected");
            btn.classList.toggle("am-icon--close");
            overlay.classList.toggle("hidden");
            return;
        }

        //Calculate window width and heigth available below the top of element el
        function calculateBBoxBelowTopOf(el){
            var t = el.offsetTop,
                    w = window.innerWidth
                            || document.documentElement.clientWidth
                            || document.body.clientWidth,
                    h = (window.innerHeight
                            || document.documentElement.clientHeight
                            || document.body.clientHeight) - t - 5,
                    bbox = {
                        top: t,
                        size: {
                            width: w,
                            height: h
                        }
                    };
            return bbox;
        }


    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Embedded chart</title>

	<link href="https://r.acdn.no/s3files/castor/arena/0.5.127/css/design0.css" rel="stylesheet" type="text/css">
	<link href="http://www.ba.no/vis/kommunebasen/stylesheets/lib/c3.min.css" rel="stylesheet" type="text/css">
	<link href="http://www.ba.no/vis/kommunebasen/stylesheets/lib/kommunebasen.c3.css" rel="stylesheet" type="text/css">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
	<style>
	@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
	@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);

	html,body
	{
	height:100%;
	width:100%;
	margin:0;padding:0;
	}
	body {
	font-family: "Open Sans", "Helvetica Neue", sans-serif;
	}
	div.table
	{
	display:table;
	height: 100%;
	width: 100%;
	overflow: hidden;
	}
	div.table > div.row
	{
	display:table-row;
	width: 100%;
	}
	div.table > div.row > div.cell
	{
	display:table-cell;
	}

	div.table > div.row.flex
	{
	height:100%;
	overflow: hidden;
	}

	h1 {
	font-size: 22px;
	font-weight: 600;
	margin: 0px;
	padding: 0px 0px 0px 5px;
	clear: none;
	}

	.loader {
	margin:auto;
	}
	.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	background-color: rgba(255,255,255,0.7);
	}
	.hidden {
	display: none;
	}

	#infoButton {
	margin: 10px;
	cursor: pointer;
	float:right;
	font-family: "Times", "Times New Roman", serif;
	font-weight: 700;
	width: 32px;
	height: 32px;
	line-height: 32px;
	}
	#infoButton:after {
	content: "i";
	}
	#infoButton.selected {
	font-size: 12px;
	}
	#infoButton.selected:after {
	content: "";
	}

	#embedGraph {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	text-align: center;
	padding: 0px;
	margin: 0px;
	}

	#graphDescription {
	padding: 10px;
	height: 100%;
	overflow-y: auto;
	}


	</style>
	</head>
	<body>
	<div id="page" class="table">
	<div class="row">
	<i id="infoButton" class="am-icon am-icon--circle" aria-hidden="true"></i>
	<h1 id="graphTitle"></h1>
	</div>
	<div id="contentRow" class="row flex">
	<div id="embedGraph">
	<div class="loader am-spinner"></div>
	</div>
	</div>
	</div>
	<div id="overlay" class="overlay hidden">
	<div id="graphDescription">
	Her finner vi beskrivelse av datasettet.
	Inkludert en lenke som man kan klikke på uten å være raskere enn Lucky Luke.
	Jeg må lage denne beskrivelsen litt lang nå slik at vi ser hva som skjer teksten trenger mer plass
	enn det som er tilgjengelig. Ideelt sett skal vi da få vertikal scroll inni overlayboksen,
	men det gjenstår å se om det er det som faktisk skjer. Jeg må innrømme at jeg er veldig spent
	for selv om jeg føler at jeg byner å få kontroll på dette med data og internett og html og sånn nå,
	så er det alltid så masse nytt å lære. Det gjelder jo i livet forøvrig også det altså,
	det er jo ikke unikt for data og internett, men jeg føler at utviklingen på dette området kanskje
	går litt fortere enn, for eksempel, utviklingen innen byggfag eller apotekernæringen,
	men det er mulig jeg er ignorant.
	<p></p><a href="amedia.no" target="_blank">Her er lenka forresten</a></p>
	</div>
	</div>
	<script>
	//Set title first
	document.getElementById("graphTitle").innerHTML = "En ganske lang figurtittel som muligens vil brekke over flere linjer (men ikke sikkert)";

	var delay = 500;

	//Get some elements we need to reuse later
	var embedElement = document.getElementById("embedGraph"),
	buttonElement = document.getElementById("infoButton"),
	overlayElement = document.getElementById("overlay");

	//Wrap remaining action in a setTimeout
	setTimeout(function(){
	var bbox = calculateBBoxBelowTopOf(embedElement);
	overlayElement.style.top = bbox.top+"px";
	var chart = c3.generate({
	bindto: embedElement,
	size: bbox.size,
	data: {
	x: 'x',
	columns: [
	['x', 2010, 2011, 2012, 2013, 2014, 2015, 2016],
	['Oyslo', 30, 200, 100, 400, 150, 250, 233],
	['Bjarum', 50, 20, 10, 40, 15, 25, 34],
	['Djammen', 40, 44, 65, 47, 34, 67, 65],
	['Biargen', 20, 45, 10, 44, 87, 54, 20],
	['Hoygesund', 100, 150, 300, 200, 100, 50, 70],
	['Toinsberg', 45, 34, 10, 87, 46, 35, 80]
	]
	},
	point: {
	r: 4
	},
	padding: {
	right: 12
	},
	margin: {
	left: 0
	},
	axis: {
	x: {
	show: true,
	tick: {
	centered: true
	}
	},
	y: {
	show: true,
	label: {
	text: "Kroner per innbygger",
	position: 'outer-middle'
	},
	tick: {
	format: function (d) { return d.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); }
	}
	}
	}
	});

	//On window resize, update chart and overlay top
	window.onresize = function(){
	var bbox = calculateBBoxBelowTopOf(embedElement);
	overlayElement.style.top = bbox.top+"px";
	chart.resize(bbox.size);
	return;
	};

	//Show info on button click
	buttonElement.onclick = function(){
	toggleOverlay(buttonElement, overlayElement);
	return;
	}

	}, 1000);

	//Toggle overlay visibility and btn state
	function toggleOverlay(btn, overlay){
	btn.classList.toggle("selected");
	btn.classList.toggle("am-icon--close");
	overlay.classList.toggle("hidden");
	return;
	}

	//Calculate window width and heigth available below the top of element el
	function calculateBBoxBelowTopOf(el){
	var t = el.offsetTop,
	w = window.innerWidth
	\|\| document.documentElement.clientWidth
	\|\| document.body.clientWidth,
	h = (window.innerHeight
	\|\| document.documentElement.clientHeight
	\|\| document.body.clientHeight) - t - 5,
	bbox = {
	top: t,
	size: {
	width: w,
	height: h
	}
	};
	return bbox;
	}


	</script>
	</body>
	</html>