Multimetric Trend

The Multimetric Trend as it names indicates, allows to trend multiple metrics over time. It requires one field of type TIME and at least one metric, but it's true usability comes when displaying several:

let grid = cf.Grid().left(65).right(15).bottom(65).top(10);
let metrics = [
    cf.Metric("commission","sum"),
    cf.Metric("qtysold","sum"),
    cf.Metric("pricepaid","sum")
];
let group = cf.Attribute("saletime")
            .limit(100)
            .func("DAY")
            .sort("asc","saletime");

cf.provider("Elasticsearch");
    .source('ticket_sales');
    .groupby(group)
    .metrics(...metrics);
    .graph("Multimetric Trend")
    .set("grid", grid)
    .element('multi-trend-div')
    .execute();

The previous code will render the Trend Chart below:

All filters over the Multimetric Trend are always applied as normal filters.

Dual Y-Axis support

The Multimetric Trend supports a dual y-axis which is useful when the metrics have different scales. To illustrate, the example below uses only one y-axis to visualize both qtysold and pricepaid metrics. Note that the qtysold line is flat at the bottom of the chart because the sum of its values are way smaller compared to the sum of pricepaid for each month.

To select the metric y-axis, you need to set the position property of cf.Metric object to left or right. See the example below where we set the qtysold metric to use the right y-axis:

let provider = cf.provider("test provider");
let source = provider.source("ticket_sales");

// Define metrics
let metrics = [
    cf.Metric("qtysold", "sum").position("right"), // Set the position to right
    cf.Metric("pricepaid", "sum")
];
// Define attributes to group by
let group1 = cf.Attribute("saletime")
    .limit(1000).func("MONTH")
    .sort("asc", "saletime");

// Add metrics and groups to data source
let myData = source.groupby(group1)
    .metrics(...metrics);

With this configuration, the left y-axis shows the pricepaid metric scale and the right y-axis shows the qtysold metric scale. The image below shows the Multimetric Trend with the configured dual y-axis:

Configuring axis options for dual Y-Axis

When the dual y-axis is enabled, the axis settings should be an array of objects where the first object is the left axis and the second object is the right axis. The configuration options are the same as the ones specified in the Axis Options page. The following example illustrates how to set the scale label rotation for the left and right axis:

.set("yAxis", [
    { "rotate": "45" },
    { "rotate": "-45" }
])