Synchronizing two axes

You may want to synchronize the axes of two or more graphs (meaning that they all show the same minimum and maximum value). To realize this, you can use the event system the min and/or max properties of the corresponding axes.

The callback function needs to be evaluated pairwise: If the first graph is manipulated, then the second graph must be adjusted in the event handler of the first graph and vice versa.

In the following example both of the axes are synchronized. Of course you can synchronize only the abscissa or the ordinate.

// if the axis of graph0 is changed by user interaction, the axis of
// graph1 will be adjusted in update1()
graph0.abscissae.x.min.addEventListener('change', update1)
graph0.abscissae.x.max.addEventListener('change', update1)
graph0.ordinates.y.min.addEventListener('change', update1)
graph0.ordinates.y.max.addEventListener('change', update1)

graph1.abscissae.x.min.addEventListener('change', update0)
graph1.abscissae.x.max.addEventListener('change', update0)
graph1.ordinates.y.min.addEventListener('change', update0)
graph1.ordinates.y.max.addEventListener('change', update0)

function update0() {
  graph0.abscissae.x.min.assign(graph1.abscissae.x.min.value)
  graph0.abscissae.x.max.assign(graph1.abscissae.x.max.value)

graph0.ordinates.y.min.assign(graph1.ordinates.y.min.value)
  graph0.ordinates.y.max.assign(graph1.ordinates.y.max.value)
}

// adjust the axes of graph1, so that the range will be same as graph0
function update1() {
  graph1.abscissae.x.min.assign(graph0.abscissae.x.min.value)
  graph1.abscissae.x.max.assign(graph0.abscissae.x.max.value)

graph1.ordinates.y.min.assign(graph0.ordinates.y.min.value)
  graph1.ordinates.y.max.assign(graph0.ordinates.y.max.value)
}