Binding FlexChart to a sereis collection

Binding FlexChart to a sereis collection

Posted by: lpedersen on 12 September 2023, 7:01 pm EST

• 

  lpedersen

  • Post Options:
  • Link
    Copy

  Posted 12 September 2023, 7:01 pm EST

  I want to bind FlexChart to a series collection in my viewmodel, not define them in markup or in codebehind. Is this possible?

• 

  aastha.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 September 2023, 5:59 pm EST

  Hi Lars,

  As per our understanding you want to bind your FlexChart control to the series collection defined in the view model of the project.

  We have created a view model containing two series collection with Point type data. Here is the code snippet for the same:

  public class ChartViewModel
  {
      public ObservableCollection<Point> Series1Data { get; }
      public ObservableCollection<Point> Series2Data { get; }
      public ChartViewModel()
      {
          Series1Data = new ObservableCollection<Point>
          {
              new Point { X = 1, Y = 10 },
              new Point { X = 2, Y = 20 },
              new Point { X = 3, Y = 25 },
              // Add more data points for Series 1
          };
          Series2Data = new ObservableCollection<Point>
          {
              new Point { X = 1, Y = 15 },
              new Point { X = 4, Y = 18 },
              new Point { X = 7, Y = 30 },
              // Add more data points for Series 2
          };
      }
  }
  

  Now, you can bind these collections to your FlexChart control in the View (XAML code) as shown below:

  <Window.DataContext>
      <local:ChartViewModel/>
  </Window.DataContext>
  <Grid>
      <c1:FlexChart Name="flexchart" ChartType="LineSymbols" BindingX="X">
          <c1:FlexChart.Series>
              <c1:Series SeriesName="Series A" Binding="Y" ItemsSource="{Binding Series1Data}"/>
              <c1:Series SeriesName="Series B" Binding="Y" ItemsSource="{Binding Series2Data}"/>
          </c1:FlexChart.Series>
      </c1:FlexChart>
  </Grid>

  Kindly refer to the attached sample for implementation. (See FlexchartMVVM.zip)

  Please let us know if you need any further help regarding this.

  Thanks & Regards,
  
  Aastha

• 

  lpedersen

  • Post Options:
  • Link
    Copy

  Posted 13 September 2023, 6:27 pm EST

  Thank you for the answer, however what I’m after is a collection of series, like:

  public ObservableCollection<List<Point>> SeriesCollection { get; }

• 

  aastha.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 14 September 2023, 5:09 pm EST

  Hi Lars,

  Thanks for providing a more detailed information of your use-case.

  If you have a collection of Series in your View-Model then you can create series by handling FlexChart’s Loaded event as shown in the following code-snippet via code-behind:

  private void flexchart_Loaded(object sender, RoutedEventArgs e)
  {
      if (DataContext is ChartViewModel viewModel)
      {
          // Add series to the FlexChart control
          foreach (var seriesData in viewModel.SeriesCollection)
          {
              var series = new Series()
              {
                  ItemsSource = seriesData,
                  Binding = "Y",
                  BindingX = "X"
              };
              flexchart.Series.Add(series);
          }
      }
  }
  

  Kindly refer to the attached sample for full implementation. (See FlexchartMVVM_Mod.zip)

  Thanks & Regards,
  
  Aastha