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