Fork me on GitHub
jsGraph

2 aligned axes

Add more axis

Add as many axis on your graph as you want. Axis on the same side of the graph stack on each other automatically

You are required to link your series to the axis you want. autoAxis() will bind the serie to the first bottom axis and first left axis.

Use axis.adapt0To( otherAxis[, mode, value ] ) to adapt the 0 of the axis to another one. If mode (min/max) and value are specified, the min or the max of the axis will take the value value. The other one will be determined by the position of the zero.

Source code

var graphinstance = new Graph( domGraph, {
  title: 'Solar cell j-V curve'
} );
var axisProperties = {
    primaryGrid: false,
    secondaryGrid: false,
    nbTicksPrimary: 5
  },
  xAxis = graphinstance.getXAxis( 0, axisProperties ),
  leftAxis = graphinstance.getLeftAxis( 0, axisProperties ),
  rightAxis = graphinstance.getRightAxis( 0, axisProperties );

graphinstance.newSerie( "current" )
  .autoAxis()
  .setData( series[ 0 ] )
  .setLineColor( 'black' );

graphinstance.newSerie( "power" )
  .autoAxis()
  .setYAxis( graphinstance.getRightAxis() )
  .setData( series[ 1 ] )
  .setLineColor( 'red' );

graphinstance.getYAxis().forceMin( -21 );
graphinstance.getYAxis().forceMax( 5 );
graphinstance.getXAxis().forceMin( 0 );
graphinstance.getXAxis().forceMax( 1 );

var shape = graphinstance.newShape( 'arrow', {
  pos: {
    x: jmax
  },
  pos2: {
    dx: "-20px",
    dy: "-20px"
  },
  label: {
    text: 'Max power point',
    position: {
      x: jmax,
      dx: "-25px",
      dy: "-25px"
    },
    anchor: 'middle'
  },
  strokeColor: 'black',
  strokeWidth: 1

} );

shape.setSerie( graphinstance.getSerie( 0 ) );
shape.draw();
shape.redraw();

graphinstance.getRightAxis().adapt0To( graphinstance.getYAxis(), 'min', -10 );

graphinstance.getXAxis().setLabel( 'Voltage (V)' );
graphinstance.getYAxis().setLabel( 'Current (mA cm-2)' );
graphinstance.getRightAxis().setLabel( 'Power output (mW)' );

graphinstance.getYAxis().setLineAt0( true );
graphinstance.redraw();
graphinstance.drawSeries();