Home Demos

A panel of charts with linked x axes

This example demonstrates how to create multiple graphs on a single canvas, whose horizontal axes are locked together.

The user is able to click and drag the graphs left and right to change the horizontal axes range, because the interactiveMode option on the JSPlot_Graph instances is set to pan. However, all three graphs will always move in lock step because they are linked together.

The horizontal axis of any graph is configured using the x1_axis setting on the JSPlot_Graph instance. Similar options configure the x1 (bottom), x2 (top), y1 (left) and y2 (right) axes. On three-dimensional graphs, z1_axis and z2_axis are also valid settings.

Within the settings for each axis, the linkTo option is used to lock that axis to another axis on another graph. This setting should be set to an array with two items, of the form [graph_name, axis_name]. Here, the graph name is the name of the JSPlot_Graph instance among the items on the plotting canvas. The axis name is the name of the axis to link to, within that graph.

Source code for this page