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

Library for drawing Line charts, using SVG.

%TOC%

---++ Functions

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

Creates a Line Chart insidediv,optObjdescribes its properties. Its values:

   * <tt>*paddingLeft*</tt> ,<tt>*paddingBottom*</tt> ,<tt>*paddingTop*</tt> ,<tt>*paddingRight* </tt>
   * <tt>*axes*</tt> - bool, should axes be drawn?
   * <tt>*legend*</tt> - bool, should legend be drawn?
   * <tt>*markerSize*</tt> - int
   * <tt>*colors*</tt> - array of strings; one color per each dataset
   * <tt>*grid*</tt> - bool, should horizontal lines be drawn?
   * <tt>*gridDesc*</tt> - bool; should labels for horizontal lines be drawn?
   * <tt>*gridNum*</tt> - int; approximate count of horizontal lines
   * <tt>*desc*</tt> - bool; should X labels be drawn?
   * <tt>*markers*</tt> - array of marker constants
   * <tt>*gridColor*</tt> - string
   * <tt>*fontSize*</tt> - int

---++ Methods

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

Adds data to chart.<tt>dataArray</tt> may be an array of arrays; in this case, each sub-array is treated as one dataset.

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

Adds X axis labels.

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

Adds legend labels.

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

Draws the chart.

---++ Constants

---+++ OAT.LineChartMarker.MARKER_

Constants specifying shape of the value markers.

   * <tt><b>OAT.LineChartMarker.MARKER_CIRCLE</b></tt> 
   * <tt><b>OAT.LineChartMarker.MARKER_TRIANGLE</b> </tt>
   * <tt><b>OAT.LineChartMarker.MARKER_CROSS</b></tt>
   * <tt><b>OAT.LineChartMarker.MARKER_SQUARE</b> </tt>

---++ Example

<verbatim>
var data = [ [1,2,4,3], [4,3,2,1], [2,1,3,4], [3,4,1,2]];
var lc = new OAT.LineChart("myDiv",{markerSize:6});
lc.attachData(data);
lc.attachTextX(["a","b","c","d"]);
lc.attachTextY(["red","blue","green","yellow"]);
lc.draw();
</verbatim>

CategoryDocumentation CategoryOAT CategoryOpenSource