Best way to show timepoints?

[Sean Schellinger]

Hi,

I am trying to create a timeline with markers for actions. I am attaching an image of what I'm looking for. I'm not exactly sure what the best method for this would be. I was thinking of using an SfChart and adding a point for each that has a Y value of 0 and using markers for each "event". What would you recommend would be the best way to do this?

Attachment: timelineexample_caa845d2.zip

[Durgadevi Selvaraj]

Hi Sean, 

 

We have analyzed your requirement and it can be achieved by using our SegmentColorPath and adornment feature. 

 

Using SegmentColorPath , you can set the desire color to each segment in view model itself and access it through this property as like in below code, 

 

Code Snippet[ViewModel.cs] 

public class ViewModel 

    { 

        public ObservableCollection<Model> Collection { get; set; } 

 

        public ViewModel() 

        { 

            Collection = new ObservableCollection<Model>(); 

 

            for (int i = 0; i < 6; i++) 

            { 

                if (i == 4) 

                    Collection.Add(new Model() { XValue = i, YValue = 0, SegmentColor = new SolidColorBrush(Colors.Red) }); 

                else 

                    Collection.Add(new Model() { XValue = i, YValue = 0, SegmentColor = new SolidColorBrush(Colors.LawnGreen) }); 

            } 

        } 

    } 

 

Code Snippet[XAML] 

<chart:ScatterSeries ItemsSource="{Binding Collection}" SegmentColorPath="SegmentColor" XBindingPath="XValue"  YBindingPath="YValue"> 

 

 

You can refer our UG documentation link to know more about this property, 

Link: https://help.syncfusion.com/wpf/sfchart/styling-and-customization#segmentcolorpath 

Using Adornment feature, you can represent each data point with some text/symbol. It can be set as like in below code, 

 

Code Snippet[XAML] 

<chart:ScatterSeries.AdornmentsInfo> 

    <chart:ChartAdornmentInfo ShowLabel="True" SegmentLabelContent="LabelContentPath" ConnectorHeight="30"   ShowConnectorLine="True" > 

         <chart:ChartAdornmentInfo.LabelTemplate> 

            <DataTemplate> 

               <ContentControl Content="{Binding Converter={StaticResource symbol}}"/ > 

            </DataTemplate> 

         </chart:ChartAdornmentInfo.LabelTemplate> 

     </chart:ChartAdornmentInfo> 

</chart:ScatterSeries.AdornmentsInfo> 

 

Please refer our UG documentation link to know more about chart adornment, 

Link: https://help.syncfusion.com/wpf/sfchart/adornments 

 

We have prepared a sample based on this requirement and it can be downloaded from below link, 

Sample:SfChart_Sample
 

 

Please find the reference output screenshot below, 

 

 

 

Please let us know if you need any further assistance on this. 

 

Regards,  

Durgadevi S