Plotly Charts in New Relic

Introduction

New Relic comes with several chart types you can use on a dashboard, line, stacked bar, pie, histogram, heatmap, just to name a few. However, I needed a "grouped bar chart" and there was no option for this. Luckily, New Relic has a programmability platform that lets you create custom visualizations.

Here's a link to my GitHub repository with the grouped bar charted created with Plotly: https://github.com/pnvnd/nr1-custom-visualizations

Example

This first example groups the data by application name, then country code as seen in the FACET clause.

This second example groups the data by country code, then application name:

General Instructions

You'll need git, npm, and nr1 to get started. Check to make sure everything is installed correctly.

git --version
npm -v
nr1 version

Next, clone the repository, install npm packages, and publish the nerdpack.

git clone https://github.com/pnvnd/nr1-custom-visualizations.git
cd nr1-custom-visualizations
npm install
nr1 nerdpack:uuid --generate --force
nr1 nerdpack:publish

In the New Relic console, go to Apps > Go to Apps and Visualizations

Search for the nerdpack, in this case Custom Visualizations.

Click Add this app

Select accounts that should have access to this Nerdpack and click Update on the top right.

Go back to Apps > Custom Visualizations

Select the Grouped Bar Chart to start using the Plotly chart

This particular grouped bar chart must have two FACET items. Here's an example:

Once you are satisfied with your query, you can add this to a dashboard.

Remarks

I've previously built a similar grouped bar chart with Recharts (simple bar chart) and here is the side-by-side comparison of what it looks like on a New Relic dashboard.

Plotly charts are interactive where you can zoom in and out, and save a screenshot of the chart.