---
title: "How to create AKAMAI CDN Mapping Dashboard"
slug: "how-to-create-akamai-cdn-mapping-dashboard"
updated: 2026-06-24T17:00:58Z
published: 2026-06-24T17:00:58Z
canonical: "docs.catchpoint.com/how-to-create-akamai-cdn-mapping-dashboard"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.catchpoint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to create AKAMAI CDN Mapping Dashboard

#### Overview

The Akamai CDN Mapping dashboard is designed to provide insights into the performance and distribution of content delivery networks (CDNs). This guide will walk you through the steps to create insights, custom visualizations, favorite charts, and Playwright tests for the Akamai CDN Mapping dashboard.

#### Step 1: Create Insights

1. **Create Insights**: Begin by creating **tracepoint** for the Akamai CDN Mapping dashboard.  

Name = **CDN Edge** and **Test City**  

Token = **city** and **node**  

Format = **city** and **HTTP_QUERY**  

![image.png](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/image%28373%29.png)

**Indicator**

Name = **Requests [Mapping]** and **Wait [Mapping]** Token = **numreq** and **wait** Format = **&numReq=(\d+)** and **&wait=(\d+)** Content Type = **Number** ![image.png](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/image%28292%29.png)

#### Step 2: Create Custom Visualization

- Navigate to **Synthetic > Custom Visualization > New**  

![Image](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/Screenshot%202026-06-24%20at%2011.42.24%E2%80%AFAM.png)

1. **Add Scripts**: Add the following scripts to the script field:

```

```

```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://vizlibs.catchpoint.com/js/city_continent.js" type="text/javascript" ></script>
    <script src="https://vizlibs.catchpoint.com/js/isp_mapping.js" type="text/javascript" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.0.0/d3.min.js" integrity="sha512-il/oXcqETt5LGGmWWbOZLxrDgQQXlr7+ZI37ksA//3e9mxFloAOzlkF8SqtMOlWL6zTCk8hPYUQnreiQvT4elQ==" crossorigin="anonymous"></script>
	<script type="text/javascript">
    /*
    Dimension : Test [Any]
    Breakdown 1: Test City [ANY]
    Breakdown 2 : CDN Edge [Any]
    Metric : 2 LIMIT [wait(ms) , #runs]
    Version :  v2.4
    RAW Data : No
    Include Index : No
    Request : yes
    Summary Data : Hide  
    URL Params - 
    Key				Example value					        Description
    initial			any character				            To create multiple instances for multiple tests
    force			true/false					            To force update configurations this value should be true
    theme			dark_theme/light_theme		            Theme of visualization
    critical_range	any integer e.g.- 300 		            Critical range of metric
    normal_range	any integer e.g.- 200 		            Normal range of Metric
    heading			Heading text 				            Heading of Visualization
    formatted		true/false					            true if all criteria regions should be shown
    metric_index	0/1					    	            To configure normal, warning and critical region should be calculated based on what metric 
    code			none/airport_code/locode/azure_code 	To identify the format of text of cdn cities
	viztype         POP/CDN_EDGE                            To show in tooltip text about type of data
     */
    $.ajaxSetup({
      cache: true
    });
    document.addEventListener('DOMContentLoaded', function(event) {

        var selector = CPVisualization.getContainerSelector();
        var summary = CPVisualization.getSummaryData();
        
        var default_values ={
                                'theme':'light_theme', 
                                'critical_range':200,
                                'normal_range':150, 
                                'heading':'Akamai CDN Mapping', 
                                'formatted':true, 
                                'metrics':0, 
                                'isp':false, 
                                'code':'none',
                                'viztype':'CDN_EDGE'
                            }; 
                            
        var today = new Date();
        var random_str = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
        random_str =  random_str.getTime();
    
        $.when(
          $.getScript("https://vizlibs.catchpoint.com/custom_libs/cdn_ver_2.4/js/cdn.js?v="+random_str)
        ).done(function(){
            creatCDNVisualization(selector, summary, default_values);
        })

    });
	</script>
	<link rel='stylesheet' type='text/css' href='https://vizlibs.catchpoint.com/custom_libs/cdn_ver_2.4/css/cdn.css'>
```

### Step 3: Create the Test unless the Test already exists

- HTTP Test for the targeted CDN request/asset.  

![image.png](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/image%28368%29.png)

#### Step 4: Create Favorite Chart

1. **Create Favorite Chart**: Create a favorite chart for the test you want to have the mapping dashboard created.
  - **Visualization**: Histogram
  - **Dimension**: Test
  - **Column**: City
  - **Breakdown**: IP
  - **Metrics**: Wait and #Runs

![Image](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/Untitled.png)

#### Step 5: Create Playwright Test

1. **Create Playwright Test**: Create a Playwright test with the below script – replace favorite chart ID and the API key.

```
const __translatedScript = async () => { // allow script to be at top for easy edits

    await Catchpoint.startStep(`1. Access Token Generation`); /*** Step 1 ***/

    // Step - 1
    var __url = `http://edc.edgesuite.net/`;
    var __response = await page.goto(__url);

    var __result = Catchpoint$.runScript(
        `var xhr = new XMLHttpRequest();xhr.open("POST", 'https://io.catchpoint.com/ui/api/token'); xhr.setRequestHeader("Accept", "*/*"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("grant_type=client_credentials&client_id=Rn-s-jXLAuHCGCd&client_secret=150e1cd0-f6b6-401a-8e54-95a18926a6d1");`
    );

    await new Promise(resolve => setTimeout(resolve, Number(3000))); /* pause */

    // Step - 2
    await Catchpoint.startStep(`2. City Mapping`); /*** Step 2 ***/

    await Catchpoint$.andWait(async _ => {
        var __result = Catchpoint$.runScript(
            `var json = JSON.parse(xhr.response);xhr.open("GET", 'https://io.catchpoint.com/api/v3.4/tests/explorer/favoritechart/data/55314'); xhr.setRequestHeader("Accept", "*/*"); xhr.setRequestHeader("Authorization", "Bearer REPLACE_WITH_API_KEY"); xhr.send();`
        );
    });

    await new Promise(resolve => setTimeout(resolve, Number(2000))); /* pause */

    var __result = Catchpoint$.runScript(
        `var iMap = JSON.parse(xhr.response).data.favoriteCharts[0].summary;var xhr = new XMLHttpRequest();xhr.open("GET", 'http://edc.edgesuite.net/'); xhr.send();for(i=0; i<iMap.items.length;i++) {var xhr = new XMLHttpRequest();xhr.open("GET", 'http://edc.edgesuite.net/?scity='+iMap.items[i].breakdownOne.name+'&wait='+iMap.items[i].syntheticMetrics[0]+'&numReq='+iMap.items[i].syntheticMetrics[1]); xhr.setRequestHeader("X-Forwarded-For", iMap.items[i].breakdownTwo.name); xhr.send(); }`
    );

    await new Promise(resolve => setTimeout(resolve, Number(7000))); /* pause */
} // end of __translatedScript
```

1. Add the Tracepoints and Indicators created earlier to the Playwright Test’s Insight Section.

![image.png](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/image%28370%29.png)

#### Step 6: Plot Results Using Custom Visualization

1. **Plot Results**: Plot the results for the above JS API test using custom visualization.
  - **Disable**: Test Data
  - **Enable**: Request Data and add filters to select the request – http://edc.edgesuite.net/
  - **Dimensions**: Request
  - **Column**: CDN Edge
  - **Breakdown**: Test City
  - **Plot for the indicators**: Wait[Mapping], Requests[Mapping]

![Image](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/Untitled1.png)