sfchart line series and dynamic data binding

Hi,

I want to display data in the line chart. I have some data values like below:

    data = [
        ['Year', 'a', 'b', 'c', 'd'],
        ['2004',  1000,      400, 1 , 2],
        ['2005',  1170,      460, 2, 3],
        ['2006',  660,       1120, 3, 4],
        ['2007',  1030,      540, 5, 5]
        ]

I looked at the example from the the source code example and I understand, that if there are static data, then we can use something like the below, in xaml to bind the data

<chart:SfChart.Series>
                <chart:LineSeries StrokeWidth="3" ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Value" Label="Germany" LegendIcon="Circle" EnableTooltip="true" EnableAnimation="false">
                    <chart:LineSeries.DataMarker>
                        <chart:ChartDataMarker MarkerWidth="12" MarkerHeight="12" ShowLabel="false" ShowMarker="true" MarkerBorderColor="White" MarkerBorderWidth="2" MarkerColor="#00bdae">
                        </chart:ChartDataMarker>
                    </chart:LineSeries.DataMarker>
                </chart:LineSeries>
                <chart:LineSeries StrokeWidth="3" ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Value" LegendIcon="Circle" Label="France" EnableTooltip="true" EnableAnimation="false">
                    <chart:LineSeries.DataMarker>
                        <chart:ChartDataMarker MarkerWidth="12" MarkerHeight="12" ShowLabel="false" ShowMarker="true" MarkerBorderColor="White" MarkerBorderWidth="2" MarkerColor="#404041">
                        </chart:ChartDataMarker>
                    </chart:LineSeries.DataMarker>
                </chart:LineSeries>
            </chart:SfChart.Series>

It will work perfect as we know the number of lines beforehand. However, in my case, the the data and index changes, how do we bind the above data values to a dynamic line series data points.

Thank you for reading this.

1 Reply

MK Muneesh Kumar G Syncfusion Team May 31, 2018 11:58 AM UTC

Hi Tom, 
 
Thanks for using Syncfusion products.  
 
By default, if your ItemsSource implements INotifyCollectionChanged, then the chart will be refreshed automatically if you add, remove, insert and clear the data. Please refer the below code for adding new data point to ItemsSource. 
 
Code snippet [C#]: 
 
  private void Button_Clicked(object sender, EventArgs e) 
        { 
            viewModel.Data.Add(new Model() {Year="2008",Value1=rd.Next(200,600),Value2=rd.Next(300,800) }); 
        } 
 
 
 
But, if you want to update the existing data in collection, you should set the ListenPropertyChange of ChartSeries to true to make the chart listen the updates in your model. In this case, your model should implements the INotifyProperttChanged interface. 
 
Code snippet [XAML]: 
<chart:LineSeries StrokeWidth="3" ItemsSource="{Binding Data}" 
                                      XBindingPath="Year" YBindingPath="Value1" Label="Germany"  
                                      LegendIcon="Circle" EnableTooltip="true" ListenPropertyChange="True" 
                                      EnableAnimation="false"> 
 
Code snippet [C#]: 
 
private void Button_Clicked_1(object sender, EventArgs e) 
        { 
            viewModel.Data[0].Value1 = rd.Next(200, 600); 
        }     
 
 
 
public class Model : INotifyPropertyChanged 
    { 
        private string year; 
 
        public string Year 
        { 
            get { return year; } 
            set { year = value; NotifyPropertyChanged(); } 
        } 
 
.. 
 
 
        public event PropertyChangedEventHandler PropertyChanged; 
 
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "") 
        { 
            if (PropertyChanged != null) 
            { 
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
            } 
        } 
    } 
 
Please refer below user documentation for more details about ListenPropertyChange. 
 
 
We have prepared a sample based on above solution, please find the sample from the following location.  
 
 
Please let us know if you have any queries.  
 
Thanks, 
Muneesh Kumar G. 
 


Loader.
Up arrow icon