Visualize timeseries data with customizable aggregation periods

C3 AI Platform offers out of the box UI components to visualize and explore timeseries data. These UI components are highly configurable, and this document explains how you can configure them to be able to aggregate and visualize timeseries data at an aggregation period of your choice.

1. period – Defines the aggregation interval (e.g., weekly, monthly).
2. aggregationFunction – Specifies the aggregation method (e.g., SUM, AVG).

Copy link to this section

Examples:

• emr.toPeriod("2W@5", "SUM") aggregates data bi-weekly, starting on Friday.
• emr.toPeriod("Q@1", {"metric1": "SUM", "metric2": "AVG"}) aggregates data quarterly, starting in January, where metric1 uses the SUM function and metric2 uses the AVG function.

Copy link to this section

Using .toPeriod in the UI

When configuring charts in the UI, the period and aggregationFunction parameters are defined in a JSON configuration and passed to the .toPeriod API.

Note: The period parameter can be either a Period instance or its string-serialized equivalent.

Copy link to this section

Example usage

Here’s a sample configuration for a UiSdlTimeseriesLineBarChart:

"dataSpec" : {
  "type": "UiSdlTimeseriesLineBarChartDataSpec",
  "dataType" : "MyEvalMetricType",
  "yAxisFields" : [ {
    "entityId" : "myEntityId",
    "metricName" : "myMetric",
    "period": "1w@1", // Weekly aggregation starting on Monday
    "periodAggregationStrategy": "AVG" // Average aggregation
  } ]
}

Copy link to this section

Defining periods

You can define a Period instance, or a string serialized period by verifying through Period#toString. For example, period aggregation by week, and starts from Sunday will have syntax like this:

Period.make({
    unit: "WEEK",
    offset: 7,
    count: 1
})

Or

Period.make({
    unit: "WEEK",
    offset: 7,
    count: 1
    
}).toString() 
// result is: '1w@7'

Copy link to this section

Playground

Explore aggregation strategies and intervals using the Period Aggregation Explorer in UI Demo.