How to bind telerik:ScatterLineSeries to ObservableCollection?

[Eugene]

Hi! I develop Prism 6 WPF MVVM application. I defined an ObservableCollection instance in Model, please see below:

public class DeviceStatusModel
    {
        #region Constructors
        public DeviceStatusModel()
        {
            SeriesData = new ObservableCollection<short>();
            SeriesData.Add(20);
            SeriesData.Add(30);
            SeriesData.Add(50);
            SeriesData.Add(10);
            SeriesData.Add(60);
            SeriesData.Add(40);
            SeriesData.Add(20);
            SeriesData.Add(80);
        }
        #endregion

        #region Properties
        public ObservableCollection<short> SeriesData { get; set; }
        #endregion
    }

Then in ViewModel I defined the property of type of DeviceStatusModel. Please see below:

    public class DeviceStatusViewModel : BindableBase
    {
        #region Fields

        private DeviceStatusModel _deviceStatusModel;

        #endregion

        #region Constructors

        public DeviceStatusViewModel()
        {
            this.DeviceStatusModel = new DeviceStatusModel();
        }

        #endregion

        #region Properties

        public DeviceStatusModel DeviceStatusModel
        {
            get { return this._deviceStatusModel; }
            set { this.SetProperty(ref this._deviceStatusModel, value); }
        }

        #endregion
    }

Then in View I wrote the next XAML, please see below:

<UserControl x:Class="DeviceStatus.Views.DeviceStatusView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"             
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"             
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <telerik:RadCartesianChart Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Margin="6,7,0,0" VerticalAlignment="Top">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:ScatterLineSeries ItemsSource="{Binding DeviceStatusModel.SeriesData}"/>
        </telerik:RadCartesianChart>

    </Grid>
</UserControl>

And eventually when aplication runs I see only next poor picture, please see "ChartViewScreenShot.PNG" file attached.

 

[Eugene]

Why is series not displayed?

[Petar Marchev]

Hello Eugene,

We do not see if you have set the XValueBinding and YValueBinding properties of the series. Without these the series does not know how to map the horizontal and vertical values.

creating data bound chart

Regards,
Petar Marchev
Telerik

[Eugene]

I was guided by 'Create Data-Bound Chart' example but there is no an explicit reference to how to use XValueBinding and YValueBinding properties. I'll be really grateful to you if you (in XAML) show me how I should use these properties (which value to assign to each of them) in my case especially.

[Eugene]

Guys, I bag you pardon for my poor English. I havn't used XValueBinding and YValueBinding properties of telerik:ScatterLineSeries of telerik:RadCartesianChart of telerik:ChartView. So I beg your help in using of those properties. Please give me an example of the following: which value I should assign to XValueBinding and YValueBinding in my case?

[Eugene]

I solved the problem in the following manner. In DeviceStatusModelClass I wrote:

public class DeviceStatusModel
    {
        #region Constructors
        public DeviceStatusModel()
        {

            // Drow damped sinusoid.
            double[] tmpArr = { 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 };
            SeriesData = new ObservableCollection<Tuple<int, double>>();
            for (int i = 0; i < tmpArr.Length; i++)
            {
                double res = tmpArr[i] * Math.Exp(-i) * Math.Sin(2 * Math.PI * i);
                SeriesData.Add(new Tuple<int, double>(i, res));
            }
        }
        #endregion

        #region Properties
        public ObservableCollection<Tuple<int, double>> SeriesData { get; }
        #endregion
    }
}

DeviceStatusViewModel class remains the same so that I don't show it again.

And XAML of the DeviceStatusView view is the folowing now:

<UserControl x:Class="DeviceStatus.Views.DeviceStatusView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"             
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"             
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <telerik:RadCartesianChart Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" Margin="6,7,0,0" VerticalAlignment="Stretch" Grid.ColumnSpan="2">
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:ScatterLineSeries ItemsSource="{Binding DeviceStatusModel.SeriesData}" XValueBinding="Item1" YValueBinding="Item2"/>
        </telerik:RadCartesianChart>

    </Grid>
</UserControl>

[Eugene]

So the question was closed.