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.
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.
<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>
