Printable View
I have been searching and searching google for an answer but no luck.
I want 5 bars that are connected in the way that the total value of hem is 100%
ex user moves bar 1 up 4% and bar 2,3,4,5 moves down 1% each.
the values should be projected in textfields so the form can be POSTed for some PHP operations.
I have seen this on webapplications before and just assume it is javascript. does anone know how it is done?
thanks a lot!
Post the HTML portion of you code so we can recommend where to put in the JS code.
hi the html code, i.e. the textfields are:
and the combined value shouldn't exeed 100, and are set with javascript slidersQuote:
<div><label>-t1</label><br /><input type="text" name="1" value="0" /></div>
<div><label>-t2</label><br /><input type="text" name="2" value="100" /></div>
<div><label>-t3</label><br /><input type="text" name="3" value="0" /></div>
<div><label>-t4</label><br /><input type="text" name="4" value="0" /></div>
<div><label>-t5</label><br /><input type="text" name="5" value="0" /></div>
<div><label>-t6</label><br /><input type="text" name="6" value="0" /></div>
By what formula are the values of the other bars to be determined?Quote:
Originally Posted by josub
For example, if one bar changes by 5%, which bar is changed by 2% rather than 1%?
Also, you example HTML provided 6 bars to be displayed, not 5. What gives?
Best guess based upon sparse information given...
Code:<html>
<head>
<title>Percentage Bars</title>
<style type="text/css">
.bbar { height:36px; width:200px; border:1px solid black; float:left; }
.bgph { height:32px; width:0%; background-Color:red; float:left; }
</style>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=242856
function alterBarGraph() {
var sel = document.getElementById('barGraph').getElementsByTagName('input');
var sum = 0;
for (var i=0; i<sel.length; i++) { sum += Number(sel[i].value); } // Note: should add checks for invalid inputs
if (sum == 0) { alert('Sum equals zero!'); return; }
var pcnt = 0;
var id = '';
for (var i=0; i<sel.length; i++) {
pcnt = Number(sel[i].value) / sum * 100;
id = sel[i].name.toLowerCase();
document.getElementById(id).style.width = pcnt+'%';
// alert('id: '+id+'\nsum: '+sum+'\npcnt: '+pcnt);
}
}
</script>
</head>
<body>
<div id="barGraph">
<div><label>-t1</label>
<input type="text" name="T1" value="0" onblur="alterBarGraph()" style="float:left" />
<div class="bbar"><div id="t1" class="bgph"> </div></div>
</div><br>
<div><label>-t2</label>
<input type="text" name="T2" value="100" onblur="alterBarGraph()" style="float:left" />
<div class="bbar"><div id="t2" class="bgph"> </div></div>
</div><br>
<div><label>-t3</label>
<input type="text" name="T3" value="0" onblur="alterBarGraph()" style="float:left" />
<div class="bbar"><div id="t3" class="bgph"> </div></div>
</div><br>
<div><label>-t4</label>
<input type="text" name="T4" value="0" onblur="alterBarGraph()" style="float:left" />
<div class="bbar"><div id="t4" class="bgph"> </div></div>
</div><br>
<div><label>-t5</label>
<input type="text" name="T5" value="0" onblur="alterBarGraph()" style="float:left" />
<div class="bbar"><div id="t5" class="bgph"> </div></div>
</div><br>
<div><label>-t6</label>
<input type="text" name="T6" value="0" onblur="alterBarGraph()" style="float:left" />
<div class="bbar"><div id="t6" class="bgph"> </div></div>
</div> <br>
</div style="clear:both">
</body>
</html>
Thanks I will away!
It is six bars, (it changed from five since the thread the thread start.Quote:
Originally Posted by JMRKER
I havent thought of that and as long as it is handled it does not matter for me. The values are approximate thus bars, with their graphic nature, are wanted instead of textfields since text would confuse the user thinking each value needs to be precise.Quote:
Originally Posted by JMRKER
The sliders should serve as an approximation of the different telecom operators a customer calls to.
I.e. If we have six bars and one is moved +1 the rest are moved -0.2 but if the value is set exactly or if the value is rounded to a value above or less than 100 does not matter, I will just bring the new total value !=100 and divide by that later. Which ever solution is easiest you think, and I think I can handle it later on.
There is no need to adjust to 100% as the script provided does that already!Quote:
Originally Posted by josub
The sum is composed of all the input values (should check for user word entries as error entries)
and the percentages are formed as a function of this sum.
Therefore, the 100% requirement is already accounted for.
