Area Chart Widget

When to use

Use the Area Chart when you want to:

Show trends over time
Emphasize volume or scale changes
Display multiple series stacked

Area charts are particularly effective for metrics that accumulate or change gradually over time.

How to add an area chart

Example:

WITH
  parseDateTimeBestEffort('{{filter.timeLimit.start}}') AS start_time,
  parseDateTimeBestEffort('{{filter.timeLimit.end}}') AS end_time,
  dateDiff('day', start_time, end_time) AS days_diff,
  dateDiff('year', start_time, end_time) AS years_diff,
  multiIf(
      years_diff >= 1, 'month',
      days_diff <= 1, 'hour',
      'day'
  ) AS date_granularity

  SELECT
    CAST(SUM(toInt64OrZero(SpanAttributes['gen_ai.usage.input_tokens'])) AS INTEGER) AS prompt_tokens,
    CAST(SUM(toInt64OrZero(SpanAttributes['gen_ai.usage.output_tokens'])) AS INTEGER) AS completion_tokens,
    formatDateTime(DATE_TRUNC(date_granularity, Timestamp), '%Y/%m/%d %R') AS request_time
  FROM otel_traces
  WHERE
    SpanAttributes['gen_ai.operation.name'] != 'vectordb'
    AND StatusCode IN ('STATUS_CODE_OK', 'STATUS_CODE_UNSET', 'Ok', 'Unset')
    AND Timestamp >= start_time
    AND Timestamp <= end_time
  GROUP BY request_time
  ORDER BY request_time;

Configuration options

Customize your Area Chart with the following options:

X-Axis: A path to label or the group by param
Y-Axes: An array of value path and color combination

Best practices

Limit the number of series to keep the chart readable.
Apply consistent color palettes for related metrics.
Use filters ({{filter.timeLimit.start}}, {{filter.timeLimit.end}}) to enable dynamic dashboards