Skip to content

Instantly share code, notes, and snippets.

@Mortimerp9

Mortimerp9/dabblet.css

Created October 18, 2012 01:24
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Mortimerp9/3909351 to your computer and use it in GitHub Desktop.
Save Mortimerp9/3909351 to your computer and use it in GitHub Desktop.
Download ZIP
CSS bar graph with Positive and Negative values
Raw
dabblet.css
/**
* CSS bar graph with Positive and Negative values
*/
.graph {
width: 100px;
border: 1px solid #aeaeae;
background-color: #eaeaea;
}
/* Start of "Micro clearfix" */
.cf { zoom: 1; }
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
/* End of "Micro clearfix" */
.ext {
width: 50px;
padding: 2px 0;
}
.ext.neg {
border-right: 1px solid black;
}
.ext.pos {
margin-left: 50px;
border-left: 1px solid black;
}
.ext.neg .bar {
float: right;
margin-bottom: 5px;
background-color: red;
}
.ext.pos .bar {
background-color: green;
}
.bar {
height: 5px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="graph cf">
<div class="ext pos"><div style="width: 50%;" class="bar"></div></div>
<div class="ext pos"><div style="width: 25%;" class="bar"></div></div>
<div class="ext pos"><div style="width: 10%;" class="bar"></div></div>
<div class="ext neg"><div style="width: 90%;" class="bar"></div></div>
<div class="ext neg"><div style="width: 40%;" class="bar"></div></div>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
@Mortimerp9
Copy link
Author

This is a simple code for horizontal bars with an axis (0) in the middle and the bars either extending to the negative or the positive (left or right of the axis). Similar to what Google Analytics shows.

see it at http://dabblet.com/gist/3909351

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment