Creating custom visualizations

  • 2 minute(s) read
Prev Next

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

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

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.