Categories
css html javascript jquery twitter-bootstrap

dynamic coloring of progress bar

I have created a table with bootstrap progress styles, In which I am having a dynamic table which is having a column named Rank which contains several values starts from 1 to 100 and by using jquery and bootstrap I have convert the values into progress bar like as shown in the fiddle. Th code is working fine but the issue is with the color, currently It will show all in blue, actually I want different colors based on progress count values say 10 – yellow, 20 -blue, 35 – red etc, duplicates color should occur only for the same value, otherwise different color. color can be dynamic

My code is as given below

JSFiddle

$("#table").children("tbody").children("tr").each(function (i) {
var col = $(this).children("td.value");
console.log(col.html());
var pro = '<div id="left"><div class="progress" id="percentage"><div class="progress-bar" style="display: block; float: right;width: ' + col.html() + '%;"></div></div></div><div id="right">&nbsp;' + col.html() + '</div>';
col.html(pro);
});

Can anyone please tell me some solutions for this

Check this demo : http://jsfiddle.net/k1c9exLq/3/

Create an array of 100 items with different dynamic color codes first, then use them back based on your rank.

JQUERY

var genCol = [];
for (var i=0; i<=100; i++)
genCol.push('#'+(Math.random()*0xFFFFFF<<0).toString(16));
$("#table").children("tbody").children("tr").each(function (i) {
var col = $(this).children("td.value");

var pro = '<div id="left"><div class="progress" id="percentage"><div class="progress-bar" style="display:block; float:right; width:'+col.html()+ '%;background:'+genCol[col.html()]+'"></div></div></div><div id="right">&nbsp;' + col.html() + '</div>';

col.html(pro);
});