RadCartesianChart multiple line series sorting

[Maurício]

Hello

 

I have a RadCartesianChart with two LineSeries, one of the series is populated with a list of categories and values and the other is loads its categories based on a timer. Every time the timer ticks, a new category and value is added to the green line series. 

Let me show you a screenshot.

I know exactly what are the categories and values for the grey line. The chart is loaded with them and that works well.

But the green line series ends up in the wrong place as I add new categories that were not there in first place. I wish that in the example above the categories could be 1 ... 2 ... 3 ...

Do I need to sort it? But how?

Here's my code example:

<Window
    x:Class="Telerik.Question.Charts.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    Title="MainWindow"
    Width="1200"
    Height="450"
    mc:Ignorable="d">

    <Grid>
        <telerik:RadCartesianChart
            x:Name="chart"
            Width="1050"
            Height="176">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:CategoricalAxis
                    LineThickness="0"
                    MajorTickLength="0"
                    SmartLabelsMode="SmartStep"
                    TickThickness="0" />
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis
                    LineThickness="0"
                    MajorTickLength="30"
                    TickThickness="0" />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Series>
                <telerik:LineSeries
                    x:Name="scriptSeries"
                    Stroke="#525E68"
                    StrokeThickness="4" />
                <telerik:LineSeries
                    x:Name="scriptChangesSeries"
                    Stroke="#07D19C"
                    StrokeThickness="4">
                    <telerik:LineSeries.Resources>
                        <DataTemplate x:Key="lastPointTemplate">
                            <Ellipse
                                Width="32"
                                Height="32"
                                Fill="White"
                                Stroke="#07D19C"
                                StrokeThickness="11" />
                        </DataTemplate>
                    </telerik:LineSeries.Resources>
                </telerik:LineSeries>
            </telerik:RadCartesianChart.Series>
        </telerik:RadCartesianChart>
    </Grid>
</Window>

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Timers;
using System.Windows;
using Telerik.Windows.Controls.ChartView;

namespace Telerik.Question.Charts
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            scriptSeries.CategoryBinding = new PropertyNameDataPointBinding() { PropertyName = "Category" };
            scriptSeries.ValueBinding = new PropertyNameDataPointBinding() { PropertyName = "Value" };
            scriptSeries.ItemsSource = new List<ChartDataObject>()
            {
                new ChartDataObject(2,  4 ),
                new ChartDataObject(2,  4 ),
                new ChartDataObject(2,  8 ),
                new ChartDataObject(4,  8 ),
                new ChartDataObject(4,  4 ),
                new ChartDataObject(6,  4 ),
                new ChartDataObject(6,  8 ),
                new ChartDataObject(9,  8 ),
                new ChartDataObject(9,  10 ),
                new ChartDataObject(11,  10 ),
                new ChartDataObject(11,  4 ),
                new ChartDataObject(12,  4 ),
                new ChartDataObject(12,  18 ),
                new ChartDataObject(14,  18 ),
            };

            var scriptChangesSeriesDataSource = new ObservableCollection<ChartDataObject>();
            scriptChangesSeries.CategoryBinding = new PropertyNameDataPointBinding() { PropertyName = "Category" };
            scriptChangesSeries.ValueBinding = new PropertyNameDataPointBinding() { PropertyName = "Value" };
            scriptChangesSeries.ItemsSource = scriptChangesSeriesDataSource;


            var timer = new Timer
            {
                Interval = 1000
            };
            var i = 0d;
            timer.Elapsed += (e, a) =>
            {
                i += 1;
                scriptChangesSeriesDataSource.Add(new ChartDataObject(i, 5));
            };
            timer.Start();
        }
    }

    public class ChartDataObject
    {
        public ChartDataObject(double category, double value)
        {
            Category = category;
            Value = value;
        }

        public double Category { get; set; }
        public double Value { get; set; }
    }
}

 

What do I need to do to achieve that?

 

Thanks!