There are situations where it is desirable to display the Delivery monitoring performance charts on a web page that you have created. The embeddable charts feature provides this ability. To embed a Delivery monitoring performance chart into a web page, embeddable chart configuration must first be enabled. Once this is done, you can retrieve the embeddable content for a chart and then add it to the web page being modified. If you wish, you can also customize the chart. If your chart is not displaying properly, there are a few possible causes.

Enable embeddable chart configuration

Only Org Admins can enable embeddable chart configuration.

To enable embeddable chart configuration:

  1. Navigate to > Embeddable Charts Configuration.
  2. Select Embeddable Charts.
    • Embeddable chart configuration is enabled.

Disable embeddable charts

Only Org Admins can disable embeddable charts.

Disabling embeddable charts will cause any existing embedded charts you have created to display an error.

To disable embeddable charts:

  1. Navigate to > Embeddable Charts Configuration.
  2. Deselect Embeddable Charts.
    • Embeddable charts are disabled.

Retrieve embeddable chart content

To retrieve embeddable chart content:

  1. Navigate to Delivery > Network Paths.
  2. Click the network path you are interested in.
  3. Click the Performance tab.
    • The network path performance page is displayed.
  4. For the chart you want to embed, click the “</>” symbol at the bottom of the chart. screenshot-embeddable-charts.jpg
    • The embed code is displayed.
  5. Copy the embed code and paste it in the web page you are modifying as per the comments in the code.
  6. If you want, you can customize the embeddable chart.

Customize an embeddable chart

Embeddable charts can be customized by modifying the JSON within the embed code for the chart. The following table describes the key/values that can be modified:

Key Description
accessToken Customization not supported.
baseUrl Customization not supported.
config Customization not supported.
endTime The end of the chart time range. We recommend using this in combination with startTime. If used, do not also use timeRange. If used alone, the effective time range becomes the 1 hour preceding the specified time. The chart will not auto-update if this option is used. Specify in UTC in UNIX time.
height There is a system-defined default that can be overridden by a user-defined value. Specify in pixels. Do not include the units.
metric Customization not supported.
mode To render the chart without an axis, add "mode": "sparkline" to the embed code.
pollingInterval The chart refresh interval, specified in milliseconds. Default: 60000. Min: 60000.
startTime The start of the chart time range. We recommend using this in combination with endTime. If used, do not also use timeRange. If used alone, the effective time range becomes the specified time to current time. The chart will continuously auto-update if this option is used. Specify in UTC in UNIX time.
timeRange Used instead of startTime and endTime when specifying a time range up to the current time. The chart will continuously auto-update if this option is used. Specify the last X minutes/hours/days. Use whole numbers only, and specify units as ‘m’, ‘h’, or ‘d’ (for example, “60m” for 60 minutes).
title Defaults to the current path name.
titleLink Defaults to a deep link of the path.
width Not defined by default, so by default the chart is responsive. Specify a value to fix the width. Specify in pixels. Do not include the units.

Troubleshoot a blank chart

If your chart is blank, possible issues include:

  • You are reporting on a range that has no data.
  • You have an error in your code.
  • The monitoring point is offline.