Skip to content

Multigroup Trend

Multigroup Trend is a spatial visualization, useful when you want compare a metric over time where each line is defined by the combination of values of multiple attributes. Use the standard Trend chart when you just need to group by time and a single attribute.

Creating a Multigroup Trend

In addition to a time field, you need to specify one or more related attributes. Remember, if you only have one attribute in addition to the time field, you can use the standard Trend chart.

This chart includes safeguards to avoid drawing a large number of lines for the combiation of values of the attributes selected. They are the seriesLimit and the timeUnitsLimit options. The chart will not render if these limits are exceeded. Refer to the Options section to see how to configure these limits.

The use case for this chart is to have slicers start with at least one selection to filter and allow users to add more for comparison.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Define the metrics to be used
let metrics = [];
let metric = cf.Metric('life_expectancy', 'avg');
// const countMetric = cf.Metric('count');

let legend = cf.Legend()
    .position('right')
    .width(200);

metrics.push(metric);
// metrics.push(countMetric);

let filter1 = cf.Filter('region')
    .label('Region')
    .operation('IN')
    .value(['Europe']);
let filter2 = cf.Filter('year')
    .label('Year')
    .operation('BETWEEN')
    .value(['1880-01-01 00:00:00.000', '1957-12-31 23:59:59.000']);

let myChart = cf.provider('Elasticsearch')
    .source('life_expectancy_region')
    .rows(cf.Row('year').sort('asc'),
        'region',
        'country'
    )
    .filters(filter1, filter2)
    .metrics(...metrics)
    .graph('Multigroup Trend')
    .set('legend', legend)
    .element('chart')
    .execute()

Note

It is mandatory that the first row be of the type datetime, and sort is only allowed in the datetime row.

The previous code will render the Trend Chart below:

MAT

Options

Show metric function

1
myChart.set('showMetricFunc', true);

Change series limit

1
myChart.set('seriesLimit', 100);  // default is 40

Change time limit

1
myChart.set('timeUnitsLimit', 300); // default is 200