i have problem code (chart bar). percent value of first 2 charts "100" bar width "500px". latest 2 charts correct, total sum not.
here view: http://i.stack.imgur.com/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 bars var barcolors = [ "0e80ea", "9acb06", "ff6804", "d10707", "44b512", "11d8df", "...", // more colors ]; // array hold value var chartvalues = []; // array hold sum of charts var chartsum = []; // let's go $(".chart li").each(function(){ // count charts var charttotal = 0; for(var i=0; i<chartsum.length; i++) { charttotal += chartsum[i]; } chartsum.push(number($(this).html())); // calculate total sum (all values) var totalsum = 0; totalsum += parseint($(this).find(".value").html()); // if should be: push total sum array 'absolute' view // chartvalues.push(totalsum); // push value array var chartvalue = []; chartvalue.push($(this).find(".value").html()); chartvalues.push(chartvalue); // highest value array var highestvalue = math.max.apply(math, chartvalues); // calculate percent value var percentvalue = $(this).find(".value").html() / highestvalue * 100; // calculate , show bar ('*500' because bar 500px , 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 percent value var percentvaluerounded = parsefloat(percentvalue).tofixed(2); var percentvaluerounded = percentvaluerounded.replace(".00", ""); // show percent value $(this).find(".percent").html(percentvaluerounded + '%'); // show 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;}
the solution here
http://jsfiddle.net/nmdkswl9/ move
var totalsum = 0; out of line because set 0 until last loop. correct position because needs set 0 before loop.
var totalsum = 0; // let's go $(".chart li").each(function(){ 
Comments
Post a Comment