Grouping & Drill-down 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. By default, FlexChart only works with tabular data. 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. So if you want to group the data, it should be grouped prior to populating FlexChart.

Using the CollectionView to Group

Use the CollectionView.groupDescriptions property to specify which fields should be grouped.

import * as wijmo from '@mescius/wijmo';

// create a CollectionView containing data grouped by 
// country, product, color, and type
var view = new wijmo.CollectionView(getData(), {
    groupDescriptions: 'country,product,color,type'.split(',')
  });

To use grouped data with FlexChart, include a method in your code that returns the data that belongs to the specified group.

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

// create the chart
  var myChart = new chart.FlexChart('#myChart', {
    itemsSource: getGroupData(view), // show first-level grouping
    bindingX: 'name',
    series: [{
      binding: 'sales',
      name: 'Sales'
    }]
  });

In this example, the getGroupData method returns an object array with name and sales fields that are then plotted on the chart.

// get the group data for a selected point
  function getGroupData(group) {

    // get items for this group, aggregate by sales
    var arr = [];
    group.groups.forEach(function(g) {
      arr.push({
        name: g.name,
        sales: g.getAggregate('Sum', 'sales'),
        group: g
      });
    });

    // return a new collection view sorted by sales
    return new wijmo.CollectionView(arr, {
      sortDescriptions: [
        new wijmo.SortDescription('sales', false)
      ]
    });
  }

Drill-down Scenario

A common grouping scenario with a chart is to initially display data points that have been grouped into categories that when clicked upon, reload the chart with the individual data points that make up the group.

To handle the interactive clicking you could use the hitTest or selectionChanged event. This example uses the selected item to get the grouped data and sets it as a new itemsSource for the FlexChart.

myChart.selectionMode = 'Point'; // enable selection
myChart.selectionChanged = function(s, e) {
      if (s.selection) {
        var point = s.selection.collectionView.currentItem;
        if (point && point.group && !point.group.isBottomLevel) {
          myChart.itemsSource = getGroupData(group);
        }
      }
    }

You can see a full working grouping & drill-down sample in the FlexChart demos.

Date Aggregate Series

The AggregateSeries class is included into AggregateDateSeries sample. It's a custom series to simplify grouping and data aggregation when using Date objects.

For example, the aggregate series can be added to FlexChart like any series. Set the groupAggregate and groupInterval properties to determine how the data will be aggregated and by which interval.

import * as chart from '@mescius/wijmo.chart';
import { AggregateSeries } from './aggregate-series';

var myChart = new chart.FlexChart('#myChart');
myChart.beginUpdate();
myChart.itemsSource = getAppData();

// create aggregate data series summed by Year
var series = new AggregateSeries();
series.name = 'Sales';
series.binding = 'sales';
series.bindingX = 'date';
series.groupAggregate = 'Sum';
series.groupInterval = 'YYYY';
myChart.series.push(series);
myChart.endUpdate();

The groupAggregate property supports Sum, Avg (average), Cnt (count), Max, Min, Rng (range), Std (standard deviation), StdPop (standard deviation population), Var (variance), and VarPop (variance population).

The groupInterval property supports DD (day), WW (week), MM (month), and YYYY (year).

FlexChart can also create the intervals automatically by setting autoInterval to true and providing the desired intervals to include.

series.autoGroupIntervals = ["DD", "WW", "MM", "YYYY"];
series.autoInterval = true;