We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Mvvm surface chart implementation not working.

Hello,

I've attached the modified demo project for the SfSurfaceChart to illustrate my issue. Basically when setting the data after the chart control is loaded, the Plot is not updated. If I move the SetData() method into the constructor of the viewmodel, everything displays as expected. Am I missing something here?

Best,
Daniel

<Window x:Class="SurfaceChartDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
        xmlns:local="clr-namespace:SurfaceChartDemo"
      
        WindowStartupLocation="CenterScreen" ResizeMode="CanResizeWithGrip"
      
       DataContext="{Binding Main, Source={StaticResource Locator}}"
        Title="Surface Chart">
    
   
        <Grid>
            
            <Grid.Resources>
                <DataTemplate x:Key="LabelTemplate">
                    <TextBlock Text="{Binding LabelContent}"  FontWeight="SemiBold" />
                </DataTemplate>
                
                <DataTemplate x:Key="HeaderTemplate">
                    <TextBlock Text="{Binding}" FontSize="14" FontWeight="Bold" />
                </DataTemplate>
            </Grid.Resources>
            
         <Syncfusion:SfSurfaceChart   Rotate="30" Tilt="20"
                                      Type="Surface" 
                                     EnableRotation="True" ItemsSource="{Binding Points}" RowSize="{Binding RowSize}" ColumnSize="{Binding ColumnSize}"
                                     XBindingPath="X" YBindingPath="Y" ZBindingPath="Z">
               
               
                <Syncfusion:SfSurfaceChart.XAxis>
                    <Syncfusion:SurfaceAxis HeaderTemplate="{StaticResource HeaderTemplate}" 
                                            LabelTemplate="{StaticResource LabelTemplate}"  
                                            Header="X-Axis" />
                </Syncfusion:SfSurfaceChart.XAxis>
                <Syncfusion:SfSurfaceChart.YAxis>
                    <Syncfusion:SurfaceAxis  HeaderTemplate="{StaticResource HeaderTemplate}"  
                                            LabelTemplate="{StaticResource LabelTemplate}" x:Name="Axis" 
                                            Header="Y-Axis" LabelFormat="0.0"/>
                </Syncfusion:SfSurfaceChart.YAxis>
                <Syncfusion:SfSurfaceChart.ZAxis>
                    <Syncfusion:SurfaceAxis HeaderTemplate="{StaticResource HeaderTemplate}" 
                                            LabelTemplate="{StaticResource LabelTemplate}"  
                                            Header="Z-Axis" />
                </Syncfusion:SfSurfaceChart.ZAxis>
             <Syncfusion:SfSurfaceChart.ColorBar>
                 <Syncfusion:ChartColorBar  DockPosition="Right"/>
             </Syncfusion:SfSurfaceChart.ColorBar>
            </Syncfusion:SfSurfaceChart>

        <Button Height="20" Width="100" HorizontalAlignment="Right" Content="Set Data" VerticalAlignment="Bottom" Command="{Binding ShowGraphCommand}"></Button>
        </Grid>
    
    
   
    
</Window>

using GalaSoft.MvvmLight;
using System.Collections.ObjectModel;
using GalaSoft.MvvmLight.Threading;
using Prism.Commands;

namespace AreaSeriesDemo.ViewModel
{
    public class Data
    {
        public double X { get; set; }
        public double Y { get; set; }
        public double Z { get; set; }
    }

    /// <summary>
    /// This class contains properties that the main View can data bind to.
    /// <para>
    /// Use the <strong>mvvminpc</strong> snippet to add bindable properties to this ViewModel.
    /// </para>
    /// <para>
    /// You can also use Blend to data bind with the tool's support.
    /// </para>
    /// <para>
    /// See http://www.galasoft.ch/mvvm
    /// </para>
    /// </summary>
    public class MainViewModel : ViewModelBase
    {
        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel()
        {
            ////if (IsInDesignMode)
            ////{
            ////    // Code runs in Blend --> create design time data.
            ////}
            ////else
            ////{
            ////    // Code runs "for real"
            ////}
            ///
            ///
            /// Works if called here.
            //SetData();
        }




        private int _rowSize;
        private int _columnSize;
        private ObservableCollection<Data> _points;

        public int RowSize
        {
            get => _rowSize;
            set
            {
                _rowSize = value;
                RaisePropertyChanged(nameof(RowSize));
            }
        }

        public int ColumnSize
        {
            get => _columnSize;
            set
            {
                _columnSize = value;
                RaisePropertyChanged(nameof(ColumnSize));
            }
        }

        public ObservableCollection<Data> Points
        {
            get => _points;
            set
            {
                _points = value;
                RaisePropertyChanged(nameof(Points));
            }
        }


        private void SetData()
        {
            Points = new ObservableCollection<Data>();
            double inc = 8.0 / 35;
            int i = 0;
            for (double x = -4; x < 4; x += inc, i++)
            {
                int j = 0;
                for (double z = -4; z < 4; z += inc, j++)
                {
                    double y = 2 * (x * x) + 2 * (z * z) - 4;
                    Points.Add(new Data() {X = x, Y = y, Z = z});
                }
            }

            RowSize = 35;
            ColumnSize = 35;
        }

        private DelegateCommand _showGraphCommand;
        public DelegateCommand ShowGraphCommand =>
            _showGraphCommand ?? (_showGraphCommand = new DelegateCommand(ExecuteShowGraphCommand));

        public void ExecuteShowGraphCommand()
        {
           SetData();
            
        }
    }
}







Attachment: CS_7a746f06.zip

1 Reply

MK Muneesh Kumar G Syncfusion Team May 22, 2019 08:47 AM UTC

Hi Daniel, 
 
Greetings from Syncfusion. We have analyzed your query and we would like to inform you that we didn’t provide CollectionChanged support for ItemsSource property of SfSurfaceChart. So that the points not updated in the chart when adding the points to the collection. 
 
We have modified the sample to resolve this problem. Please find the sample from the following location. 
 
 
Code Snippet 
         
        private void SetData() 
        { 
            RowSize = 35; 
            ColumnSize = 35; 
            Points = new ObservableCollection<Data>(); 
            double inc = 8.0 / 35; 
            int i = 0; 
            var tempPoints = new ObservableCollection<Data>(); 
            for (double x = -4; x < 4; x += inc, i++) 
            { 
                int j = 0; 
                for (double z = -4; z < 4; z += inc, j++) 
                { 
                    double y = 2 * (x * x) + 2 * (z * z) - 4; 
                 tempPoints.Add(new Data() { X = x, Y = y, Z = z }); 
                    //Points.Add(new Data() {X = x, Y = y, Z = z}); 
                } 
            } 
 
            Points = tempPoints;             
        } 
 
 
Hope it helps you.  
 
Thanks, 
Muneesh Kumar G    


Loader.
Live Chat Icon For mobile
Up arrow icon