Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Chart Highlight Filter

This topic explains, with code examples, how to use the data highlighting feature in the XamCategoryChart control.

Using Highlight Filter with XamCategoryChart

The highlight filter feature in the XamCategoryChart will highlight a subset of data while showing the total set with a reduced opacity in the case of column and area series types, and a dashed line in the case of line series types.

To enable the highlight filter feature in the XamCategoryChart, you need to provide an InitialHighlightFilter to the chart. Generally, in order to do this, you will also need to provide a value to the InitialGroups property of the chart as well, as this will take a member path in your data to group the data by so you can then filter it based on an expression described below.

The InitialHighlightFilter property uses a syntax similar to OData filter syntax in that the filter operator is an abbreviated. For example, if you are trying to apply a filter of "Country not equals USA" this would be "Country ne 'USA'" when setting the property.

The following is a simple example that will filter out the number of sales per month by the UK using the following data source:

In C#

    public class SalesItem
    {
        public double Value { get; set; }
        public string Month { get; set; }
        public string Country { get; set; }

    }

    public class SalesItemData : List<SalesItem>
    {
        Random r = new Random();
        public SalesItemData()
        {
            this.Add(new SalesItem() { Month = "January", Country = "USA", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "January", Country = "Japan", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "January", Country = "UK", Value = r.Next(500, 1000) });

            this.Add(new SalesItem() { Month = "February", Country = "USA", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "February", Country = "Japan", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "February", Country = "UK", Value = r.Next(500, 1000) });

            this.Add(new SalesItem() { Month = "March", Country = "USA", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "March", Country = "Japan", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "March", Country = "UK", Value = r.Next(500, 1000) });

            this.Add(new SalesItem() { Month = "April", Country = "USA", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "April", Country = "Japan", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "April", Country = "UK", Value = r.Next(500, 1000) });

            this.Add(new SalesItem() { Month = "May", Country = "USA", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "May", Country = "Japan", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "May", Country = "UK", Value = r.Next(500, 1000) });

            this.Add(new SalesItem() { Month = "June", Country = "USA", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "June", Country = "Japan", Value = r.Next(500, 1000) });
            this.Add(new SalesItem() { Month = "June", Country = "UK", Value = r.Next(500, 1000) });
        }
    }

In XAML

<ig:XamCategoryChart Name="chart"
                     ItemsSource="{Binding}"
                     InitialGroups="Month"
                     ChartType="Column"
                     InitialHighlightFilter="Country ne 'UK'"
                     HighlightedValuesDisplayMode="Overlay"
                     YAxisMinimumValue="0"/>

In C#:

XamCategoryChart chart = new XamCategoryChart()
{
    ItemsSource = new SalesItemData(),
    InitialGroups = "Month",
    ChartType = CategoryChartType.Column,
    InitialHighlightFilter = "Country ne 'UK'",
    HighlightedValuesDisplayMode = SeriesHighlightedValuesDisplayMode.Overlay,
    YAxisMinimumValue = 0
};

Related Content