PDA

View Full Version : Voting System with Horiztontal Bars



treeleaf20
Nov 16th, 2009, 04:35 PM
All,
Does anyone know a good example on where to find something that when I click on vote it calculates the results and then shows me horizontal bars to show the percentage for each vote? There will only be two? Thanks in advance.

Philip M
Nov 16th, 2009, 05:14 PM
You need server-side scripting for this. Javascript no capability to read from or write to a file (except a cookie), communicate with the server, or access a database.



All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Old Pedant
Nov 17th, 2009, 01:25 AM
Assuming you use PHP to get the update vote counts, possibly via an AJAX call, then how about something as simple as this:


<html>
<head>
<script type="text/javascript">
// votes array, in order "Yes", "No", "Undecided"
//
// Instead of having a constant array here, you could use AJAX
// to go get the update array...or plunk the values into the
// array using PHP. Or just use PHP to add width: 333px; to
// the style for each of the graphs. Or or or...
//
var votes = [ 372, 158, 16 ];
var voteIds = ["yes","no","wishy_washy"];

function showGraph( )
{
var totalVote = 0
for ( var v = 0; v < votes.length; ++v )
{
totalVote += votes[v];
}
for ( v = 0; v < votes.length; ++v )
{
document.getElementById( voteIds[v] ).style.width =
Math.round(400 * votes[v] / totalVote);
}
}
</script>
<style type="text/css">
div#bargraph {
position: relative;
border: solid black 3px;
width: 500px; height: 120px;
}
div.bar {
position: relative;
border: solid black 1px;
background-color: lightyellow;
width: 500px; height: 40px;
}
div.bar span {
position: relative;
top: 12px;
width: 90px;
text-align: right;
font-size: 16px;
}
div#yes {
position: absolute;
left: 100px;
height: 38px;
background-color: green;
}
div#no {
position: absolute;
left: 100px;
height: 38px;
background-color: red;
}
div#wishy_washy {
position: absolute;
left: 100px;
height: 38px;
background-color: gray;
}
</style>
</head>
<body onload="showGraph()">
This is a simple 3-line bar graph. Number of bars is *not* dynamic.
Could easily be made dynamic, but this is even simpler!
<br/><br/>
<div id="bargraph">
<div class="bar"><span>Yes:</span><div id="yes"></div></div>
<div class="bar"><span>No:</span><div id="no"></div></div>
<div class="bar"><span>Undecided:</span><div id="wishy_washy"></div></div>
</div>
</body>


As I noted in the comment, if you are producing this page entirely via PHP, instead of using AJAX, you don't need any JavaScript at all. Instead, you just plunk the appropriate width into the style for each bar, such as

div#yes {
position: absolute;
left: 100px;
height: 38px;
width: 273px;
background-color: green;
}

If it's not obvious, each of the widths is the proper percentage of 400px in this example. (500px width for each bar, with 100px used for the labels, so 400px for active coloring. Adjust numbers to match what you will actually use.)

Old Pedant
Nov 17th, 2009, 01:27 AM
Slightly improved <style>:


<style type="text/css">
div#bargraph {
position: relative;
border: solid black 3px;
width: 500px; height: 120px;
}
div.bar {
position: relative;
border: solid black 1px;
background-color: lightyellow;
width: 500px; height: 40px;
}
div.bar span {
position: relative;
top: 12px;
width: 90px;
text-align: right;
font-size: 16px;
}
div.bar div {
position: absolute;
left: 100px;
height: 38px;
}
div#yes {
background-color: green;
}
div#no {
background-color: red;
}
div#wishy_washy {
background-color: gray;
}
</style>