Configuring Graphs in a Custom Dashboard | MuleSoft Documentation
# Configuring Graphs in a Custom Dashboard
In Anypoint Monitoring, you can configure one or more sets of time-series data in a graph. The graph measures the changes to time-series data over time. A graph in a custom dashboard can display a metric for a resource in a given environment. For example, to configure a graph, you might select a response time or heap usage as the metric to graph for a Mule app in your Design or Sandbox environment.
Advanced configuration options allow for more fine-tuned data sets. You can also customize the X and Y axes, the look of the graph, legends, the behavior when you hover over a data point, and more.
To open a configuration page for a graph, see Configure Custom Dashboards.
## General Settings for Basic and Advanced Data Queries
**General** tab settings include basic and advanced queries (or modes) for configuring time-series data. Both configurations share fields for the title and a short description.
Basic and Advanced Mode Settings  
---  
Title to display in the UI. Defaults to Panel Title.  
Description | Short description to display in the UI when users hover over the information (`i`) icon.  
Other settings are specific to the setting mode (basic or advanced).
### Basic Mode
In the **General** configuration tab, a basic query selects a single metric for a resource (a deployed application or API) in a given environment.
Basic Mode Settings  
---  
Panel Type |  From the drop-down menu, select the type of panel to display for the resource — `Application Panel`, `API Panel`, or `API Analytics Panel` (deprecated).  
The drop-down menu includes these types of metrics:
  * Inbound response metrics and averages
  * JVM metrics
  * Outbound response metrics and averages

For a list of basic metrics, see Basic Mode Metrics  
Environment | The environment where your application or API is deployed.  
Resource | A deployed application. This option is available only if you selected `Application Panel` as your panel type.  
A deployed API. This option is available only if you selected `API Panel` or `API Analytics Panel` (deprecated) as your panel type.  
Version / Instance | The Mule version or instance on which your API is deployed. This option is available only if you selected `API Panel` or `API Analytics Panel` (deprecated) as your panel type.  
After you complete your configuration, click **Save Changes**.
To exit the configuration and return to the dashboard, click the **X**.
When you create an application panel using a JVM metric, the query that supports the panel uses only the worker-id for the app. When you modify the panel at a later time, the resource fields are populated with the query content. Because some apps share a worker-id, the resource that appears in the selector might appear to be a different resource from the resource you selected originally. However, all resources share the same worker, so the query has the correct information despite the selector displaying a different resource name.   
---  
### Advanced Mode
In the **General** configuration tab, advanced settings support one or more fine-tuned queries for your chart.
If you switch back to the basic configuration, some of the advanced configuration queries are removed.   
---  
Advanced Mode Settings for Applications  
---  
Lists JVM and Mule app properties (such as `jvm.memory` and `app_inbound_metric`) that you can add to your chart. This field provides matching suggestions when you type in a character. For example, `jvm.c` will produce a list of all values that contain those characters (such as `jvm.classloading` and `jvm.cpu.operatingsystem`). For a list of advanced metrics, see Advanced Mode Metrics  
Supports conditional logic for filtering the **From** data source you selected.
  * Select one or more filters tags (such as `app_id`, `env_id`, `org_id`, `worker_id`).
  * Available operators include:
    * `=` The value on the left matches the value on the right.
    * The value on the left is less than the value on the right.
    * The value on the left is greater than the value on the right.
  * You can also construct a query that contains multiple filtering expressions by using logical `AND` or `OR` operators between the expressions. Example:
  * `Where env_id = Sandbox`
  * `Where env_id = Sandbox AND app_id= app3`
  * `Where env_id = Sandbox OR env_id= Production`

Grouping `AND` or `OR` conditions within parentheses is _not allowed_. For example, `Where env_id = Sandbox AND (app_id= app3 OR app_id=app2)` isn’t allowed.  
Add one or more `field` settings to create a function that selects a field from the **From** data and applies an operation to it (such as the `mean` of the `heap_total`).  
Group By |  For grouping the data by a selected time interval (such as `$_interval`, `1s`, `10m`, `1h`), filter tag (such as `tag(env_id)`), and fill options (such as `none`, `null`, `0`, `previous`, `linear`). Valid values and arguments:
  * `time($_interval)` for the automated time interval setting, or you can specify time intervals of `1m`, `5m`, `10m`, `15m`, or `1h`.
  * `fill()` where valid values are `none`, `null`, `0`, `previous`, `linear`.
  * `LIMIT`: Numeric value (N) used to limit the result to the first N data points (combined series and timestamp values) returned by a query.
  * `SLIMIT`: Numeric value (N) used to return the all data points (combined series and timestamp values) from the first N series returned by the query.
  * `ORDER BY time DESC`: Returns results in descending time order.

  
Alias By | You can create a label for your metric using a literal string (such as `my string`) or supported variables (for example, `$tag_worker_id` or `$tag_env_id`).  
Advanced Mode Settings for APIs  
---  
`http_summary_metric` For a list of advanced metrics, see Advanced Mode Metrics  
Provides conditional logic for filtering the **From** data source you selected. You can select one or more filter tags (such as `api_id`, `org_id`, `api_version_id`, `method`, `status code`). Example: `Where status_code = 200`.  
For creating a function that selects a field (such as `request_size_average`,`response_time_max`, or `response_time_sum`) from the HTTP summary and applies an operation to it (such as the `mean` of the `response_time_average`). You can add one or more `field` settings.  
Group by |  For grouping the data by a selected time interval (such as `$_interval`, `1s`, `10m`, `1h`), filter tag (such as `tag(api_id)`), and fill options (such as `none`, `null`, `0`, `previous`, `linear`).  
Alias by |  You can create a label for your metric using a literal string (such as `my string`) or supported variables (for example, `$tag_api_id`). The alias must always begin with `$tag`. The syntax is `$tag_yourTagName`. To use your tag as an alias, the tag must be used to `group by` in the query.  
After you complete your configuration, click **Save Changes**.
To exit the configuration and return to the dashboard, click **X**.
## Axes (X-Axis and Y-Axis Settings)
Configure the x-axis and y-axis of your graph in the **Axes** tab.
### Y-Axis Settings
Set a vertical y-axis for the left (Left Y) or right (Right Y) side of your graph.
Y-Axis Settings  
---  
If unchecked, hides the y-axis from the graph.  
The unit of measurement to use for values on the y-axis. Values include `none`, data types (such as `short`, `percent (1-100)`), `currency` settings (including `Dollars $` or `Real ($)`), `time`, `data`, `data rate`, and many other types of values.  
Valid values for a linear or logarithmic (log) scale for coordinates on the y-axis:
  * linear: For y-coordinates, such as `1`,`2`,`3`.
  * log (base 2): For y-coordinates, such as `1`,`4`,`16`.
  * log (base 10): For y-coordinates, such as `1`,`10`,`100`.
  * log (base 32): For y-coordinates, such as `1`,`32`,`1024`.
  * log (base 1024): For y-coordinates, such as `1`,`1024`,`1048576`.
The minimum value for a y-coordinate. Defaults to `auto`.  
The maximum value for a y-coordinate. Defaults to `auto`.  
Decimals | Override for the automatic decimal precision on y-coordinates, for example, where `2` limits a value of `10.12345` to `10.12`. Defaults to `auto`.  
A string used to label the Y axis. Defaults to `""`.  
### X-Axis Settings
X-Axis Settings  
---  
If unchecked, hides the x-axis from the graph.  
Valid values:
  * Time: The default option. Indicates that x-axis data is divided into time units (for example, hours or minutes).
  * Series: Indicates that data divided by series, and the y-axis provides the value of the series data.
  * Histogram: Converts the graph into a bar chart that represents collections of data at a specified, numeric intervals (called a buckets or bins), for example, . The higher a bar in a histogram, the greater the frequency (or count) of data collected at that interval.

  
Visible only if Series is selected.  
Visible only if Histogram is selected. Divides the range of values for a given metric into the specified number of intervals so that the histogram can display the count or frequency of data points that fall into that interval.  
After you complete your configuration, you can click Save Changes. To exit the configuration and return to the dashboard, simply click the `X`.
## Visuals (Bar, Line, Data Point Settings)
You can configure the style and look of graph to use. Bar, line, and point graphs are supported.
Visual Configuration Options  
---  
Draw Modes |  You can check one or more of these modes:
  * Bars: Checkbox for representing values as bar charts.
  * Lines: Checkbox for representing values as line graphs.
  * Points: Checkbox for representing values as data points.

  
Mode Options |  Only available when the selected Draw Modes are Lines or Points.
  * Point Radius: Only available when Lines is a selected Draw Mode. On a scale of `0` (none) to `10`, sets the thickness of the line that connects related data points on the graph.
  * Fill: Only available when Points is a selected Draw Mode. On a scale of `0` (none) to `10`, sets the opacity of the color used below related data points on the graph.
  * Line Width: Only available when Points is a selected Draw Mode. On a scale of `0` (none) to `10`, sets the thickness of the border of the fill.
  * Staircase: Checkbox for displaying adjacent points in a staircase pattern.

  
Hide Series | 
  * With Nulls Only: Checkbox for hiding any series that is filled with null values.
  * With Only Zeros: Checkbox for hiding any series that is filled with values of zero.

  
After you complete your configuration, you can click Save Changes. To exit the configuration and return to the dashboard, simply click the `X`.
## Alerts (Configuration, Notifications, History)
Availability: Advanced and Titanium tiers only  
---  
In the **Alerts** tab, set up alerts that trigger when JVM memory utilization is too high.
## Create an Alert for a Chart in a Custom Dashboard
  1. Navigate to the configuration screen for a graph in a custom dashboard. For guidance, see Configuring Custom Dashboards.
  2. Provide a general configuration for the graph that (at minimum) defines the metric, environment, and resource for which you want to set the alert.
For guidance, see General Settings.
  3. Navigate to the **Alert** configuration tab for the graph.
  4. Ensure that **Advanced Mode** is disabled.
Alerts aren’t available for charts with advanced mode configurations.
  5. Click **Add Alert**.
  6. Use **Alert Config** to configure the alert. See Alert Config.
  7. Configure email notifications when an alert is triggered. See Notifications.
  8. Click **Save Changes**.
  9. Click `X` to exit the configuration and return to the dashboard.


Note that you can also view state history and delete alerts.
### Configure an Alert for a Chart in a Custom Dashboard
In the **Alert Config** section, configure the condition under which an alert is triggered.
Settings for Alerts in Custom Dashboards  
---  
A title for your alert  
Severity level | The severity level of your alert.  
`Condition` | WHEN: For triggering an alert when the metric being measured is above a specified level  
Available severity levels: 

Info
    
May be assigned to alerts that do not require immediate attention when triggered. This severity indicates the metric should be passively monitored. 

Warning
    
May be assigned to alerts that require prompt attention when triggered. This severity indicates an alert should be closely monitored. 

Critical
    
May be assigned to alerts that require immediate attention when triggered. This severity indicates an alert should receive an immediate response.
### Notifications
Configure an email notification when an alert is triggered.
Notification Settings for Alerts  
---  
Email address for each recipient of the alert notification. If you add or change the email address of an alert recipient, they don’t receive an email until the alert is triggered.  
Message to send to the recipient.  
### State History
View the last fifty state changes in this section of the UI.
You can also clear the history.
### Delete
To delete an alert from a chart in a custom dashboard, click **Delete** from the chart’s **Alerts** tab, and confirm your deletion.
## Advanced (Legends, Thresholds, Stacking, Hovering, Time Shift Settings)
Add and configure legends, thresholds, and other features for your graph.
### Legends (Advanced Setting)
In the **Advanced configuration** tab, configure legends for your graphs.
Legend Options  
---  
Unchecking hides the legend. Checked by default.  
As Table | Check to display the selected legend Values (such as `min` and `max`) in a table. Unchecked by default.  
To the Right | Check to display the legend on the right side. Unchecked by default.  
Available when **To the Right** is checked. Sets the minimum width (in pixels) for the legend. Leave it blank to allow for automatic width selection.  
You can also display the following values in a legend:
Legend Values  
---  
Minimum of all values returned from the query  
Maximum of all values returned from the query  
Average of all values returned from the query  
Last value returned from the query  
Sum of all values returned from metric query  
Decimals | Overrides automatic decimal precision used in legends and tooltips  
After you complete your configuration, click **Save Changes**.
To exit the configuration and return to the dashboard, click the **X**.
### Stacking and Hover (Advanced Setting)
In the **Advanced configuration** tab, you can configure a hover tooltip to display information about a data point in a graph when you hover over the value.
Hover Tooltip Settings  
---  
To display one or all series in the tooltip.  
Sort Order | Displays data in no order (None), Decreasing, or Increasing order. Defaults to None.  
Stacked Value |  Available when **Stack** is checked. Controls the display of values in the tooltip. Valid values are:
  * Individual: The value of the series that you hover over.
  * Cumulative: Sum of series below the stacked value plus the series you hover over.
Stacking and Null functionality displays multiple series as a group within a stack. You can also specify how to deal with null values.
Stacking and Null Settings  
---  
When checked, stacks each series, one on top of another, instead of overlaying them.  
Available when **Stack** is checked. Displays each series of stacked values as a percentage.  
Null Value | Determines how to display null values: Connected, Null, Null As Zero.  
### Threshold (Advanced Setting)
In the **Advanced** configuration tab, you can set one or more thresholds, such as a line or section to a graph, to indicate whether the data crosses a limit that you specify.
Thresholds are not available when an alert is in place on the graph. To re-enable thresholds for a chart, you must delete the alert.   
---  
Threshold Settings  
---  
Indicates whether the limit applies to data that is greater than (`gt`) or less than (`lt`) the specified threshold value.  
Threshold value | A numeric value for the threshold.  
Threshold type | Identifier for the threshold (Custom, Critical, Warning, or OK).  
Adds a filler color to the graph that corresponds to the specified threshold setting.  
Adds a line to the graph that corresponds to the specified threshold setting.  
Fill Color | Similar to **Fill** settings, but for custom thresholds only.  
Line Color | Similar to **Line** settings, but for custom thresholds only.  
### Time Range Shift (Advanced Setting)
In the **Advanced** configuration tab, you can set overrides any time intervals or ranges that end users select for the custom dashboard. Such selections are global and apply to all charts in the dashboard. Overrides are useful when the selection does not make sense for a particular graph.
Time ranges are calculated backwards from the present time. For example, you might set the time range so you can view the last 2 hours of data in a graph. You can also shift the time range to calculate backwards from an earlier point in time, for example, from 1 hour ago instead of from the present time.
Time Range Shift Settings  
---  
Override Relative Time | The amount of time to show in the x-axis of the graph (for example, `2h`). Information about this setting is displayed under the title of the graph unless you select Hide Time Override Info.  
Add Time Shift | Amount of time before now (the current time) to _end_ (or shift back in time) the duration set by Override Relative Time. For example, if the time right now is 10:00, and you shift the time to `1h` when the Override Relative Time is `2h`, end users will see the two hours of data available from 7:00 to 9:00, and the table will also display a message like this: `2 hours, ending 1 hour ago`.  
Hide Time Override Info | Checkbox for hiding the description of any Override Relative Time and Time Shift settings from the graph.  
After you complete your configuration, you can click Save Changes. To exit the configuration and return to the dashboard, simply click the `X`.