Fork me on GitHub

Adapt axes

Introduction

Herein, we describe how to force different axes to behave dependently of each other. jsGraph gives you the possibility to adapt the value of one axis (in this example, the right one) to another value on another axis (in this example, the left one). For this, the function to employ is Axis.adaptTo, which was introduced in v1.3.12 (and replaces the previous adapt0To method which is covered and extended in the current adaptTo method).

The method takes the following syntax:

	myAxis.adaptTo( myAxisRef, myValueToAdaptTo, myReferenceValueOnAxisRef[, MinOrMaxPreferred = "min" ] )

With the following arguments:

  • axis should be an Axis axis instance of the same type (vertical/horizontal) as the same axis. Note that jsGraph doesn’t check that so you could mathematically adapt a y axis to an x axis, but this wouldn’t make too much sense
  • myValueToAdaptTo this is the value on the current axis that should be aligned to the other value on myReferenceValueOnAxisRef
  • myReferenceValueOnAxisRef is the value on the myAxisRef to which myValueToAdaptTo will be aligned to.
  • MinOrMaxPreferred will define the behavior of the boundaries (see text later)

Example

Let us start with a basic example

var serie1 = [ 0, -6, 2, 5, 5, 0 ];
var serie2 = [ 0, 10, 2, 0, 5, 12 ];

var g = new Graph( dom ) // Creates a new graph
g.resize( 400, 300 ); // Resizes the graph

g.newSerie( "serie1" ) // Creates a new seire
 .autoAxis() // Assigns automatic axes to the serie
 .setLineColor('blue')
 .setMarkers()
 .setData( serie1 ); // Assigns the data to the serie

g.newSerie( "serie2" ) // Creates a new seire
 .autoAxis() // Assigns automatic axes to the serie
 .setYAxis( g.getRightAxis() )
 .setLineColor('red')
 .setMarkers()
 .setData( serie2 ); // Assigns the data to the serie

g.getYAxis().gridsOff();
g.getXAxis().gridsOff();
g.getRightAxis().gridsOff();

g.draw();

Ok so here there’s no adapt. The two axis behave independantly and adapt to their own serie.

#### Natural behavior

Now, let’s force the right axis to align to the left axis. In this example, the value 0 of the right axis will align with -3 on the left axis:

g.getRightAxis().adaptTo( g.getLeftAxis(), 0, -3 ); // Aligns the 0 of the right axis with -3 of the left axis
g.draw();

So here you can see that the minimum of the right axis has been preserved (roughly -1). This is because of the MinOrMaxPreferred which is by default min. If we set it to max, a different behavior is observed:

g.getRightAxis().adaptTo( g.getLeftAxis(), 0, -3, "max" ); // Aligns the 0 of the right axis with -3 of the left axis
g.draw();

#### Behavior when axes are forced

Here is the rule when a boundary of the axis is forced:

  1. If no boundary is forced, then MinOrMaxPreferred defined which boundary behaves normally (adapts to the serie data).
  2. If only one boundary is forced, then MinOrMaxPreferred has no influence. Priority is given to forcing. So if forceMin is used and MinOrMaxPreferred is set to max, the minimum of the axis will be chose to behave normally (according to the forced minimum) and the max will adapt.
  3. If two boundaries are forced, MinOrMaxPreferred defined which one will be preserved. The other forced boundary will not be effective.

In this example, both boundaries are forced (case 3):

g.getRightAxis().forceMax( 50 );
g.getRightAxis().forceMin( -50 );
g.getRightAxis().adaptTo( g.getLeftAxis(), 0, -3, "max" ); // Aligns the 0 of the right axis with -3 of the left axis

While in the following example, case 2 applies (if one boundary only is forced, then MinOrMaxPreferred has no influence)

g.getRightAxis().forceMin( -50 );
g.getRightAxis().adaptTo( g.getLeftAxis(), 0, -3, "max" ); // Aligns the 0 of the right axis with -3 of the left axis