www.webdeveloper.com
Results 1 to 7 of 7

Thread: intuitive javascript percentage bars

  1. #1
    Join Date
    Feb 2011
    Posts
    3

    intuitive javascript percentage bars

    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!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261
    Post the HTML portion of you code so we can recommend where to put in the JS code.

  3. #3
    Join Date
    Feb 2011
    Posts
    3
    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

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261

    Question

    Quote Originally Posted by josub View Post
    ...

    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?

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261
    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">&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>

  6. #6
    Join Date
    Feb 2011
    Posts
    3
    Thanks I will away!


    Quote Originally Posted by JMRKER View Post
    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.


    Quote Originally Posted by JMRKER View Post
    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.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261

    Lightbulb

    Quote Originally Posted by josub View Post
    ...
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles