Version

Display Multiple Series

The xamTimeline™ control can display more than one time series. This allows for comparison between series and grouping of related timelines. The process is simple and involves just adding the additional series to the timeline and specifying the positioning of the series by setting the Position property to either TopOrLeft or BottomOrRight.

A timeline with multiple time series will display all the event points on the same pane. This means you must make sure the points are distinctively colored to distinguish one point from another. You can do this by setting the Fill or Stroke attributes for a particular time series.

Note
Note:

The time series must be of the same type: NumericTimeSeries or DateTimeSeries.

This example assumes that you know how to setup your project for Infragistics XamTimeline control. The following xaml code shows how to set up xamTimeline to display multiple Numeric Time Series.

In XAML:

<ig:XamTimeline x:Name="xamTimeline"
                  Width="1000" Height="400" Margin="15">
    <ig:XamTimeline.Series>
        <ig:NumericTimeSeries Title="Numeric Time Series 1"
                                Fill="Red" Position="TopOrLeft">
            <ig:NumericTimeSeries.Entries>
                <ig:NumericTimeEntry Time="1000" Title="Numeric Time Entry 1"
                                       Details="Details Time Entry 1"/>
                <ig:NumericTimeEntry Time="2000" Title="Numeric Time Entry 2"
                                       Details="Details Time Entry 2"/>
                <ig:NumericTimeEntry Time="3000" Title="Numeric Time Entry 3"
                                       Details="Details Time Entry 3"/>
            </ig:NumericTimeSeries.Entries>
        </ig:NumericTimeSeries>
        <ig:NumericTimeSeries Title="Numeric Time Series 2"
                                Fill="Blue" Position="BottomOrRight">
            <ig:NumericTimeSeries.Entries>
                <ig:NumericTimeEntry Time="1500" Title="Numeric Time Entry 1"
                                       Details="Details Time Entry 1"/>
                <ig:NumericTimeEntry Time="2500" Title="Numeric Time Entry 2"
                                       Details="Details Time Entry 2"/>
                <ig:NumericTimeEntry Time="3500" Title="Numeric Time Entry 3"
                                       Details="Details Time Entry 3"/>
            </ig:NumericTimeSeries.Entries>
        </ig:NumericTimeSeries>
        <ig:NumericTimeSeries Title="Numeric Time Series 3"
                                Fill="Yellow" Position="BottomOrRight">
            <ig:NumericTimeSeries.Entries>
                <ig:NumericTimeEntry Time="1300" Title="Numeric Time Entry 1"
                                       Details="Details Time Entry 1"/>
                <ig:NumericTimeEntry Time="2300" Title="Numeric Time Entry 2"
                                       Details="Details Time Entry 2"/>
                <ig:NumericTimeEntry Time="3300" Title="Numeric Time Entry 3"
                                       Details="Details Time Entry 3"/>
            </ig:NumericTimeSeries.Entries>
        </ig:NumericTimeSeries>
    </ig:XamTimeline.Series>
</ig:XamTimeline>
XamTimeline Use Multiple Series 01.png

Related Topics

Add Numeric Event Entries

Display Date Time Series

Display Numeric Time Series

Styling Time Series