Connect the dots between

1 Answer 20 Views
Chart ChartView
Fredrik
Top achievements
Rank 1
Veteran
Iron
Fredrik asked on 10 May 2021, 09:40 AM | edited on 10 May 2021, 12:23 PM

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
Top achievements
Rank 1
Veteran
Iron
commented on 10 May 2021, 02:09 PM

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
Telerik team
commented on 12 May 2021, 08:40 PM

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.

1 Answer, 1 is accepted

Sort by
0
Fredrik
Top achievements
Rank 1
Veteran
Iron
answered on 11 May 2021, 08:51 AM

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
Telerik team
commented on 12 May 2021, 08:43 PM

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.
Tags
Chart ChartView
Asked by
Fredrik
Top achievements
Rank 1
Veteran
Iron
Answers by
Fredrik
Top achievements
Rank 1
Veteran
Iron
Share this question
or