|
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
|