Creating custom visualizations

  • 2 minute(s) read
Prev Next

Overview

Catchpoint provides several "out-of-the-box" Visualizations users can take advantage of to analyze data received from tests. If these visualizations do not meet your needs, you can also develop custom visualizations leveraging popular libraries or your own code.

Catchpoint custom visualizations can take advantage of numerous libraries, including (but not limited to): D3, Dygraphs, Rickshaw, and nvd3. Furthermore, the custom visualizations you create are supported in other Catchpoint features such as Dashboard Widgets and Favorite Charts.

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

Raw Data

If you'd like to add raw data to your chart, you will need to check Raw Data in the Create Visualization popup (see below).

When Raw data is selected, the first breakdown will default to Test and the 2nd breakdown will default to Node. The dimension will be unselectable. When Raw data is not checked, dimension, breakdown 1, and breakdown 2 will become selectable and return data of your choice.

custom_7.png

Include Index

When raw data is unchecked, Include Index becomes selectable. If you have configured indexes 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.