Skip to content

Instantly share code, notes, and snippets.

@gisminister

gisminister/index.html

Created August 21, 2015 08:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gisminister/600d9f579cdca844f18c to your computer and use it in GitHub Desktop.
Save gisminister/600d9f579cdca844f18c to your computer and use it in GitHub Desktop.
Download ZIP
Prototype ny embedside
Raw
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Embedded chart</title>
<link href="https://doc.api.no/data/styleguide/build/styleguide/public/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;
}
#page > div.row.flex
{
height:100%;
overflow: hidden;
}
h1 {
font-size: 22px;
font-weight: 600;
margin: 0px;
padding: 0px 0px 0px 5px;
clear: none;
}
button {
border-radius: 3px;
padding: 3px 5px;
cursor: pointer;
float:right;
margin: 3px 7px 3px 5px;
}
/* TODO: Set style for active button*/
button.active {
color: #555;
}
#embedGraph {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
padding: 0px;
margin: 0px;
background: gray;
}
.loader {
margin:auto;
}
.hidden {
display: none;
}
#overlay {
position: fixed;
top: 0;
bottom: 0;
background-color: rgba(255,255,255,0.7);
}
#graphDescription {
position: static;
padding: 10px;
height: 100%;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="page" class="table">
<div class="row">
<button id="descriptionButton">Info</button>
<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="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>
document.getElementById("graphTitle").innerHTML = "En ganske lang figurtittel som muligens vil brekke over flere linjer (men ikke sikkert)";
var embedElement = document.getElementById("embedGraph"),
buttonElement = document.getElementById("descriptionButton"),
overlayElement = document.getElementById("overlay");
setTimeout(function(){
var bbox = calculateBBoxBelow(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, " "); }
}
}
}
});
//Update chart on window resize
window.onresize = function(){
var bbox = calculateBBoxBelow(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 by checking its current class
function toggleOverlay(btn, overlay){
btn.classList.toggle("active");
overlay.classList.toggle("hidden");
return;
}
//Calculate window width and heigth available from the top of element el and down
function calculateBBoxBelow(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