fernandoc1 · July 17, 2016 03:20
diff --git a/barchart.html b/barchart.html
 <html>
 <body>
 <style>
 #chartDiv
 {
    width: 50%;
    height: 200px;
 }

 .chartBar
 {
    height: 20px;
    margin: 4px;
 }

 @keyframes fillBar{
    0%   {width: 0%;}
    100% {width: 100%;}
 }

 .chartBarFill
 {
    height: 100%;
    background-color: red;
    /*opacity: 0.5;*/
    border: 2px solid rgba(0, 0, 0, 0.1);
    animation-name: fillBar;
    animation-duration: 2s;
 }

 </style>
 <div id="chartDiv">
 </div>
 </body>
 </html>

 <script>

 function BarChart(chartDiv)
 {
    this.chartDiv = chartDiv;
    this.table = document.createElement("table");
    this.table.style.tableLayout = "auto";
    this.table.style.borderCollapse = "collapse";
    this.table.style.verticalAlign = "middle";
    this.table.style.width = "100%";
    this.chartDiv.appendChild(this.table);
    this.insertBar = function(title, bar)
    {
        //this.chartDiv.insertBefore(bar, this.chartDiv.firstChild);
        var row = this.table.insertRow();
        var titleCell = row.insertCell();
        titleCell.appendChild(document.createTextNode(title));
        titleCell.style.float = "right";
        titleCell.style.verticalAlign = "middle";
        var chartCell = row.insertCell();
        chartCell.width = "100%";
        chartCell.appendChild(bar);
    }
    this.createBar = function(percent, color)
    {
        var div = document.createElement("div");
        div.className = "chartBar";
        div.style.width = Math.ceil(percent)+"%";
        //console.log(div.style.width);
        var fillDiv = document.createElement("div");
        //var invertedColor = "#"+(parseInt("0xFFFFFF")-parseInt("0x"+color)).toString(16);
        fillDiv.className = "chartBarFill";
        fillDiv.style.backgroundColor = "#"+color;
        fillDiv.style.textAlign = "center";
        //fillDiv.style.color = invertedColor;
        fillDiv.style.color = "black";
        fillDiv.innerHTML = div.style.width;
        div.appendChild(fillDiv);
        return div;
    }
    this.createAndInsertBar = function(title, percent, color)
    {
        var bar = this.createBar(percent, color);
        this.insertBar(title, bar);
    }

 }

 function hslToRgb(h, s, l)
 {
    var r, g, b;

    if(s == 0)
    {
        r = g = b = l; // achromatic
    }
    else
    {
        var hue2rgb = function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }
    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
 }

 function randomColor()
 {
    var rgb = hslToRgb(Math.random(), 0.81, 0.4);
    //var color = Math.ceil(parseInt("0xFFFFFF")*Math.random()).toString(16);
    var color = rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
    while (color.length < 6)
    {
        color = "0"+color;
    }

    return color;
 }

 function getColor(i, max)
 {
    var rgb = hslToRgb(i*(1.0/max), 0.8 , 0.4 + (0.4*(i%2)));
    var color = rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
    return color;
 }

 var chart = new BarChart(document.getElementById("chartDiv"));

 var max = 100;
 for (i = 0; i < max; i++)
 {
    var percentValue = Math.random() * 100;
    //var color = randomColor();
    var color = getColor(i, max);
    chart.createAndInsertBar("TITLE"+i, percentValue, color);
 }

 </script>
	<html>
	<body>
	<style>
	#chartDiv
	{
	width: 50%;
	height: 200px;
	}

	.chartBar
	{
	height: 20px;
	margin: 4px;
	}

	@keyframes fillBar{
	0% {width: 0%;}
	100% {width: 100%;}
	}

	.chartBarFill
	{
	height: 100%;
	background-color: red;
	/opacity: 0.5;/
	border: 2px solid rgba(0, 0, 0, 0.1);
	animation-name: fillBar;
	animation-duration: 2s;
	}

	</style>
	<div id="chartDiv">
	</div>
	</body>
	</html>

	<script>

	function BarChart(chartDiv)
	{
	this.chartDiv = chartDiv;
	this.table = document.createElement("table");
	this.table.style.tableLayout = "auto";
	this.table.style.borderCollapse = "collapse";
	this.table.style.verticalAlign = "middle";
	this.table.style.width = "100%";
	this.chartDiv.appendChild(this.table);
	this.insertBar = function(title, bar)
	{
	//this.chartDiv.insertBefore(bar, this.chartDiv.firstChild);
	var row = this.table.insertRow();
	var titleCell = row.insertCell();
	titleCell.appendChild(document.createTextNode(title));
	titleCell.style.float = "right";
	titleCell.style.verticalAlign = "middle";
	var chartCell = row.insertCell();
	chartCell.width = "100%";
	chartCell.appendChild(bar);
	}
	this.createBar = function(percent, color)
	{
	var div = document.createElement("div");
	div.className = "chartBar";
	div.style.width = Math.ceil(percent)+"%";
	//console.log(div.style.width);
	var fillDiv = document.createElement("div");
	//var invertedColor = "#"+(parseInt("0xFFFFFF")-parseInt("0x"+color)).toString(16);
	fillDiv.className = "chartBarFill";
	fillDiv.style.backgroundColor = "#"+color;
	fillDiv.style.textAlign = "center";
	//fillDiv.style.color = invertedColor;
	fillDiv.style.color = "black";
	fillDiv.innerHTML = div.style.width;
	div.appendChild(fillDiv);
	return div;
	}
	this.createAndInsertBar = function(title, percent, color)
	{
	var bar = this.createBar(percent, color);
	this.insertBar(title, bar);
	}

	}

	function hslToRgb(h, s, l)
	{
	var r, g, b;

	if(s == 0)
	{
	r = g = b = l; // achromatic
	}
	else
	{
	var hue2rgb = function hue2rgb(p, q, t){
	if(t < 0) t += 1;
	if(t > 1) t -= 1;
	if(t < 1/6) return p + (q - p) * 6 * t;
	if(t < 1/2) return q;
	if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
	return p;
	}

	var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
	var p = 2 * l - q;
	r = hue2rgb(p, q, h + 1/3);
	g = hue2rgb(p, q, h);
	b = hue2rgb(p, q, h - 1/3);
	}
	return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
	}

	function randomColor()
	{
	var rgb = hslToRgb(Math.random(), 0.81, 0.4);
	//var color = Math.ceil(parseInt("0xFFFFFF")*Math.random()).toString(16);
	var color = rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
	while (color.length < 6)
	{
	color = "0"+color;
	}

	return color;
	}

	function getColor(i, max)
	{
	var rgb = hslToRgb(i(1.0/max), 0.8 , 0.4 + (0.4(i%2)));
	var color = rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
	return color;
	}

	var chart = new BarChart(document.getElementById("chartDiv"));

	var max = 100;
	for (i = 0; i < max; i++)
	{
	var percentValue = Math.random() * 100;
	//var color = randomColor();
	var color = getColor(i, max);
	chart.createAndInsertBar("TITLE"+i, percentValue, color);
	}

	</script>
No results found