Calculate with JS and create a chart bar with HTML elements

Question

I have a problem with my code (Chart bar). The percent value of the first two charts is always "100" an the bar width "500px". The latest two charts is correct, but the total sum not.

Here a view: https://i.sstatic.net/QY2i8.jpg

The HTML:

<div class="chart">
<ul>
  <li>
    <span class="caption">Germany</span>
    <span class="bar"><span class="bar-inner"></span></span>
    <span class="value">100</span>
    <span class="percent"></span>
  </li>
  <li>
    <span class="caption">United States</span>
    <span class="bar"><span class="bar-inner"></span></span>
    <span class="value">400</span>
    <span class="percent"></span>
  </li>
  <li>
    <span class="caption">Spain</span>
    <span class="bar"><span class="bar-inner"></span></span>
    <span class="value">50</span>
    <span class="percent"></span>
  </li>
  <li>
    <span class="caption">Italy</span>
    <span class="bar"><span class="bar-inner"></span></span>
    <span class="value">200</span>
    <span class="percent"></span>
  </li>
</ul>
  <div class="total"></div>
</div>

The Javascript (jQuery required):

$( document ).ready(function() {

    // Colors of the bars   
    var barColors = [
    "0e80ea", 
    "9acb06", 
    "ff6804", 
    "d10707", 
    "44b512", 
    "11d8df",
    "...", // More colors
  ];

    // Array to hold the value
    var chartValues = [];

    // Array to hold the sum of charts
    var chartSum = [];

    // Let's go
    $(".chart li").each(function(){          

        // Count the charts
        var chartTotal = 0;
        for(var i=0; i<chartSum.length; i++) {
          chartTotal += chartSum[i];
        }
        chartSum.push(Number($(this).html()));

        // calculate the total sum (all values)
        var totalSum = 0;
        totalSum += parseInt($(this).find(".value").html());

        // If should be: push the total sum to array for 'absolute' view
        // chartValues.push(totalSum);

        // Push the value to array
        var chartValue = [];
        chartValue.push($(this).find(".value").html());
        chartValues.push(chartValue);

        // Get the highest value from array
        var highestValue = Math.max.apply(Math, chartValues);

        // calculate the percent value  
        var percentValue =  $(this).find(".value").html() / highestValue * 100;

        // calculate and show the bar ('*500' because the bar is always 500px and the bar-inner max. 500px width) 
        var chartValueInSum =  $(this).find(".value").html();
        $(this).find(".bar-inner").css({"background-color" : '#' + barColors[i], 'width' : chartValueInSum / highestValue * 500 + 'px'});

        // Round the percent value
        var percentValueRounded = parseFloat(percentValue).toFixed(2);
        var percentValueRounded = percentValueRounded.replace(".00", ""); 

        // Show the percent value
        $(this).find(".percent").html(percentValueRounded + '%');

        // Show the total sum
        $(".total").html(totalSum);
    });
});

The style:

body{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;margin-top:50px;}
ul,li{list-style:none;padding:0;margin:0;}
.chart li{font-size:12px;margin:5px 0;}
.chart .bar{vertical-align:middle;display:inline-block;background:#eee;height:20px;width:500px;}
.chart .bar-inner{display:block;width:0;height:20px;background:#46484f;}
.chart .caption{vertical-align:middle;display:inline-block;width:160px;text-align:right;margin-right:10px;}
.chart .value{vertical-align:middle;display:inline-block;text-align:right;margin:0 15px;width:50px;color:#000;font-weight:bold;}
.chart .percent{vertical-align:middle;display:inline-block;color:#666;}
.chart .total{font-size:18px;margin:10px 170px 10px;}

Answer 1

The solution is here

http://jsfiddle.net/nmdkswL9/ move

var totalSum = 0;

out of that line because it will always be set to 0 until the last loop. This is the correct position because it needs to be set to zero before the loop.

var totalSum = 0;
// Let's go
$(".chart li").each(function(){