---
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.

![image.png](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/image%28274%29.png)

## 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.

![custom_7.png](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/4402420384781-custom_7.png)

## 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:

![](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/204707783-Screen_Shot_2016-06-15_at_11.26.29_AM.png)

`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:

![](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/204466746-Screen_Shot_2016-06-15_at_11.28.10_AM.png)

`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.***