public
Created

Simple HTML DOM Charts

  • Download Gist
gistfile1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122
 
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.