Area Line

Area Line is a two-group visualization that allows to see the behaviour of a given field over time for a given metric.

Creating a Area Line

The Area Line visualization requires at least one metric and two fields. The first one is an attribute field, the second one, a time field.

let grid = cf.Grid().left(65).right(15).bottom(65).top(10);
let metric = cf.Metric("gdp","sum");
let group1 = cf.Attribute("country")
            .limit(10)
            .sort("desc",metric0);
let group2 = cf.Attribute("year")
            .limit(1000)
            .func("YEAR")
            .sort("asc","year");

cf.provider("Elasticsearch");
    .source('global_stats');
    .groupby(group1,group2)
    .metrics(metric);
    .graph("Area Line")
    .element('chart')
    .set("grid", grid)
    .element('trend-div')
    .execute();

The previous code will render the Area Line Chart below:

Special filtering behaviour

The Area Line visualization has some specificities when it comes to filters. Since it uses two groups, the first group (the attribute) will always be recognized as a filter, but the second one (the time field) will be recognized as a client filter ONLY IF it represents a single time unit, for example a year, a month, a day... etc AND it was not previously applied as a non-client filter, otherwise it will act as a normal filter.

The best way to check this is by clicking a point of any of the lines. It will apply a filter like the following:

As we can see in the picture above, all areas except for the one representing United Stated where removed (filtered) however the full area of time is still there providing, in this way, a better visualization event though the is (client) filtered by the year 1976.

If we then expand the range, it won't be a single year anymore and the filter representing the time will start behaving as a normal filter:

However if we select again one point or apply a time filter representing on unit, it will be respected as a normal filter instead of being applied as a client filter:

Note

This filtering behavior also applies to the Trend visualization.