Connect the dots between

[Fredrik]

Is it possible to connect the dots on the attached image?

I have a chart where the x-axis is time span and the y-axis is double.

On the x-axis I want to show every hour between the stating time span 0h 0 min to the ending time span 23h 59min.

So what I have done is to create a list with all y-axis datapoints and all steps of the x-axis.

Where there are no datapoints on the y-axis I set the double to NaN.

So what I want is to draw a line between the values that are not set to NaN. Or ofcourse if there is another way to resolve this.

 

Items = new List<CurveItPlotInfo>();

            for (int i = 0; i < 23; i++)
            {
                if (vats.Any(x => x.Time.Hours == i))
                {
                    foreach (var item in vats.Where(x => x.Time.Hours == i))
                    {
                        Items.Add(new CurveItPlotInfo
                        {
                            TimeSpanValue = item.Time,
                            Value = ConvertToDouble(item.Value),
                        });
                    }
                }
                else if (i == 23)
                {
                    Items.Add(new CurveItPlotInfo
                    {
                        TimeSpanValue = TimeSpan.FromMinutes(1439),
                        Value = Double.NaN, 
                    });                
                }
                else
                {
                    Items.Add(new CurveItPlotInfo
                    {
                        TimeSpanValue = TimeSpan.FromHours(i),
                        Value = Double.NaN, 
                    }); ;
                }
            }
 
public class CurveItPlotInfo : ViewModelBase
    {

        private double value;
        private TimeSpan timeSpanValue;

        public double Value
        {
            get { return value; }
            set { SetProperty(ref this.value, value); }
        }

        public TimeSpan TimeSpanValue { get => timeSpanValue; set { SetProperty(ref timeSpanValue, value); } }

    }

 

<telerik:RadCartesianChart x:Name="CurveItChart" 
                                   Loaded="CurveIt_Loaded"
                                   Grid.Row="0">
            
            <telerik:RadCartesianChart.SmartLabelsStrategy>
                <telerik:ChartSmartLabelsStrategy />
            </telerik:RadCartesianChart.SmartLabelsStrategy>
            
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis x:Name="verticalAxis" Minimum="{Binding MinValue}" Maximum="{Binding MaxValue}" />
            </telerik:RadCartesianChart.VerticalAxis>
            
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeCategoricalAxis x:Name="datetimeAxis" 
                                                 SmartLabelsMode="SmartStep"
                                                 MajorTickLength="15"
                                                 PlotMode="OnTicksPadded">
                    <telerik:DateTimeCategoricalAxis.LabelTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Converter={converters:TimeSpanFormatConverter}}" />
                        </DataTemplate>
                    </telerik:DateTimeCategoricalAxis.LabelTemplate>
                </telerik:DateTimeCategoricalAxis>
            </telerik:RadCartesianChart.HorizontalAxis>
            
            <telerik:RadCartesianChart.Series>
                <telerik:LineSeries ValueBinding="Value" CategoryBinding="TimeSpanValue" ItemsSource="{Binding Items}">

                    <telerik:LineSeries.PointTemplate>
                        <DataTemplate>
                            <Border BorderBrush="AliceBlue" BorderThickness="1" >
                                <Rectangle Width="15" Height="15" Fill="Black"
                                           MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" />
                            </Border>
                        </DataTemplate>
                    </telerik:LineSeries.PointTemplate>

                </telerik:LineSeries>
                
            </telerik:RadCartesianChart.Series>
            
        </telerik:RadCartesianChart>

[Fredrik]

It looks like I solved it by converting the timespan to datetime and the DateTimeCategoricalAxis to a DateTimeContinuousAxis. It's not pretty but it works.

[Martin Ivanov]

This is the way to go. 

An alternative approach would be to use a ScatterLineSeries with two LinearAxis instances. So, instead of  a Categorical or DateTime horizontal axis, you will have a numeric (LinearAxis). This will allow you to use the Ticks property of the TimeSpan object for the horizontal values. You can use the LabelTemplate of the axis along with an IValueConverter in order to change the labels long value (the Ticks) to a time-based string (like "12:00"). In this case you won't need to have the empty (double.NaN) values, so you can remove them from the ItemsSource of the series.

[Fredrik]

Another question on the same code.

 

Is it possible to hide some of the rectangles?

 

I've tried with:

<telerik:LineSeries.PointTemplate>
                        <DataTemplate>
                            <Border BorderBrush="AliceBlue" BorderThickness="1" Visibility="{Binding DataItem.Show, Converter={convert:boolToVisibility }}">
                                <Rectangle Width="15" Height="15" Fill="Black"
                                           MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" />
                            </Border>
                        </DataTemplate>
                    </telerik:LineSeries.PointTemplate>

 

But It hides all the rectangles.

 

[Martin Ivanov]

You can do this by using the PointTemplateSelector of the series. This way you can return your original DataTemplate when the rectangle should be shown and an empty DataTemplate when the rectangle should be hidden.