CODEWITHSUNDEEP
c#data-bindinguwpsyncfusion
Ziad Akiki
Ziad Akiki

Reputation: 2680

Binding a List of object to a Chart control

I am using the SyncFusion UWP library to build an interface with a Chart inside. I followed the Getting Started example but I can't get it to work. The following code contains some modifications I did to accommodate with my application needs.

Model

public class Voltage
{
    public DateTime Timestamp;
    public double Value;
}

ViewModel I added the notify property changed

public class VoltageViewModel : INotifyPropertyChanged
{
    public List<Voltage> Data { get; set; }

    public VoltageViewModel()
    {
        Data = new List<Voltage>()
        {
            new Voltage() { Timestamp = DateTime.Now.AddMinutes(-1), Value = 5.1 },
            new Voltage() { Timestamp = DateTime.Now.AddMinutes(-2), Value = 4.9 },
            new Voltage() { Timestamp = DateTime.Now.AddMinutes(-3), Value = 4.85 },
            new Voltage() { Timestamp = DateTime.Now.AddMinutes(-4), Value = 5.01 }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        // Raise the PropertyChanged event, passing the name of the property whose value has changed.
        this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

XAML

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ADSO.ViewModel"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Charts"
x:Class="ADSO.MainPage"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Page.DataContext>
    <local:VoltageViewModel/>
</Page.DataContext>

<Grid>
    <syncfusion:SfChart HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,20,20,20">
        <syncfusion:SfChart.PrimaryAxis>
            <syncfusion:DateTimeAxis Header="Time" Interval="10" IntervalType="Minutes" Minimum="9/22/2018" Maximum="9/23/2018"/>
        </syncfusion:SfChart.PrimaryAxis>
        <syncfusion:SfChart.SecondaryAxis>
            <syncfusion:NumericalAxis Header="Voltage (V)"/>
        </syncfusion:SfChart.SecondaryAxis>
        <syncfusion:LineSeries ItemsSource="{Binding Path=Data}" XBindingPath="Timestamp" YBindingPath="Value" >
        </syncfusion:LineSeries>
    </syncfusion:SfChart>
</Grid>

I don't think it's a problem with SyncFusion, and I can confirm that the chart draws successfully but with no data on it. It is a problem with my own implementation but I can't figure out the problem.

Upvotes: 0

Views: 405

Answers (1)

Fadi El Khoury
Fadi El Khoury

Reputation: 26

Just implement INotifyPropertyChanged on the Model instead of the ViewModel. And make sure that Timestamp and Value are declared as Properties.

Model

public class Voltage : INotifyPropertyChanged
{
    public DateTime Timestamp { get; set; }
    public double Value { get; set; }


    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        // Raise the PropertyChanged event, passing the name of the property whose value has changed.
        this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

View Model

public class VoltageViewModel
{
      public List<Voltage> Data { get; set; }

      public VoltageViewModel()
      {
          Data = new List<Voltage>()
          {
              new Voltage() { Timestamp = DateTime.Now.AddMinutes(-1), Value = 5.1 },
              new Voltage() { Timestamp = DateTime.Now.AddMinutes(-2), Value = 4.9 },
              new Voltage() { Timestamp = DateTime.Now.AddMinutes(-3), Value = 4.85 },
              new Voltage() { Timestamp = DateTime.Now.AddMinutes(-4), Value = 5.01 }
          };
      }

 }

Upvotes: 1

Related Questions