Sorting & Filtering in FlexChart

Like all Wijmo controls, the chart delegates all data-related tasks to the CollectionView class, so if you want to filter, sort, or group the data, you can do it using the CollectionView. It may be useful to think of the FlexChart as a special type of data grid, where columns are represented by series and rows are data points on the chart.

When you set the chart's itemsSource property to an array, or ObservableArray, the chart automatically creates a CollectionView instance to wrap the original array. This CollectionView is exposed by the collectionView property in case you want to access it.

Sorting Example

Sort the data by changing the sortDescriptions property of the chart's collectionView.

import * as wijmo from '@grapecity/wijmo';
import * as chart from '@grapecity/wijmo.chart';

var myChart = new chart.FlexChart('#myChart');
var sd = myChart.collectionView.sortDescriptions;
sd.clear(); // to reset any pre-existing sort
// sort by sales
sd.push(new wijmo.SortDescription('sales', true));

The second parameter for the SortDescription constructor is a boolean value that determines if the data is sorted in ascending order (false = descending).

Filtering Example

Filtering the chart is implemented using the CollectionView's filter property. The filter property accepts a function that provides the logical condition that determines which data points are included and excluded from the filter. The function should return true if the data point (item) meets the condition and remain in the filtered data set. Return false for the items that you want removed from the filter.

// apply filter to include only data for country China
myChart.collectionView.filter = function(item) {
    if(item.country == 'China'){
        return true; // filter in
    }
    else
    {
        return false; // filter out
    }
}