Binding FlexChart to Flexgrid

Binding FlexChart to Flexgrid

Posted by: dennis.anderson on 7 December 2021, 4:32 pm EST

• 

  dennis.anderson

  • Post Options:
  • Link
    Copy

  Posted 7 December 2021, 4:32 pm EST

  I would like to bind a series in a WPF flexchart to unbound WPF flexgrid columns for the X and Y values. Is this possible, if so, how? Thanks.

• 

  kartik.sagar

  

  • Post Options:
  • Link
    Copy

  Posted 8 December 2021, 12:10 am EST

  Hi Dennis,

  You can display FlexChart Series’s X/Y values in an unbound FlexGrid as follows:

  
  var series = flexChart.Series[0];
  var xValues = series.GetValues(1); // gets series x values
  var yValues = series.GetValues(0); // gets series y values
  
  flexGrid.Columns.Add(new C1.WPF.FlexGrid.Column() { Header = "X" });
  flexGrid.Columns.Add(new C1.WPF.FlexGrid.Column() { Header = "Y" });
  
  for (int i = 0; i < xValues.Length; i++)
  {
               flexGrid.Rows.Add(new C1.WPF.FlexGrid.Row());
               flexGrid[i, 0] = xValues[i];
               flexGrid[i, 1] = yValues[i];
   }
  
  

  Please refer to the same from the attached sample. (see FlexChartGrid.zip)

  Best Regards,
  
  Kartik

  FlexChartGrid.zip

• 

  dennis.anderson

  • Post Options:
  • Link
    Copy

  Posted 8 December 2021, 12:34 am EST

  I think I was unclear. I want to do the reverse. I want to take the data that I type or populate programmatically in a FlexGrid and have it automatically displayed on a corresponding FlexChart. The action would be similar to how an Excel chart updates when you change values in the Sheet. I just don’t know how to set up the DataContext/ItemsSource in FlexChart and the BindingX and Binding to the appropriate FlexGrid columns to complete defining the Series in FlexChart. Thanks.

• 

  kartik.sagar

  

  • Post Options:
  • Link
    Copy

  Posted 8 December 2021, 12:55 am EST

  Hi Dennis,

  You can use a common ObservableCollection as FlexGrid and FlexChart ItemsSource so that whenever a new item is added/removed it gets reflected in the chart.

  
   _data = new ObservableCollection<DataItem>();
  flexChart.ItemsSource = flexGrid.ItemsSource = _data;
  
  

  And then you can simply bind the DataItem’s X/Y properties with FlexChart as follows:

  
  flexChart.BindingX = "X";
  flexChart.Series.Add(new C1.WPF.Chart.Series()
  {
          Binding = "Y"
  });
  
  

  Additionally, if you also want to update FlexChart when x/y values are updated then you can implement INotifyPropertyChanged interface on your data item.

  Please refer to the attached modified sample for full implementation. (see FlexChartGrid_Mod.zip)

  Best Regards,
  
  Kartik

  FlexChartGrid_Mod.zip

• 

  dennis.anderson

  • Post Options:
  • Link
    Copy

  Posted 11 December 2021, 10:00 pm EST

  Thanks, Kartik.
  
  I did this approach originally by binding to a System.Data.DataTable as DataView. It worked okay if I added values to the Flexgrid manually. However, if I made changes to the FlexGrid programmatically, the underlying DataTable would seemingly get corrupted and the FlexChart would not display the data as shown in FlexGrid. Hence, my question about binding FlexChart series to an unbound FlexGrid. I know I can manipulate the unbound FlexGrid programmatically as well as manually.
  
  Best regards,
  
  Dennis

• 

  dennis.anderson

  • Post Options:
  • Link
    Copy

  Posted 13 December 2021, 3:08 pm EST

  Thanks, Kartik. I’ll work with this scheme and see where I can go with it.
  
  Best regards,
  
  Dennis

• 

  kartik.sagar

  

  • Post Options:
  • Link
    Copy

  Posted 20 December 2021, 2:33 am EST

  Hi Dennis,

  JFYI, there is no concept of data item in an unbound FlexGrid and FlexChart’s Series will only work with the collection of data items. So, in order to overcome this behavior I have created a bridge to make the Series sync with FlexGrid’s unbound data.

  
  public interface IBridge
  {
          void Connect(string xProperty, string yProperty);
          void Disconnect();
          void Add(double x, double y);
          void Remove(int index);
          void Update(int row, int column, double value);
  }
  
  

  JFYR, the bridge basically re-renders the chart when the cell is edited/updated and it internally manages an observable collection for series ItemsSource.

  Please refer to the attached sample for full implementation. (see FlexGridChartUnbound.zip)

  Best Regards,
  
  Kartik

  FlexGridChartUnbound.zip