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
- Value labels: Range of values representing a variable.
- Chart tooltip: Displays additional information about the hovered data points. Allows additional actions when selected.
- Interactive toolbar: Allows you to zoom, inspect, pan, or download chart data.
- Interactive legend: Series in charts are represented with a color/chart type indicator and name in an interactive legend.
- Legend resize handle: Controls the proportion between the chart and the legend.
- Axes: Represents the range of data values. They're typically labeled with the variable name.
- 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.
- 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.
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 area chart
Time series bar 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 bar chart
Categorical bar chart variant: grouped bar chart
Categorical bar chart variant: stacked bar chart
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
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.
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.