Web www.gerd-tentler.de
Version 4.10 (released Jan. 7, 2012) [Download]

Usage

The BAR_GRAPH class creates the graph and returns the corresponding HTML code.

Syntax:

See examples below.

Required:
  • values => graph data: array or string with comma-separated values
Optional:
  • type => graph type: "hBar" (default), "vBar", "pBar", "fader"
  • graphBGColor => graph background color: string
  • graphBorder => graph border: string (CSS-spec: "size style color", e.g. "1px solid black")
  • graphPadding => graph padding: integer (pixels)
  • titles => titles: array or string with comma-separated values
  • titleColor => title span color: string
  • titleBGColor => title background color: string
  • titleBorder => title border: string (CSS-spec: "size style color", e.g. "1px solid black")
  • titlespan => title span family: string (CSS-spec, e.g. "Arial, Helvetica")
  • titleSize => title span size: integer (pixels)
  • titleAlign => title text align: "left", "center", or "right"
  • titlePadding => title padding: integer (pixels)
  • labels => label names: array or string with comma-separated values
  • labelColor => label span color: string
  • labelBGColor => label background color: string
  • labelBorder => label border: string (CSS-spec: "size style color", e.g. "1px solid black")
  • labelspan => label span family: string (CSS-spec, e.g. "Arial, Helvetica")
  • labelSize => label span size: integer (pixels)
  • labelAlign => label text align: "left", "center", or "right"
  • labelSpace => additional space between labels: integer (pixels)
  • barWidth => bar width: integer (pixels)
  • barLength => bar length ratio: float (from 0.1 to 2.9, default = 1.0)
  • barColors => bar colors OR bar images: array or string with comma-separated values
  • barBGColor => bar background color: string
  • barBorder => bar border: string (CSS-spec: "size style color", e.g. "1px solid black")
  • barLevelColors => bar level colors: ascending array (bLevel, bColor[,...]); draw bars >= bLevel with bColor
  • showValues => show values: integer (0 = % only [default], 1 = abs. and %, 2 = abs. only, 3 = none)
  • baseValue => base value: integer or float (only hBar and vBar)
  • absValuesColor => abs. values span color: string
  • absValuesBGColor => abs. values background color: string
  • absValuesBorder => abs. values border: string (CSS-spec: "size style color", e.g. "1px solid black")
  • absValuesspan => abs. values span family: string (CSS-spec, e.g. "Arial, Helvetica")
  • absValuesSize => abs. values span size: integer (pixels)
  • absValuesPrefix => abs. values prefix: string (e.g. "$")
  • absValuesSuffix => abs. values suffix: string (e.g. " kg")
  • percValuesColor => perc. values span color: string
  • percValuesspan => perc. values span family: string (CSS-spec, e.g. "Arial, Helvetica")
  • percValuesSize => perc. values span size: integer (pixels)
  • percValuesDecimals => perc. values number of decimals: integer
  • charts => number of charts: integer
hBar / vBar only:
  • legend => legend items: array or string with comma-separated values
  • legendColor => legend span color: string
  • legendBGColor => legend background color: string
  • legendBorder => legend border: string (CSS-spec: "size style color", e.g. "1px solid black")
  • legendspan => legend span family: string (CSS-spec, e.g. "Arial, Helvetica")
  • legendSize => legend span size: integer (pixels)
  • legendAlign => legend vertical align: "top", "center", "bottom"
  • legendAbsValues => view abs. values in legend: true = yes, false = no
Example #1 (simple bar graph):
graph = new BAR_GRAPH("hBar");
graph.values = "380,150,260,310,430";
document.write(graph.create());
Example #2 (grouped bars with legend):
graph = new BAR_GRAPH("hBar");
graph.values = "50;30;40, 60;80;50, 70;40;60";
graph.legend = "cats,dogs,birds";
document.write(graph.create());
Progress bars and faders are a bit different from the other graph types. You have to specify two values for each bar: The first one is the actual value, the second one is the maximum value of the progress bar or fader, i.e. the value that equals 100%. The two values are separated by a semicolon.

Example #3 (single progress bar):
graph = new BAR_GRAPH("pBar");
graph.values = "123;456";
document.write(graph.create());
Example #4 (multiple progress bars with labels):
graph = new BAR_GRAPH("pBar");
graph.values = "50;100, 60;100, 70;100";
graph.labels = "cats,dogs,birds";
document.write(graph.create());

Comments