Here's a way to very clean and concise way to add a bar graph to some data. You may want to present this data in HTML in a clean manner, but allowing it to look nice. That's where the Horizontal Bar Graph can help you out. The major benefit of this is that you can give a nice presentation without sacraficing your SEO benefits of sharing the data.
Use the links above to download or learn more about this plug-in. I'd appreciate any feedback or comments.
- Firefox
- 47.0
- IE8
- 13.3
- IE7
- 13.3
- IE6
- 11.1
- Chrome
- 8.5
- Safari
- 3.8
- Opera
- 2.3
Help Improve This Plugin
Below is the HTML, CSS and JavaScript that is required to generate the bar graph above.
HTML for this Horizontal Bar Graph
<dl class="browser-data" title="Browser statistics as of November 2009">
<dt>Firefox</dt><dd>47.0</dd>
<dt>IE8</dt><dd>13.3</dd>
<dt>IE7</dt><dd>13.3</dd>
<dt>IE6</dt><dd>11.1</dd>
<dt>Chrome</dt><dd>8.5</dd>
<dt>Safari</dt><dd>3.8</dd>
<dt>Opera</dt><dd>2.3</dd>
</dl>
Custom CSS For this Graph
.hbg-bar { padding-left: 5px; background-color: #369; color: #fff; font-weight: bold; }
.hbg-title { text-align: center; font-weight: bold; }
JavaScript For this Graph
$(".browser-data").horizontalBarGraph({interval: 0.1});
There are more bar graph demos if you want to see what else this plug-in can do.