How to bind telerik:ScatterLineSeries to ObservableCollection?

7 posts, 1 answers
  1. Eugene
    Eugene avatar
    83 posts
    Member since:
    Jan 2016

    Posted 26 Feb Link to this post

    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.

     

  2. Eugene
    Eugene avatar
    83 posts
    Member since:
    Jan 2016

    Posted 26 Feb in reply to Eugene Link to this post

    Why is series not displayed?
  3. UI for WPF is Visual Studio 2017 Ready
  4. Answer
    Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 26 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Eugene
    Eugene avatar
    83 posts
    Member since:
    Jan 2016

    Posted 26 Feb in reply to Petar Marchev Link to this post

    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.
  6. Eugene
    Eugene avatar
    83 posts
    Member since:
    Jan 2016

    Posted 28 Feb in reply to Eugene Link to this post

    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?
  7. Eugene
    Eugene avatar
    83 posts
    Member since:
    Jan 2016

    Posted 29 Feb in reply to Eugene Link to this post

    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>
  8. Eugene
    Eugene avatar
    83 posts
    Member since:
    Jan 2016

    Posted 29 Feb in reply to Eugene Link to this post

    So the question was closed.
Back to Top
UI for WPF is Visual Studio 2017 Ready