Forum Moderators: open
well maybe i am being a little ambitious trying to get some grph(like) things in a html page.
i have successfully managed a horizontal graph (with a max limit) by using different coloured divs with set widths.
i guess i could do the same with vertical graphs, (these are dynamic pages - so mbe i can work out the highest 'value' and do a similar thing as with horizontal ones.
unless... someone has a better idea?!?
here's hoping.
nat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>bar graph</title>
<style type="text/css">
table {width:250px;border:1px solid yellow;}
td {width:50px;vertical-align:top;text-align:center;}
</style>
</head>
<body>
<table>
<tr>
<td style="border-bottom:150px solid black;">150</td>
<td style="border-bottom:125px solid blue;">125</td>
<td style="border-bottom:100px solid green;">100</td>
<td style="border-bottom:75px solid gray;">75</td>
<td style="border-bottom:50px solid red;">50</td>
</tr>
</table>
</body>
</html>I hope that gives you some ideas!
using border width.. you cunning chappy you..
a bit simpler than my attempt at a horizontal one.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>graphy thing</title>
<style type="text/css">
table{border-collapse:collapse;margin:0px auto;}
thead{
background-color:#999;
}
td,th{
padding:2px;
border:1px solid #000;
padding-left:5px;
vertical-align:top;
}
th{color:#fff;}
.alignr{
text-align:right;
}
th{width:100px;border:1px solid #000;}
table#ratings{
border:1px solid #000;
border-collapse:collapse;
width:700px;
font-size:80%
}
td{
border:1px solid #000;
margin:0;padding:0;height:3em;
}
.x{
width:200px;
background-color:#abc;
font-weight:bold;
}
.bar{
border-right:1px solid #000;height:100%;margin:0;padding:0;
}
</style>
</head>
<body>
<table id="ratings">
<thead>
<tr>
<th class="x">Question</th>
<th style="background-color:#F00;">1</th>
<th style="background-color:#F93;">2</th>
<th style="background-color:#0c0;">3</th>
<th style="background-color:#39f;">4</th>
<th style="background-color:#03c;">5</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:0px 5px;">#*$!</td>
<td colspan="5"><div class="bar" style="background-color:#f93;width:125px;">125</div></td>
</tr>
<td style="padding:0px 5px;">yyy</td>
<td colspan="5"><div class="bar" style="background-color:#0c0;width:255px;">255</div></td>
</tr>
<td style="padding:0px 5px;">zzz</td>
<td colspan="5"><div class="bar" style="background-color:#39f;width:354px;">354</div></td>
</tr>
<td style="padding:0px 5px;">aaa</td>
<td colspan="5"><div class="bar" style="background-color:#39f;width:375px;">375</div></td>
</tr>
<td style="padding:0px 5px;">bbb</td>
<td colspan="5"><div class="bar" style="background-color:#03c;width:444px;">444</div></td>
</tr>
</tbody>
</table>
</body>
</html>
thanks alot, for the suggestion. no doubt i will go allong that route.
thanks again
nat
The code is 100% functional, copy and paste from HTML to /HTML, but there's some functional bugs I've never bothered to work out. (Color toggle works against you if you go back to a previous q, for example.) Have fun! :-D
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www/w3c.org/loose.dtd">
<html><head><title>Progress Bar</title>
<style type="text/css">
table { border: 1px solid black;}
td.progress { background-color:#ffffff; }
td.progressfilled { background-color:#00cc00; }
</style>
<script language="javascript">
var current = 0;
var initialColor = 'progress';
function progress(form,fname) {
var label = fname.split('_');
if (label[1] > (parseInt(current+1))) { alert("You skipped some questions."); return; }
current=label[1];
for (i=current;i<11;i++) {
var tdname ='t'+i;
td = document.getElementById(tdname);
var cls = td.className;
td.className = ((i <= current) && (cls=='progress'))?'progressfilled':'progress';
}
}
</script>
</head>
<body>
<h3>Survey Progress</h3>
<form>
<table width="500" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="10"><img src="spacer.gif" width="500" height="1" border="0" alt="To keep everyone in line"></td></tr>
<tr>
<td width="50" id="t1" class="progress"> </td>
<td width="50" id="t2" class="progress"> </td>
<td width="50" id="t3" class="progress"> </td>
<td width="50" id="t4" class="progress"> </td>
<td width="50" id="t5" class="progress"> </td>
<td width="50" id="t6" class="progress"> </td>
<td width="50" id="t7" class="progress"> </td>
<td width="50" id="t8" class="progress"> </td>
<td width="50" id="t9" class="progress"> </td>
<td width="50" id="t10" class="progress"> </td>
</tr>
</table>
<strong>Preguntas</strong>
<ol>
<li>pick a color:
<input type="radio" name="q_1" value="red" onClick="progress(this.form,this.name);"> red
<input type="radio" name="q_1" value="green" onClick="progress(this.form,this.name);"> green
<input type="radio" name="q_1" value="blue" onClick="progress(this.form,this.name);"> blue </li>
<li>Is it raining?
<input type="radio" name="q_2" value="Yes its's Raining" onClick="progress(this.form,this.name);"> Yes
<input type="radio" name="q_2" value="No, it's Not" onClick="progress(this.form,this.name);"> No. </li>
<li>Are you drinking coffee?
<input type="radio" name="q_3" value="Yes" onClick="progress(this.form,this.name);"> Yes
<input type="radio" name="q_3" value="No" onClick="progress(this.form,this.name);"> No. </li>
<li>What time of day is it?
<select name="q_4" onChange="progress(this.form,this.name)">
<option value="">select</option>
<option value="Early Morning">Early Morning</option>
<option value="Morning">Morning</option>
<option value="Noonish">Noonish</option>
<option value="Early Afternoon">Early Afternoon</option>
<option value="Afternoon">Afternoon</option>
<option value="Late Afternoon">Late Afternoon</option>
<option value="Early Evening">Early Evening</option>
<option value="Late Envening">Late Evening</option>
<option value="Witching Hour">Witching Hour</option>
<option value="Wee Hours">Wee Hours</option>
</select>
</li>
<li>Got Milk?
<input type="radio" name="q_5" value="Yes" onClick="progress(this.form,this.name);"> Yes
<input type="radio" name="q_5" value="No" onClick="progress(this.form,this.name);"> No. </li>
<li>Wasss Yer Name?
<input type="text" name="q_6" size="24" maxlength="100" onBlur="progress(this.form,this.name);" value=""></li>
<li>Geographic location?
<input type="text" name="q_7" size="24" maxlength="100" onBlur="progress(this.form,this.name);" value=""></li>
<li>Most Annoying Billionaire:
<select name="q_8" onChange="progress(this.form,this.name)">
<option value="">select</option>
<option value="Bill Gates">Bill Gates</option>
<option value="Donald Trump">Donald Trump</option>
<option value="Michael Jackson">Michael Jackson</option>
<option value="Other">Other</option>
</select>
</li>
<li>Favorite Application:
<select name="q_9" onChange="progress(this.form,this.name)">
<option value="">select</option>
<option value="Notepad">Notepad</option>
<option value="Photoshop">Photoshop</option>
<option value="Flash">Flash</option>
<option value="Other">Other</option>
<option value="Homesite">Homesite</option>
<option value="Microsoft">Anything Microsoft, Billy Rules</option>
</select>
</li>
<li>
Rate the stupidity of this questionaire.
<input type="radio" name="q_10" value="-10" onClick="progress(this.form,this.name);"> -10
<input type="radio" name="q_10" value="-8" onClick="progress(this.form,this.name);"> -8
<input type="radio" name="q_10" value="-4" onClick="progress(this.form,this.name);"> -4
<input type="radio" name="q_10" value="0" onClick="progress(this.form,this.name);"> 0
<input type="radio" name="q_10" value="1" onClick="progress(this.form,this.name);"> 1
<input type="radio" name="q_10" value="2" onClick="progress(this.form,this.name);"> 2
<input type="radio" name="q_10" value="3" onClick="progress(this.form,this.name);"> 3
<input type="radio" name="q_10" value="4" onClick="progress(this.form,this.name);"> 4
<input type="radio" name="q_10" value="5" onClick="progress(this.form,this.name);"> 5
</li>
</ol>
</form>
</body>
</html>
