---
title: "Creating custom visualizations"
slug: "creating-custom-visualizations"
updated: 2026-05-01T13:24:31Z
published: 2026-05-01T13:24:31Z
canonical: "docs.catchpoint.com/creating-custom-visualizations"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://docs.catchpoint.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Creating custom visualizations
Catchpoint provides several "out-of-the-box" Visualizations you can use to analyze your data. If these visualizations do not meet a specific need, you can also develop custom visualizations using popular libraries or your own code.
Catchpoint custom visualizations can utilize numerous libraries, including (but not limited to): D3, Dygraphs, Rickshaw, and nvd3. Any custom visualizations you create are supported in multiple Catchpoint analysis tools including Dashboards and Explorer.
## Create Visualization Settings
When creating your visualization, you'll want to add a name and description (optional). Additionally, you may also utilize a chart icon to represent the type of visualization you are creating.
{height="" width=""}
## Raw Data
Your custom visualization can display raw data, where there is a separate data point for each and every test run performed, or aggregated data, where data from test runs is pre-aggregated at 15 minute intervals.
Loading raw data will typically result in slower performance, especially for tests that run very frequently or on a large number of nodes, as this results in many more individual data points to load. Displaying pre-aggregated data improves performance and is generally preferred. We recommend loading raw data only if it is important to view your data in the most granular level of detail.
When **Raw data** is selected, the first breakdown will default to Test and the 2nd breakdown will default to Node. Dimension will be un-selectable. When **Raw data** is not checked, dimension, breakdown 1, and breakdown 2 will become selectable and return data of your choice.
## Include Index
When raw data is unchecked, **Include Index** becomes selectable. If you have configured [indexes](/v1/docs/performance-index) for your tests, the indexes will be appended to the bottom of your data.
**Summary Data**
Summary Data is the chart summary data table appended at the bottom of your visualization. It can be hidden by choosing the hide option in the chart settings.
## Requesting Data From Catchpoint
There are two methods for getting data from the backend: `getData` and `getSummaryData`.
- `getData` returns all of the data points based on the time frame, interval, dimension, and breakdowns
- `getSummaryData` returns the summary data based on the time frame, interval, dimension, and breakdowns
**CPVisualization.getData** // returns an object containing chart's data in format:
`getData` can also be called with a single parameter
- `getData(5)` will return an object of data where index == 5
- `getData(false)` will return only the headers
**CPVisualization.getSummaryData**: returns object that has summary data in following format:
`getSummaryData` can also be called with a single parameter
- `getSummaryData (5)` will return an object of data where index == 5
- `getSummaryData (false)` will return only the headers
## Displaying the Visualization
**CPVisualization.getContainerSelector();**: gets selector of container element on performance page. You would add your charts inside this container.
**CPVisualization.inserLegend(legendObject, containerSelector);**: this will add a legend inside the element that is accessed by `containerSelector`.
**legendObject example:**
`{ "prefix": "Nodes in chart", "items": [{name: "Node1", color: "#f0f0f0"}, {name: "Node2", color: "red" }] }`
**CPVisualization.getTheme()**: checks for the theme color:
###
## Interacting with the Visualization
**CPVisualization.showTooltip(IndexOfElement, MetricNameShownAtTopOfTooltip, XPosition, YPosition)** `IndexOfElement` is the index from `getData` response.
**CPVisualization.openWaterfallWindow(indexOfElement);** allows you to open the waterfall for a particular data point. Index is from `getData` response
**CPVisualization.closeTooltip();** will hide any visible tooltip
- Also a timer that will close any tooltip.
***Have a Custom Visualization in mind and want our Professional Services Team to create it for you? Please reach out to your Account Executive or Customer Success Manager.***