Skip to content

Instantly share code, notes, and snippets.

@triceam

triceam/gist:4978360

Created February 18, 2013 15:51
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 triceam/4978360 to your computer and use it in GitHub Desktop.
Save triceam/4978360 to your computer and use it in GitHub Desktop.
Download ZIP
Simple HTML DOM Charts
Raw
gistfile1.html
<!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