Skip to content

Instantly share code, notes, and snippets.

@gisminister

gisminister/index.html

Created August 21, 2015 09:24
Show Gist options
  • Save gisminister/77084301811625377393 to your computer and use it in GitHub Desktop.
Save gisminister/77084301811625377393 to your computer and use it in GitHub Desktop.
Download ZIP
Denne er bedre mario...
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment