Creating a Big Number on a Dashboard

Sometimes you just want to put a single number front and center. The number panel does just that. As with pie and donut charts, the number panel is configured via a PowerQuery.

1. On the PowerQueries page (US|EU), build a PowerQuery which returns a single value. For example,

request=* page=*
| group count( status='failure' ) / count() * 100

The first line is a filter that selects all lines that have a value for request and page. The second line calculates a failure rate percentage by taking the count of failed logs divided by the total number of logs, multiplied by 100. 

Once you have the finished query, select the entire query and copy it.

2. Go to the dashboard where you will add the new panel, or create a new dashboard.

3. Click the "+" at the top right of the dashboard and select "Number"

4. In the edit panel which appears, enter a title, and paste the query into the "Filter" box. Hit OK.

5. The number panel will appear on the dashboard. Click and drag near the top of the component to move it around. Click and drag the right side, bottom side, or bottom right corner to resize.

6. As a finishing touch, you can add a percentage sign as a suffix. Click the three dots at the top right of the component, and select "Edit JSON".

7. Add the following configuration (and a preceding comma as needed), then hit OK.

 "options": {
   "suffix": "%"
 }

8. Your number panel now has a % suffix.

Here is a list of the options available with the number panel:

options: {
  suffix: string | undefined, // shown to right of the number, defaults to none
  color: hexValue | htmlColorName | undefined, // defaults to dashboard text color
  backgroundColor: hexValue | htmlColorName | undefined // defaults to dashboard bg color
format: AUTO | D | K | M | B, // Abbreviates big numbers:
  // If the incoming value is 10,000,000,000 (10 billion), these formats produce:
  // B - billion  => 10B
  // M - million  => 10,000M
  // K - thousand => 10,000,000K
  // AUTO (default) - examines the number and picks the best fit, so => 10B
  // If it's anything else, we just insert commas into the original value.
}