intuitive javascript percentage bars

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

josub

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!

JMRKER

Post the HTML portion of you code so we can recommend where to put in the JS code.

josub

hi the html code, i.e. the textfields are:

<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>

and the combined value shouldn't exeed 100, and are set with javascript sliders

JMRKER

josub;1141231 wrote:
...

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.

By what formula are the values of the other bars to be determined?
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?

JMRKER

Best guess based upon sparse information given...

<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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div></div>
 </div> <br>
</div style="clear:both">
</body>
</html>

josub

Thanks I will away!

JMRKER;1141335 wrote:
Also, you example HTML provided 6 bars to be displayed, not 5. What gives?

It is six bars, (it changed from five since the thread the thread start.

JMRKER;1141335 wrote:
By what formula are the values of the other bars to be determined?
For example, if one bar changes by 5%, which bar is changed by 2% rather than 1%?

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.

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.

JMRKER

josub;1141362 wrote:
...
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!
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.