HTML/CSS/javascript Vertical Bar Charts

The code snippets on this page provide a method for creating table-less bar charts using CSS, HTML and Javascript. These charts are generated when when a user clicks the appropriate hyperlink. I've separated the required code into three chunks - Hardest (javascript), Medium (CSS), and Easy (HTML). So, once you get halfway through this page, the rest is cake! Once implemented, numerous charts can be configured, each using a simple javascript function call.

View the Bar Charts

Chart 1 - Total Page Views | Chart 2 - Visitors by Name | Chart 3 - Pwnage Ranking

The Hardest Part - Javascript

To get started, place this hefty bit of javascript either in the <head> area of your HTML page, or in a separate javascript file:

// Cursor coordinate functions
var myX, myY, xyOn, myMouseX, myMouseY;
xyOn = false;
function getXYPosition(e){
myMouseX=(e||event).clientX;
myMouseY=(e||event).clientY;
if (myMouseX + 100 > document.documentElement.clientWidth) {
myX = myMouseX - (myMouseX + 80 - (document.documentElement.clientWidth));
} else {
myX = myMouseX + 20;
}
if (myMouseY + 54 > document.documentElement.clientHeight) {
myY = myMouseY - (myMouseY + 34 - (document.documentElement.clientHeight));
} else {
myY = myMouseY + 20;
}
if (document.documentElement.scrollTop > 0) {
myY = myY + document.documentElement.scrollTop;
myMouseY = myMouseY + document.documentElement.scrollTop;
}
document.getElementById('xy').style.top = myY + "px";
document.getElementById('xy').style.left = myX + "px";
if (xyOn) {
document.getElementById('xy').style.visibility = "visible";
} else {
document.getElementById('xy').style.visibility = "hidden";
}
}
function toggleXY(myHeight) {
xyOn = !xyOn;
if (!xyOn) {
document.getElementById('xy').style.visibility = "hidden";
} else {
document.getElementById('xy').innerHTML = myHeight;
document.getElementById('xy').style.visibility = "visible";
}
return false;
}
document.onmousemove=getXYPosition;
function drawChart(myChart) {
if (!document.getElementById(myChart)) {
var myOut = "";
myOut+='<a name="'+myChart+'_top"><h2>'+arguments[1]+'</h2></a>';
myOut+='<div class="legendY"><strong>'+arguments[2]+'</strong></div>';
myOut+='<div class="axis" id="'+myChart+'">';
var bigBar = 0;
for (i=5;i<arguments.length;i=i+2) {
var myH = arguments[i];
myXname = arguments[i-1];
myOut+='<div class="barVert" id="'+myChart+'bar'+i+'" onmouseover="toggleXY('+myH+');" onmouseout="toggleXY();"></div>';
if (myH>bigBar) {
bigBar = myH;
}
myOut+='<div class="xName" id="'+myChart+'xName'+i+'">'+myXname+'</div>';
}
while (bigBar%4!=0) {
bigBar++;
}
document.getElementById('chartHolder').innerHTML = document.getElementById('chartHolder').innerHTML+myOut;
for (i=1;i<=4;i++) {
myOut='<div class="rulesVert" style="bottom:'+(bigBar*(i/4)+(10*i))+'px;">'+bigBar*(i/4)+' ---</div>';
document.getElementById('chartHolder').innerHTML = document.getElementById('chartHolder').innerHTML+myOut;
}
document.getElementById('chartHolder').innerHTML = document.getElementById('chartHolder').innerHTML+'<div class="legendX"><strong>'+arguments[3]+'</strong></div></div>';
for (i=5;i<arguments.length;i=i+2) {
document.getElementById(myChart+'bar'+i).style.height = arguments[i] + "px";
document.getElementById(myChart+'xName'+i).style.top = bigBar + "px";
}
var myBarDivs = document.getElementById(myChart).getElementsByTagName("div");
for (i=0;i<myBarDivs.length;i++) {
document.getElementById(myBarDivs[i].id).style.marginLeft = i*35 + 10 + "px";
}
document.getElementById(myChart).style.height = bigBar + "px";
document.getElementById(myChart).style.visibility = "visible";
}
document.location = '#'+myChart+'_top';
}

Mediumish - the CSS

The table-less layout of this graph relies on a combination of relative and absolute CSS positioning of the various chart elements. The following stylesheet should be placed either in the <head> area of your HTML page, or in an external .css file:

The Easy Part - a Little HTML

Believe it or not, the easiest part of implementing these charts on your page, is coding the HTML. The only thing left to do is create a hyperlink, with a javascript function call. All of the parameters needed to create a chart are passed as arguments to the javascript function.

<a href="javascript:drawChart('sample','Sample Chart','Y-axis Title','X-axis Title','One',60,'Two',120,'Three',160);">Sample Chart</a>

And, lastly, place theses DIV tag somewhere in your HTML page. The chartHolder DIV is where the chart will appear when the hyperlink is clicked. If you have more than one CSS chart being generated, they'll be stacked vertically within this same DIV. The xy DIV will contain the value of the vertical bar, and will appear when the user moves the cursor over the chart.

The drawChart function accepts these parameters in order:

HTML ID - not visible to user, one word, no spaces/punctuation - e.g., 'sample', 'chart1'
Chart Name - name of chart as it displays to user - e.g., 'Sample Chart', 'Website Visitors'
Y-axis Title - title of the vertical axis as it displays to user - e.g., 'Y-axis Title', 'Website Visits'
X-axis Title - title of the horizontal axis as it displays to user - e.g., 'X-axis Title', 'Visitor Name'
Bar Name - name of vertical bar as it displays to user - e.g., 'Day One', 'Billy'
Bar Value - value of preceding vertical bar, positive number only - e.g., 50, 130

Note: You can add multiple vertical bars, but they must be added as Name/Value pairs.

Here's what the HTML looks like when implemented:
View Sample Chart