ChartsLab-Axis

The axis component renders human-readable reference marks for Scale. This alleviates one of the more tedious tasks in visualizing data. The axis component also uses html5 canvas element for drawing so it keeps your code beautiful and clean.

Installing

For now you can download the latest release. You can also load directly from Site(NotFound), either as standalone micro library or as part of ChartsLab release.

<script src="chartsLab/Axis.js"></script>
<script>
var axis = new Axis(canvasContext);
</script>

Requires

Axis component requires just Scale for ticks optimizing.

API Reference

Axis rendered at specific oriantation(Side) and position. To change the position of the axis with respect to the chart, just give position function a start position and end(finish) position points. And Side function is the oriantation of the axis ticks and lable, at the end just call draw for render the component at the canvas. For example:

Axis
  .Position([50,50], [500,50])
  .Side("TOP")
  .Draw();

The micro library API gives you alot of functionality to manipulate the components type and style and values as easy as possible

# ChartsLab.Axis(ctx Context)

Constructs a new axis generator object for the given with ready for drawing in the given canvas context with defaults Tick number is equals to 10, Inner tick number equals to 3, Tick label padding equals to 25, Outer tick size equals to 5, Inner tick size equals to 15, Axis width equals to 2, Tick width equals to 2, and auto TickFormat

# Axis.Position([StartPoint Array], [EndPoint Array])

Position Take 2 Array each contain 2 value for start and end coordinates for this axis, you can control the position of start you axis it validate it and raise an error for problems see raised errors ErrorHandler for more details.

# Axis.Side(side String)

Side take string and let you choose the side of you axis or oriantation, it validate the string to a given values (TOP, BOTTOM, LEFT, RIGHT) (comming soon Enums) but for now you must write it capital letters.

# Axis.Label(text String)

This function let you choose the label of your axis. The position of the label in the center and the orintation and rotation are dynamically allocated based on Side, Position.

# Axis.AxisWidth(size Integer)

This function allows you to choose the line width for you axis to be drawen with (the axis is a line at the end). Note: the axis width is not correlated to tick in any way.

# Axis.Scale(scale Scale)

Scale is the mapping function that maps each tick to certain position along the Axis based on it's value and the scale type, see Scale for more details, this function simpilify for you to find the position and this is the only required class need for axis plotting.

# Axis.TickWdith(width Number)

Like AxisWidth function you can also control the tick line width that used in drawing, note: the tick width is different the tickPadding and tickSize.

# Axis.TickPadding(padding Number)

This function specify the distance between tick and the tick lable, and it takes a positive integer and validate it see ErrorHandler for more details.

# Axis.TickNumber(tickNumber Number)

This function set the number of tick in the axis, and it takes a positive integer bigger than 1 and it's default is 10 ticks

# Axis.InnerTickNumber(innerTickNumber Number)

# Axis.OuterTickSize(size Number)

# Axis.InnerTickSize(size Number)

# Axis.DashedTick(flag Boolean)