동적 그래프

<script>
IE=(window.showModalDialog) ? true : false;
function obxGetColor(color,gap) {

var rtn='',col,tmp;

for(var x=0;x <6; x+=2) {
col=parseInt(color.substr(x,2),16)+gap;
if (col > 255) col = 255;
else if (col < 0) col=0;
if(col < 10) rtn+='0'+col.toString(16);
else rtn+=col.toString(16);
}
return rtn;
}

function obxStickGraph(dsize) {

this.step=3;
this.speed=10;
this.total=0;
this.max=0;
this.dsize=dsize;
this.statictext=false;
this.item= new Object();
this.add = function (id,size,color,text) {
this.total += size;
this.max=Math.max(this.max,size);
this.item[id]= {'size' : size, 'color' : color.replace('#',''), 'text' : text}
}
this.draw = function (id,action) {

var dColor=obxGetColor(this.item[id].color,-20);

document.write("<div></div>");
var divs=document.getElementsByTagName('div');
this.item[id].div=divs[divs.length-1];
this.item[id].div.style.borderLeft="1px solid #"+dColor;
this.item[id].div.style.overflow="hidden";
this.item[id].div.style.height="11px";
if(!action) this.actDraw(id);
else this.actDraw(id,5);
}
this.getCss= function(width,height,color,bwidth,bcolor) {
if(width<1)width=1;
return "overflow:hidden;width:"+width+";height:"+height+";background-color:"+color+";border-right:"+bwidth+"px #"+bcolor+" solid";
}
this.actDraw= function(id,limit) {
var pp = this.item[id].size / this.total;
var sizep = this.item[id].size / this.max;
if(!limit) var size=this.dsize * sizep;
else size=limit;

var hit = Math.round(this.max/this.dsize*size);
var percent =(Math.round(this.max/this.dsize*size)/this.total*100).toString().match(/[0-9]*(?:\.[0-9][0-9])?/);
var text = (this.item[id].text) ? this.item[id].text.replace('#',hit).replace('$',percent) : percent + " %"
    
var Color=this.item[id].color;
var hColor=obxGetColor(Color,20);
var hhColor=obxGetColor(Color,30);
var dColor=obxGetColor(this.item[id].color,-20);
var add='',d;
if(IE) d=new Array(3,2,1);
else d=new Array(3,4,5);
this.item[id].div.innerHTML= ''
    +'<div style="'+this.getCss(size-d[0],1,hColor,1,hhColor)+'"></div>'
    +'<div style="'+this.getCss(size-d[1],2,hColor,3,hhColor)+'"></div>'
    +'<div style="'+this.getCss(size-d[2],2,hColor,5,hhColor)+'"></div>'
    +'<div style="'+this.getCss(size-d[2],1,hhColor,5,hhColor)+'"></div>'
    +'<div style="'+this.getCss(size-d[2],2,Color,5,hhColor)+'"></div>'
    +'<div style="'+this.getCss(size-d[1],2,Color,3,hhColor)+'"></div>'
    +'<div style="'+this.getCss(size-d[0],1,dColor,1,hhColor)+'"></div>'
    +'<span style="position:relative;top:'+(-11-IE)+'px;left:'+(((this.statictext)?this.dsize*sizep:size)+5)+'px;font:7pt verdana">'+text+'</span>'
if(limit)
if(this.dsize * sizep > limit) {
    obxStickGraphRunObject=this;
    setTimeout('obxStickGraphRunObject.actDraw("'+id+'",'+(limit+this.step)+');',this.speed);
}else{
    setTimeout('obxStickGraphRunObject.actDraw("'+id+'");',this.speed);
}
}

}


</script>



http://muhwa.com/!/sample/obxstickgraph