Version

Chart Synchronization

In XamDataChart™ control, synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the SyncChannel property and then specify whether or not synchronize chart horizontally and/or vertically.

Synchronization Properties

Property Name Type Description

string

Determines identifier of synchronization channel for linking multiple chart controls

bool

Determines wheter or not synchronize vertically chart controls that linked to the sync. channel

bool

Determines wheter or not synchronize horizontally chart controls that linked to the sync. channel

Code Example

The following sample code shows all possible synchronization combinations between four XamDataChart controls. The first chart is synchronized horizontally and vertically with second and third charts respectively. The forth chart is not synchronized with any of the other charts.

In XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions >
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <ig:XamDataChart x:Name="DataChart1" Grid.Row="0"
                     HorizontalZoomable="True" VerticalZoomable="True">
        <ig:SyncManager.SyncSettings>
            <ig:SyncSettings SyncChannel="syncGroup1" SynchronizeHorizontally="True" SynchronizeVertically="True"/>
        </ig:SyncManager.SyncSettings>
    </ig:XamDataChart>

    <ig:XamDataChart x:Name="DataChart2" Grid.Row="0" Grid.Column="1"
                        HorizontalZoomable="True" VerticalZoomable="True">
        <ig:SyncManager.SyncSettings>
            <ig:SyncSettings SyncChannel="syncGroup1" SynchronizeHorizontally="False" SynchronizeVertically="True"/>
        </ig:SyncManager.SyncSettings>
    </ig:XamDataChart>

    <ig:XamDataChart x:Name="DataChart3" Grid.Row="1"
                       HorizontalZoomable="True" VerticalZoomable="True">
        <ig:SyncManager.SyncSettings>
            <ig:SyncSettings SyncChannel="syncGroup1" SynchronizeHorizontally="True" SynchronizeVertically="False"/>
        </ig:SyncManager.SyncSettings>
    </ig:XamDataChart>

    <ig:XamDataChart x:Name="DataChart4" Grid.Row="1" Grid.Column="1"
                       HorizontalZoomable="True" VerticalZoomable="True">
        <ig:SyncManager.SyncSettings>
            <ig:SyncSettings SyncChannel="syncGroup2" SynchronizeHorizontally="False" SynchronizeVertically="False"/>
        </ig:SyncManager.SyncSettings>
    </ig:XamDataChart>
</Grid>

In Visual Basic:

Dim sync1 As New SyncSettings()
sync1.SyncChannel = "syncGroup1"
sync1.SynchronizeHorizontally = true
sync1.SynchronizeVertically = true
SyncManager.SetSyncSettings(DataChart1, sync1)

Dim sync2 As New SyncSettings()
sync2.SyncChannel = "syncGroup1"
sync2.SynchronizeHorizontally = false
sync2.SynchronizeVertically = true
SyncManager.SetSyncSettings(DataChart2, sync2)

Dim sync3 As New SyncSettings()
sync3.SyncChannel = "syncGroup1"
sync3.SynchronizeHorizontally = true
sync3.SynchronizeVertically = false
SyncManager.SetSyncSettings(DataChart3, sync3)

Dim sync4 As New SyncSettings()
sync4.SyncChannel = "syncGroup1"
sync4.SynchronizeHorizontally = false
sync4.SynchronizeVertically = false
SyncManager.SetSyncSettings(DataChart4, sync4)

In C#:

var sync1 = new SyncSettings();
sync1.SyncChannel = "syncGroup1";
sync1.SynchronizeHorizontally = true;
sync1.SynchronizeVertically = true;
SyncManager.SetSyncSettings(DataChart1, sync1);

var sync2 = new SyncSettings();
sync2.SyncChannel = "syncGroup1";
sync2.SynchronizeHorizontally = false;
sync2.SynchronizeVertically = true;
SyncManager.SetSyncSettings(DataChart2,sync2);

var sync3 = new SyncSettings();
sync3.SyncChannel = "syncGroup1";
sync3.SynchronizeHorizontally = true;
sync3.SynchronizeVertically = false;
SyncManager.SetSyncSettings(DataChart3,sync3);

var sync4 = new SyncSettings();
sync4.SyncChannel = "syncGroup1";
sync4.SynchronizeHorizontally = false;
sync4.SynchronizeVertically = false;
SyncManager.SetSyncSettings(DataChart4,sync4);

The following image shows four XamDataChart controls with all possible synchronization combinations and what happens when a user attempts to zoom in to specific area of the first chart’s plot area.

xamDataChart RT Chart Synchronization 01.png

Related Content