linechart.js

Library for drawing Line charts, using SVG.

Functions

OAT.LineChart(div, optObj)

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

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

Methods

OAT.LineChart::attachData(dataArray)

Adds data to chart.dataArray 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.

• OAT.LineChartMarker.MARKER_CIRCLE
• OAT.LineChartMarker.MARKER_TRIANGLE
• OAT.LineChartMarker.MARKER_CROSS
• OAT.LineChartMarker.MARKER_SQUARE

Example

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();