<h1>CSS Graphs!</h1>

{capture name="headAddendum"}
	<style>{literal}
		.graphView {
			position:relative;
			width:300px;
			height:250px;
			border:#000 2px solid;
			overflow:auto;
		}
		
		.graphBar {
			background:#F9C;
			border:#FCD 2px solid;
			margin:-2px 0px 0px 0px;
			white-space:nowrap;
			overflow:hidden;
			font-size:9px;
			font-family:sans-serif;
			width:0px;
		}

		.graphSet {
			position:absolute;
			left:0px;
			top:0px;
		}

		#gSet_2 .graphBar {
			background:#FCF;
			border-color:#FDF;
		}

		#gSet_3 .graphBar {
			background:#CCF;
			border-color:#DDF;
		}
	{/literal}</style>

	<script type="text/javascript">var graphZ = 100;</script>
{/capture}

<div id="gView_1" class="graphView">
<div id="gSet_1" class="graphSet">
	<div class="graphBar" style="width:90%" onmouseover="">120</div>
	<div class="graphBar" style="width:80%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:70%">120</div>
	<div class="graphBar" style="width:40%">120</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:10%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:80%">120</div>
	<div class="graphBar" style="width:40%" onmouseover="">120</div>
	<div class="graphBar" style="width:50%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:80%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:90%">120</div>
</div>

<div id="gSet_2" class="graphSet">
	<div class="graphBar" style="width:40%" onmouseover="">120</div>
	<div class="graphBar" style="width:50%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:80%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:90%">120</div>
	<div class="graphBar" style="width:40%" onmouseover="">120</div>
	<div class="graphBar" style="width:50%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:80%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:90%">120</div>
</div>

<div id="gSet_3" class="graphSet">
	<div class="graphBar" style="width:20%" onmouseover="">120</div>
	<div class="graphBar" style="width:10%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:40%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:10%">120</div>
	<div class="graphBar" style="width:40%">120</div>
	<div class="graphBar" style="width:70%">120</div>
	<div class="graphBar" style="width:20%" onmouseover="">120</div>
	<div class="graphBar" style="width:10%">120 with a bunch of extra text</div>
	<div class="graphBar" style="width:50%">120</div>
	<div class="graphBar" style="width:40%">120</div>
	<div class="graphBar" style="width:30%">120</div>
	<div class="graphBar" style="width:60%">120</div>
	<div class="graphBar" style="width:20%">120</div>
	<div class="graphBar" style="width:10%">120</div>
	<div class="graphBar" style="width:40%">120</div>
	<div class="graphBar" style="width:70%">120</div>
</div>
</div>

<h3>Legend:</h3>

<table>
<tr>
	<td>#1</td>
	<td><a href="javascript:xZIndex('gSet_1', graphZ++);">Graph 1 Title</a></td>
	<td><a href="javascript:xToggle('gSet_1');">Toggle</a></td>
</tr>
<tr>
	<td>#2</td>
	<td><a href="javascript:xZIndex('gSet_2', graphZ++);">Graph 2 Title</a></td>
	<td><a href="javascript:xToggle('gSet_2');">Toggle</a></td>
</tr>
<tr>
	<td>#3</td>
	<td><a href="javascript:xZIndex('gSet_3', graphZ++);">Graph 3 Title</a></td>
	<td><a href="javascript:xToggle('gSet_3');">Toggle</a></td>
</tr>
</table>
