Charting Metric Data

In this scenario, you have a service that periodically writes metrics to its logs. This could be tools such as Dropwizard or Micrometer or a system monitoring tool like MetricBeat. Possible use cases include:

  • Track disk utilization across multiple volumes

  • Monitor CPU and memory usage trends

  • Compare metric values across time periods

Visualization: The chart displays a stacked area chart with three time series, one for each disk metric (Disk 0, Disk 1, and Disk 2). Each series shows the maximum metric value recorded in each time bucket. Data points are visible on each series for detailed monitoring. Hover over data points to see exact values and timestamps. Series are color-coded and labeled in the legend for easy identification.

Screenshot showing a Time Chart widget displaying a stacked area chart with three series representing disk utilization metrics (Disk 0 in red at bottom, Disk 1 in blue in middle, Disk 2 in light blue at top) over approximately 15 minutes, with data points visible on each series and a Format Time Chart panel on the right showing Stacking set to Stack and Show data points enabled

Figure 252. Charting Metric Data


Sample input data. Here is example input data for this scenario:

@timestampcpu_usagedisk0disk1disk2idmemory_usagetype
1970-01-01T00:00:0245.211.2121.1412.01m00167.8metrics
1970-01-01T00:00:0252.310.5720.4111.91m00272.3metrics
1970-01-01T00:00:0238.99.1519.1210.07m00365.4metrics
1970-01-01T00:00:0261.412.3422.4513.21m00478.9metrics
1970-01-01T00:00:0270.513.4523.6714.32m00582.1metrics

where disk0, disk1, and disk2 represent disk utilization metrics, and cpu_usage and memory_usage represent additional system metrics that you can visualize in a time chart.

Query. To create this time chart, use the following query:

logscale
type = metrics
| timeChart(function=[max(disk0, as="Disk 0"), max(disk1, as="Disk 1"), max(disk2, as="Disk 2")])

Query breakdown:

  1. Filter for events with type=metrics.

  2. Use the timeChart() function with the function parameter containing an array of aggregate functions.

  3. Apply the max() function to each metric field (disk0, disk1, disk2) to extract the maximum value within each time bucket. When events fall within the same time bucket, max() selects the largest value to represent that bucket.

  4. Use the as parameter to assign descriptive series names (Disk 0, Disk 1, Disk 2) for chart legend clarity.

Configuration:

  1. From the Search page, type your query in the Query Editor → click Run

  2. Choose Time Chart in the Widget Selector

  3. Click the style icon : the side panel shows most settings already configured by default based on the query result.

  4. In Plot, configure the chart appearance:

    • Set Type to Area

    • Set Interpolation to Linear

    • Set Stacking to Stack to display metrics as a stacked area chart

    • Enable Show data points for better visibility of individual metric values

    • Keep Show 'Others' enabled to display additional series beyond the max series count

  5. In Legend, configure legend display:

    • Set Position to Bottom

    • Adjust Height (Rows) to control legend size (for example, 4 rows)

    • Set Labels to Truncate to prevent long series names from wrapping

  6. In Colors, set Palette to Inherit to use default color scheme.

  7. In Trend line, enable the toggle and set Regression type to Linear to show data trends over time.

  8. In Bucket behavior, set Latest bucket (live) to Include to show the most recent data bucket.

  9. In X-axis, enable Show UTC time to display timestamps in UTC timezone.

  10. In Y-axis, configure the vertical axis:

    • Set Title to Disk usage

    • Set Scale to Linear

    • Set Format value to Metric for automatic unit formatting

  11. In Series formatting, customize each series:

    • Click on a series name (for example, Disk 0) to expand its settings

    • Adjust Color for each disk metric to ensure visual distinction (in this example, red for Disk 0, blue for Disk 1, light blue for Disk 2)

    • Optionally modify Label to customize series names in the legend

  12. In Title formatting, set Size to Medium.

You can further customize this widget by setting more properties, see Time Chart Property Reference.