In Tutorial 08 - Adding Multiple Axis, we showed you how to add a second YAxis.
Now we are going to show you how to create multiple charts and link them together.
Adding a First Chart
Let's create a first SciChartSurface with X and Y NumericAxis, Line Series and data to display a sine wave. To make the chart interactive we add several chart modifiers, such as: ZoomPanModifier, MouseWheelZoomModifier, ZoomExtentsModifier, RolloverModifier.
Now we can see the first chart.
Adding a Second Chart
Now we repeat the same procedure to configure the second chart with some differences. We need to use a different div element ID and it should be present in index.html file.
Other things we change: align Y Axis left, use Mountain Series Type instead of Line Series, populate data with cosine function instead of sine.
Our web application should now show two charts:
Synchronizing VisibleRanges on Axes
To make both charts show the same VisibleRange on X axes, we subscribe to AxisCore.visibleRangeChanged event and update VisibleRange of the second chart if has been chaged for the first chart and visa versa. In the begining of initSciChart() function we declare two variables and use them to store X Axis object for each SciChartSurface. In the end of initSciChart() function we synchronize visible ranges.
Now if we do panning or zooming for one chart the other chart is being updated accordingly.
Synchronizing Chart Widths
We've got two charts with synchronyzed X VisibleRanges. However it would be even better if they had the same width and were placed exactly under each other.
To achieve it we create SciChartVerticalGroup and add both surfaces to the group.
Results in this:
Linking Cursor and Other Modifiers
Next we are going to link chart modifiers.
Both charts have an array of ChartModifiers set up to handle zooming, panning and tooltips.
index.js |
Copy Code
|
---|---|
... sciChartSurface.chartModifiers.add( new ZoomPanModifier(), new MouseWheelZoomModifier(), new ZoomExtentsModifier(), new RolloverModifier() ); ... |
If you run the application now, you will notice that you have zooming behaviour and tooltips on both charts, but the mouse events still aren't linked. To link them we need to make one small change to set the chartModifierBase.modifierGroup property:
Run the application again. Now we can see that RolloverModifier events are linked and the Tooltips are now synchronizing across the charts.
Final Source Code
That was a complex tutorial, so here is the final source code for the Linking Multiple Charts tutorial. Don't forget you need two div elements in the HTML with different IDs to load the two SciChartSurfaces!
Further Reading
demo.scichart.com contains a couple of examples that show chart synchronization techniques.
For instance, take a look at the Sync Multi Chart demo which shows how to dynamically add/remove chart panes to a synchronization group.
Above: The Sync Multi Chart demo from the SciChart.js Demo
The Server Traffic Dashboard also has complex example of synchronizing zoom and tooltips between charts of different sizes in a more complex layout.
Above: The Server Traffic Dashboard from the SciChart.js Demo