Skip to content

Instantly share code, notes, and snippets.

@triceam triceam/gist:4978360
Created Feb 18, 2013

Embed
What would you like to do?
Simple HTML DOM Charts
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Chart</title>
<style>
#chart1,
#chart2{
border: 1px solid black;
margin: 0px;
padding:0px;
}
.wrapper {
margin: 0px;
padding: 20px 0px;
}
.bar {
margin: 0px;
padding:10px;
border: 1px solid #666;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background: rgb(41,191,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(41,191,0,1) 0%, rgba(175,255,187,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(41,191,0,1)), color-stop(100%,rgba(175,255,187,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(41,191,0,1) 0%,rgba(175,255,187,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(41,191,0,1) 0%,rgba(175,255,187,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(41,191,0,1) 0%,rgba(175,255,187,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(41,191,0,1) 0%,rgba(175,255,187,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29bf00', endColorstr='#afffbb',GradientType=0 ); /* IE6-9 */
}
.column {
margin: 0px;
border: 1px solid #666;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background: rgb(41,191,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(41,191,0,1) 0%, rgba(175,255,187,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(41,191,0,1)), color-stop(100%,rgba(175,255,187,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(41,191,0,1) 0%,rgba(175,255,187,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(41,191,0,1) 0%,rgba(175,255,187,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(41,191,0,1) 0%,rgba(175,255,187,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(41,191,0,1) 0%,rgba(175,255,187,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29bf00', endColorstr='#afffbb',GradientType=0 ); /* IE6-9 */
}
body {
background: #F00;
}
</style>
</head>
<body>
<div id="chart1" style="width:48%; display:inline-block; position:absolute; left:10px;">
<div class="wrapper">
<div class="bar" style="width:80%" >Bar One</div>
</div>
<div class="wrapper">
<div class="bar" style="width:70%" >Bar Two</div>
</div>
<div class="wrapper">
<div class="bar" style="width:50%" >Bar Three</div>
</div>
<div class="wrapper">
<div class="bar" style="width:60%" >Bar Four</div>
</div>
<div class="wrapper">
<div class="bar" style="width:75%" >Bar Five</div>
</div>
</div>
<div id="chart2" style="width:48%; height:400px; display:inline-block; position:absolute; right:10px;">
<div class="wrapper">
<div class="column" style="height:80%; position: absolute; left: 2.5%; width: 15%; bottom:0px;" >Bar One</div>
</div>
<div class="wrapper">
<div class="column" style="height:70%; position: absolute; left: 22.5%; width: 15%; bottom:0px;" >Bar Two</div>
</div>
<div class="wrapper">
<div class="column" style="height:50%; position: absolute; left: 42.5%; width: 15%; bottom:0px;" >Bar Three</div>
</div>
<div class="wrapper">
<div class="column" style="height:60%; position: absolute; left: 62.5%; width: 15%; bottom:0px;" >Bar Four</div>
</div>
<div class="wrapper">
<div class="column" style="height:75%; position: absolute; left: 82.5%; width: 15%; bottom:0px;" >Bar Five</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.