Line Chart Widget

Learn how to use the Line Chart Widget in OpenLIT to plot precise time series metrics using ClickHouse queries and dynamic bindings.

The Line Chart Widget in OpenLIT helps you visualize changes in your metrics over time with sharp, precise lines. It’s ideal for tracking KPIs like API latency, CPU usage, conversion rate, or funnel performance.

When to use

Use a Line Chart when you want to:

• Monitor trends over time with a high degree of accuracy
• Display sharp, distinct movements in your data
• Compare multiple metrics on the same time scale

How to add a line 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(COUNT(*) AS INTEGER) AS total,
		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

Customization options

• **Custom line colors
• X/Y label and value paths

Use dynamic bindings like {{filter.timeLimit.start}}, {{filter.timeLimit.end}} to make your chart respond to dashboard time filters.

Best practices

• Use GROUP BY with consistent time buckets (e.g., minute, hour)
• Order your results by time to ensure correct rendering