IMPORTANT: No additional bug fixes or documentation updates will be released for this version. For the latest information, see the current release documentation.
« Create synthetic monitoring visualizations Alerting »
Elastic Docs ›Observability Guide [7.13] ›Exploratory data visualizations

Create user experience visualizations

edit

Create user experience visualizations

edit

This functionality is in technical preview and may be changed or removed in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.

Based on the User Experience data from your instrumented applications, you can create various detailed visualizations for performance distributions of your web applications or a key performance indicator (KPI) over time, such as page load times, backend times, and many others.

User experience visualization
  1. Go to Observability > User Experience.
  2. Click Analyze data.
  3. For data type, select User Experience (RUM).

  4. Under Report, choose the type of data you want to analyze:

    Performance distribution

    The Performance distribution time-series chart enables you to examine the perceived performance of your web applications based on the metric you select.

    By default, the page load time metric is selected. Hover over the chart to display crosshairs with specific metric data.

    KPI over time

    The KPI over time histogram is a graphical representation of the performance indicators based on the metric you select.

    By default, the page views metric is selected. Hover over the chart to display crosshairs with specific metric data.
  5. Now let’s define your report. Set the time filter as an absolute or relative time.
  6. Select the web application name and its environment. You can make multiple selections.

  7. Form the list of available metrics, select the metric you want to analyze:

    • Page load time
    • Backend time
    • First contentful paint
    • Total blocking time
    • Largest contentful paint
    • First input delay

    • Cumulative layout shift

      To learn more about these metrics, see our User Experience documentation.

  8. From the Chart type dropdown, choose the aggregation-based visualization you want to view:

    • Bar vertical
    • Bar horizontal
    • Bar vertical stacked
    • Area
    • Area stacked
    • Line

  9. Filter the type of data you want to examine.

    You can filter by URL, Operating system, Location, Device, or Browser family.

  10. To further segment the data and view multiple data series on the chart, you can specify a breakdown.

    For a Performance distribution report, you can segment the data by the operating system, device, or location.

    For a pings report, segment data by observer location or monitor type.

To customize the visualization further, click Open in Lens where you can modify visualizations with the drag and drop editor. To learn more, see Lens.

« Create synthetic monitoring visualizations Alerting »