Skip to main content

Data visualization

Data visualization involves visually representing data so the user can easily understand it. It's a crucial part of any application that displays large amounts of data.

Following are the main data formats and chart types supported by the Strato design system.

Chart anatomy

Line chart Pie chart

  1. Value labels: Range of values representing a variable.
  2. Chart tooltip: Displays additional information about the hovered data points. Allows additional actions when selected.
  3. Interactive toolbar: Allows you to zoom, inspect, pan, or download chart data.
  4. Interactive legend: Series in charts are represented with a color/chart type indicator and name in an interactive legend.
  5. Legend resize handle: Controls the proportion between the chart and the legend.
  6. Axes: Represents the range of data values. They're typically labeled with the variable name.
  7. Crosshair and Magnifiers: A crosshair is a visual aid consisting of two lines intersecting at a point on the chart, typically where the mouse cursor is located. It enables you to find data points or outliers precisely. "Magnifiers" connected to the axis show precise values.
  8. Axis Description: Axis descriptions provide context to the variables plotted on each axis.

Interactivity in charts

Chart Interactions enable additional possibilities for end users to interact with the data plotted within the chart area. The interactive options currently supported within the Timeseries charts are zoom in, zoom out, x-axis zoom and pan. Add the ChartInteractions subcomponent to the TimeseriesChart to incorporate these interactions.

Chart interaction x-axis zoom

Introduction to data types

With Strato visualizations, you can visualize a variety of data types, such as:

  • Time series data
    • Timestamp data
    • Timeframe data
  • Categorical data
  • Key Performance Indicators
  • Tabular data

Time series data

Time series data consists of sequences of numeric values gathered over time measured at consistent time intervals (for example, every minute, hour, or day). Use `TimeseriesCharts'to visualize your time series data as lines, bars, or areas. However, selecting the right chart type depends on the use case and the data provided.

Time series data is used for changes in variables over time like:

  • Weather data
  • Stock prices
  • Industry forecasts
  • Performance over time

Time series data can consist of either a timestamp or a timeframe data (or both).

Timestamp data

Timestamp data is the simplest form of time series data. It correlates values with specific points in time. Timestamp data only consists of a data point with a start time and value. For example:

{
start:new Date ("2022-10-01 06:00:00"),
value:1500,
}

Timeframe data

Timeframe data includes two timestamps per data point, a start and an end. Because of this, timestamp data always represents a duration. For example:

{
start:new Date ("2022-10-01 06:00:00"),
end: new Date ("2022-10-01 08:00:00"),
value:1500,
}

Strato charts using time series data

Time series line chart

Time series line chart

Time series area chart

Time series area chart

Time series bar chart

Time series bar chart

Time series band chart

Time series band chart

Categorical data

Categorical data is a type of data that represents qualitative or non-numeric variables. Its purpose is to aggregate information into groups with similar characteristics. This also includes time (for example, months, quarters, etc.) if set as a category.

We support nominal data in our charts with no inherent order or ranking. Categorical data can be rendered in a categorical bar chart or pie and donut charts.

Use CategoricalBarChart to visualize your categorical data as bars and PieChart to render data as a pie or a donut chart.

Categorical data is used to compare aggregated data such as:

  • Browser usage
  • Action count
  • Active sessions
  • Top 10 Hosts' CPU usage

Strato charts using categorical data

Categorical pie/donut chart

Categorical pie/donut chart

Categorical bar chart

Categorical bar chart

Categorical bar chart variant: grouped bar chart

Categorical bar chart variant grouped

Categorical bar chart variant: stacked bar chart

Categorical bar chart variant stacked

KPI data

Key performance indicators (KPIs) enable tracking performance variables over time. These can be related to the performance of your website or application or the effectiveness of a company strategy.

KPIs are used to monitor performance data such as:

  • Monthly recurring revenue
  • User action duration
  • Load actions

Strato charts using time series data

Single value chart

Single value chart

Tabular data

The tabular format is used to display data in tables. While tables aren't chart visualizations in the traditional sense, they can be useful for displaying large amounts of data. Use SimpleTable or DataTable to visualize your data as a table.

Tables are used for:

  • Viewing large amounts of data
  • Giving additional context to a chart

Strato charts using tabular data

Data table

The DataTable component is ideal for large datasets. It provides additional features like sorting, filtering, pagination, and row selection. Data table

Simple table

The SimpleTable component displays a basic HTML table. It's ideal for smaller datasets and doesn't provide additional sorting, interaction, and paging features. Simple table

Still have questions?
Find answers in the Dynatrace Community