%META:TOPICPARENT{name="OATDOCIndex"}%
---+ barchart.js

Library for drawing bar charts, using HTML DOM.

%TOC%

---++ Objects

---+++ OAT.BarChart(div, optObj)

Creates a Bar Chart inside <tt>div</tt>; <tt>optObj</tt> describes its properties. <tt>optObj</tt> values:

   * <tt>*percentage*</tt> - bool; is it a percentage plot?
   * <tt>*spacing*</tt> - int; spacing between columns
   * <tt>*paddingLeft*</tt> ,*paddingBottom* ,*paddingTop* 
   * <tt>*width*</tt> - int; width of one column
   * <tt>*colors*</tt> - array of CSS colors, one for each value set
   * <tt>*border*</tt> - bool; outline each column?
   * <tt>*grid*</tt> - bool; show horizontal grid lines?
   * <tt>*gridDesc*</tt> - bool; show description of lines?
   * <tt>*gridNum*</tt> - int; approximate number of lines
   * <tt>*shadow*</tt> - bool; draw shadow for columns?
   * <tt>*shadowColor*</tt> - CSS color
   * <tt>*shadowOffset*</tt> - int; distance between column and its shadow

---++ Methods

---+++ OAT.BarChart::attachData(dataArray)

Adds data to chart. Each value of <tt>dataArray</tt> describes one column; each column may consist of multiple values. In such case, <tt>dataArray</tt> is an array of arrays.

---+++ OAT.BarChart::attachTextX(textArray)

Adds horizontal labels.

---+++ OAT.BarChart::attachTextY(textArray)

Adds vertical labels.

---+++ OAT.BarChart::draw()

Draws the chart.

---++ CSS classes

---+++ .legend

CSS class of legend div.

---+++ .legend_box

CSS class of boxes with bar color, positioned left from the value description text.

---+++ .textX

CSS class of X axis description.

---+++ .textY

CSS class of Y axis description.

---++ Example

<verbatim>
var chart = new OAT.BarChart("myDiv",{});
chart.attachData([1,3,2]);
chart.attachTextX(["a","b","c"]);
chart.draw();
</verbatim>

CategoryDocumentation CategoryOAT CategoryOpenSource