Format data in your dashboard

Learn how to use Arcade with ArcGIS Dashboards to format data for visualization.

Dashboard showing magnitude and location of earthquakes.

Arcade is an expression language that allows you to style and label your map, create informative pop-ups in your map, and perform on-the-fly calculations on your data.

In this tutorial, you will learn to enhance a table element using Arcade in a dashboard. The rows of the table will be rendered according to the color scheme of the legend:

  • Magnitude more than 7.5 will be rendered with the color black.
  • Magnitude in the range between more than 6.0 and 7.5 will be rendered with the color red.
  • Magnitude in the range between more than 4.5 and 6.0 will be rendered with the color yellow.
  • Magnitude in the range between more than 3.0 and 4.5 will be rendered with the color aqua blue.
  • Magnitude less than 3.0 will be rendered with the color gray.

Prerequisites

Steps

This tutorial builds upon the Create a dashboard tutorial. Please review that tutorial to learn how to:

  • Create a dashboard.
  • Load a web map.
  • Display the web map data in the map and table elements.

If you have completed the Create a dashboard tutorial and have a dashboard you can work with, you can skip to the Enable advanced formatting section.

Copy dashboard tutorial to your organization

For this tutorial, you will use ArcGIS Assistant to copy the Recent Earthquakes Dashboard Tutorial to your organization.

  1. Log into ArcGIS Assistant using your ArcGIS Online account.

  2. Click on ArcGIS Online tab.

  3. In the Filter items... search box, type the following: Recent Earthquakes Dashboard Tutorial.

  4. Click on Recent Earthquakes Dashboard Tutorial by esri_devlabs and click Copy Item.

  5. Select your account and click Select Account.

  6. If you have a specific user account to use, select your user account and click Select User.

  7. Select your root folder or click Create new folder to create a new destination folder.

  8. Click Select Folder. The Item Title will automatically be populated by the dashboard title.

  9. Click Copy Item to copy the dashboard to your organization.

Enable advanced formatting

Before you can add any Arcade expressions to the table element, you will need to enable Advanced formatting in the table element.

  1. In the Content tab of your organization, click the Recent Earthquakes Dashboard Tutorial to view the dashboard item details.

  2. In the Item details window, click Open in ArcGIS Online.

  3. Click Edit Dashboard to configure the dashboard.

  4. Hover over the table element and expand on the icon.

  5. Click Configure.

  6. In the left-panel, click on Values and enable Advanced formatting if it has not been enabled yet.

Add Arcade expression

Now that property is enabled, you can start adding Arcade expressions to renderer rows in the table.

  1. Click the Expressions tab.

  2. In the textbox, copy and paste the code block below:

    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    var color = "";
    
    if ($datapoint["mag"] > 7.5) {
        color = "#212121";
    } else if (($datapoint["mag"] > 6) && ($datapoint["mag"] <= 7.5)) {
        color = "#FF0316";
    } else if (($datapoint["mag"] > 4.5) && ($datapoint["mag"] <= 6)) {
        color = "#F2E643";
    } else if (($datapoint["mag"] > 3) && ($datapoint["mag"] <= 4.5)) {
        color = "#6CEAE6";
    } else {
        color = "#A8A8A8";
    }
    
    return {
            cells: {
               mag: {
                displayText : $datapoint["mag"],
                textColor: color,
                backgroundColor: '',
    
    Expand
  3. Click Done to save your changes.

Your dashboard should look something like this.

Tutorials

Listed below are additional tutorials on formatting using Arcade with other dashboard elements.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.