Telerik blogs

RadChart allows you to programmatically filter its data using FilterDescriptors as demonstrated in our help topic. However there are scenarios where you would like to have more complex filtering. For a sample scenario where a Chart is drawn according to the filtered RadGridView’s data - read further.
The Chart and the GridView will be populated with the same data source – List of Business Objects:

  1. public class MyDateObject
  2.   {
  3.       public double SampleValue { get; set; }
  4.       public DateTime Date { get; set; }
  5.   }
  6.  
  7.   public class MyDataContext
  8.   {
  9.       public const int min = 20;
  10.       public const int max = 80;
  11.       public ObservableCollection<MyDateObject> List { get; set; }
  12.       Random r = new Random();
  13.       DateTime baseDate = DateTime.Today;
  14.  
  15.       public MyDataContext()
  16.       {
  17.           this.CreateChartData();
  18.       }
  19.  
  20.       private void CreateChartData()
  21.       {
  22.           List = new ObservableCollection<MyDateObject>();
  23.           for (int i = 0; i < 15; i++)
  24.           {
  25.               List.Add(new MyDateObject() { SampleValue = r.Next(min, max), Date = baseDate.AddDays(i) });
  26.           }
  27.       }
  28.   }

The binding is done in XAML. The Chart is bound via SeriesMappings which you can find described in our online documentation – DataBinding with Manual Series Mappings.
As for the GridView – several properties (relating grouping, selecting and sorting) are turned off for simplicity.

By handling the Filtered event of the GridView, you may set the GridView filter descriptors directly to the chart using the IFilterDescriptor interface:

  1. private void GridView1_Filtered(object sender, Telerik.Windows.Controls.GridView.GridViewFilteredEventArgs e)
  2.       {
  3.           this.RadChart1.FilterDescriptors.Clear();
  4.  
  5.           foreach (IFilterDescriptor descriptor in this.GridView1.FilterDescriptors)
  6.           {
  7.               this.RadChart1.FilterDescriptors.Add(descriptor);
  8.           }
  9.       }

As an alternative you may create a ComplexFilterDescriptor manually.

  1.   CompositeFilterDescriptor chartFilterDescriptorCol = new CompositeFilterDescriptor();
  2. private void GridView1_Filtered(object sender, Telerik.Windows.Controls.GridView.GridViewFilteredEventArgs e)
  3.        {
  4.            if (e.Added.Count() > 0)
  5.            {
  6.                foreach (FilterDescriptor filter in e.Added)
  7.                {
  8.                    FilterDescriptor gridFilterDescriptor = filter;
  9.  
  10.                    chartFilterDescriptorCol.FilterDescriptors.Add(gridFilterDescriptor);
  11.                    chartFilterDescriptorCol.LogicalOperator = FilterCompositionLogicalOperator.Or;
  12.                }
  13.            }
  14.                this.RadChart1.FilterDescriptors.Add(chartFilterDescriptorCol);                
  15.        }

The pictures below show the sample in action:

1. The Chart and the GridView on initial load:

Loaded

2. Filtering the SampleValue column:

Filtering

3. The result:

Filtered

You may download the full source code from here!


Evgenia-Milcheva
About the Author

Evgenia Milcheva

Front-End Developer
Telerik XAML Team

Comments

Comments are disabled in preview mode.