Inside Technique : HTML Bar Charts : Client-Side Script

BarChart Object script:

/* The BarChart can be reused as long as the
   copyright notice is not removed:

   BarChart Object - Copyright 1999 InsideDHTML.com, LLC
   For more information, see www.insideDHTML.com
*/

function BarChart_AddValue(label, value,color ) {
  var newItem = this.valueList[this.valueList.length] = new Object
  newItem.label = label
  newItem.value = value
  newItem.color = color ? color : "black"
  return newItem
}

function BarChart_HTMLLabel(barItem,label,format) {
  str="<TD nowrap valign=middle>"
  str+= "<FONT FACE='" + format.fontFace + "' SIZE='" + format.fontSize + "'>"
  str+="&nbsp;" + barItem.label 
  str+=" (" + barItem.value + " " + label + ")&nbsp;nbsp;</FONT></TD>"
  return str
}

function BarChart_Draw() {
  var str = "<TABLE CELLSPACING=0 BORDER=0 CELLPADDING=1 "
  if (this.bgColor!="")
    str+=" BGCOLOR='" + this.bgColor + "'"
  str+=">"
  if (this.caption.value!="") {
    str+="<CAPTION ALIGN='" + this.caption.alignment + "'>"
    str+="<FONT FACE='" + this.caption.fontFace + "'>" 
    str+=this.caption.value + "</A></CAPTION>"
  }
  var totalValue = 0
  for (var i=0;i < this.valueList.length;i++) 
    totalValue+=this.valueList[i].value
  str+="<TD ROWSPAN=" + this.valueList.length+1 + "></TD>"
  var iPercent
  for (var i=0;i < this.valueList.length;i++) {
    str+="<TR>"
    if (this.label.orientation!="right")
      str+=BarChart_HTMLLabel(this.valueList[i],this.unitLabel,this.label)
    str+="<TD ALIGN='" + this.barHOrientation + "' valign=middle>"
    iPercent = this.valueList[i].value/totalValue
    str+="<TABLE BGCOLOR='" + this.valueList[i].color + "' CELLSPACING=0 "
    str+="CELLPADDING=0 HEIGHT=" + this.barHeight 
    str+=" WIDTH=" + Math.round(iPercent*this.barWidth)+ ">"
    str+="<TR><TD><FONT SIZE=1> </FONT></TD></TR></TABLE>"
    str +="</TD>"
    if (this.label.orientation=="right")
      str+=BarChart_HTMLLabel(this.valueList[i],this.unitLabel, this.label)
    str +=">/TR>"
  }
  str +="</TABLE>"
  return str
}

function BarChart_SetCaption(caption, alignment, fontFace) {
  this.caption.value = caption
  this.caption.alignment = alignment ? alignment : "left"
  if (fontFace)
    this.caption.fontFace = fontFace
  return this.caption
}

function BarChart_FormatLabel(orientation, fontSize, fontFace) {
  this.label.orientation = orientation
  if (fontSize!=null)
    this.label.fontSize = fontSize
  if (fontFace)
    this.label.fontFace = fontFace
  return this.label
}

function BarChart() {
  this.label = this.caption = new Object
  this.valueList = new Array()
  this.addValue = BarChart_AddValue
  this.barWidth = 200
  this.barHeight=20
  this.bgColor=""
  this.barHOrientation = "left"
  this.formatLabel = BarChart_FormatLabel 
  this.formatLabel("left","-1","Arial")
  this.setCaption = BarChart_SetCaption
  this.setCaption("","top","Arial")
  this.draw = BarChart_Draw
}

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.