Pure CSS/HTML bar chart
posted on March 22, 2013, 4:59 pm in
Draw a bar chart in pure CSS/HTML with this small JavaScript snippet. No external dependancies needed.
The Code
JavaScript
/* File: CSS/HTML Bar Chart Builder
* Date: March 22, 2013
* License: MIT (http://opensource.org/licenses/MIT)
* Copyright (C) 2013 by http://codeeverywhere.ca
*/
var uiBarChart = function(settings) {
var
data = settings['data'] || [],
labels = settings['labels'] || [],
targetID = settings['targetID'] || 'ui-chart',
el = document.getElementById(targetID),
width = settings['width'] || el.getAttribute('width'),
height = settings['height'] || el.getAttribute('height'),
buffer = '',
label = '',
max = Math.max.apply(0, data),
numOfBars = data.length,
padding = settings['padding'] || 2,
barHeight = 0,
top = 0,
barWidth = Math.floor((width / numOfBars) - (2 * padding)),
reducedData = new Array(numOfBars);
for (var x = 0; x < numOfBars; x++)
reducedData[x] = Math.floor(((0.95 * height) * data[x]) / max);
for (var i = 0; i < numOfBars; i++) {
barHeight = reducedData[i];
top = height - barHeight;
label = labels[i] || "";
buffer += '<a href="#" title="' + label + '" style="float:left;width:' +
barWidth + 'px;margin: 0 ' + padding + 'px 0 ' + padding +
'px;margin-top:' + top + 'px;height:' + barHeight + 'px;">' + label + '</a>';
}
el.innerHTML = buffer + '<div style="clear:both"></div>';
};
CSS
.uiBarChart { border-bottom: 1px solid #bcbcbc; }
.uiBarChart a:first-child { background: #86b671; }
.uiBarChart a:nth-last-child(2) { background: #c0ffa4; }
.uiBarChart a { background: #ACE494; border-top: 2px solid #9ad87f; text-align: center; color: #638b52; text-decoration : none; text-transform: capitalize; }
.uiBarChart a:hover { background: #c0ffa6; }
Usage
Example 1)
uiBarChart({ data : [1,2,3,4,3,2,1,2,4,8,4], targetID : "ui-chart" });
<div id="ui-chart" class="uiBarChart" width="610" height="150"></div>
Example 2)
uiBarChart({ data : [9,4,2,8], targetID : "ui-chart2", padding : 15, labels : ['gold', 'silver', 'bronze', 'platinum'] });
<div id="ui-chart2" class="uiBarChart" width="610" height="200"></div>
Its easy to import, the code can be quickly modify and using CSS, the look can be changed to fit any theme.