barchart.js

Library for drawing bar charts, using HTML DOM.

Objects

OAT.BarChart(div, optObj)

Creates a Bar Chart inside div; optObj describes its properties. optObj values:

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

Methods

OAT.BarChart::attachData(dataArray)

Adds data to chart. Each value of dataArray describes one column; each column may consist of multiple values. In such case, dataArray 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

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