Skip to content

Instantly share code, notes, and snippets.

@RuanAragao

RuanAragao/index.html

Created March 9, 2015 19:31
Show Gist options
  • Save RuanAragao/848d143d6ca7d64ab962 to your computer and use it in GitHub Desktop.
Save RuanAragao/848d143d6ca7d64ab962 to your computer and use it in GitHub Desktop.
Download ZIP
grafico // source http://jsbin.com/sakaru
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>grafico</title>
<style id="jsbin-css">
body {
background-color: #333;
}
.grafico {
font-family: arial; /* remover na implementação */
border: solid thin silver;
width: 450px;
height: 300px;
padding: 10px;
}
.column-g {
width: 70px;
height: 300px;
margin: 2px 5px;
float: left;
position: relative;
}
.column-g .fill {
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
background-color: #fdca01;
}
.label-g {
color: white;
text-align: center;
}
.data-fill {
color: #333;
display: block;
padding-top: 6px;
}
.column-g:nth-child(1) .fill {
height: 10%;
}
.column-g:nth-child(2) .fill {
height: 70%;
}
.column-g:nth-child(3) .fill {
height: 40%;
}
</style>
</head>
<body>
<div class="grafico">
<div class="container-columns" id="peba-col-g">
</div>
</div>
<script id="jsbin-javascript">
function renderG(cols_box, label, val, pcent) {
$(cols_box).append('<div class="column-g"><div class="fill" style="height:'+pcent+'%;"><span class="data-fill">'+val+'</span></div><p class="label-g">'+label+'</p></div>');
return 0;
}
$(document).ready(function() {
console.log('ready');
});
</script>
<script id="jsbin-source-css" type="text/css">body {
background-color: #333;
}
.grafico {
font-family: arial; /* remover na implementação */
border: solid thin silver;
width: 450px;
height: 300px;
padding: 10px;
}
.column-g {
width: 70px;
height: 300px;
margin: 2px 5px;
float: left;
position: relative;
}
.column-g .fill {
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
background-color: #fdca01;
}
.label-g {
color: white;
text-align: center;
}
.data-fill {
color: #333;
display: block;
padding-top: 6px;
}
.column-g:nth-child(1) .fill {
height: 10%;
}
.column-g:nth-child(2) .fill {
height: 70%;
}
.column-g:nth-child(3) .fill {
height: 40%;
}</script>
</body>
</html>
Raw
jsbin.sakaru.css
body {
background-color: #333;
}
.grafico {
font-family: arial; /* remover na implementação */
border: solid thin silver;
width: 450px;
height: 300px;
padding: 10px;
}
.column-g {
width: 70px;
height: 300px;
margin: 2px 5px;
float: left;
position: relative;
}
.column-g .fill {
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
background-color: #fdca01;
}
.label-g {
color: white;
text-align: center;
}
.data-fill {
color: #333;
display: block;
padding-top: 6px;
}
.column-g:nth-child(1) .fill {
height: 10%;
}
.column-g:nth-child(2) .fill {
height: 70%;
}
.column-g:nth-child(3) .fill {
height: 40%;
}
Raw
jsbin.sakaru.js
function renderG(cols_box, label, val, pcent) {
$(cols_box).append('<div class="column-g"><div class="fill" style="height:'+pcent+'%;"><span class="data-fill">'+val+'</span></div><p class="label-g">'+label+'</p></div>');
return 0;
}
$(document).ready(function() {
console.log('ready');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment