Invasive Procedures blog by brenz.net

Men's Miami Dolphins Majestic Aqua Swift Motion Fleece Sweatpants,Women's Dallas Cowboys Dez Bryant Navy Blue Name & Number Slim Fit Long Sleeve T-Shirt.Mens Houston Texans JJ Watt Majestic Red Eligible Receiver II Name & Number T-Shirt,Women's Jacksonville Jaguars Cuce Black Sideliner Sweatshirt,San Francisco 49ers Totem Gnome Statue New Orleans Saints Jersey 2016 Sale.Arizona Cardinals 60" x 80" Stacked Silk Touch Plush Blanket,Denver Broncos 6'' x 6'' Team Ball Die-Cut Repositionable Vinyl Decal.Men's San Francisco 49ers Colin Kaepernick Nike Scarlet New Day Name & Number Dri-FIT T-Shirt,Girls Infant Pittsburgh Steelers Black/White/Pink 3-Pack Bodysuit.Nike Pittsburgh Steelers Women's Tempo Performance Running Shorts - Black,Women's Kansas City Chiefs Aztec Boots,Women's New England Patriots Cuce Frontrunner Rain Boots.Cincinnati Bengals Bluetooth iPad Keyboard Case,Chicago Bears Super Bowl XX Champions Commemorative Paperweight,Washington Redskins Santa Gets There Rocket Ornament New Orleans Saints Jersey.Men's Pittsburgh Steelers New Era Gold Solid Cuffed Knit Hat,Women's St Drew Brees Jerseys For Sale. Louis Rams Concepts Sport Navy Fa?ade Union Suit Pajamas,Washington Redskins Slogan Mini Gnome.Indianapolis Colts Super Stripe Acrylic Cut License Plate,Antigua New York Jets Steel Executive Crew Sweater - Green New Orleans Saints Jerseys Nike Jerseys

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:
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.glossary {
font-size:10px;
position: absolute;
top: 0px;
right:0px;
width:60px;
text-align:center;
visibility: hidden;
color:#006699;
background-color:#ffffcc;
border: 1px solid #66ccff;
z-index: 2;
padding:7px;
}
.axis {
color:#000000;
background-color:#ffffff;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
height:300px;
width:400px;
position:relative;
visibility:hidden;
margin-left:50px;
margin-top:20px;
}
.barVert {
color:#000000;
background-color:#cc0000;
border:1px solid #00CCFF;
border-bottom:0;
background-image: url(spectrum.gif);
background-repeat:repeat-x;
background-position:0% 100%;
width:40px;
height:200px;
position:absolute;
margin-left:10px;
bottom:0px;
overflow:hidden;
}
.xName {
position:absolute;
left:-44px;
height:25px;
width:60px;
font-size:9px;
text-align:center;
overflow:hidden;
}
.rulesVert {
position:relative;
width:50px;
text-align:right;
font-size:9px;
line-height:11px;
color:#000000;
display:block;
}
.legendX {
position:relative;
text-align:center;
top:-25px;
}
.legendY {
position:relative;
margin-left:10px;
top:10px;
}
</style>

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.
<div id="chartHolder"></div>
<div id="xy" class="glossary"></div>
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