Create an ArcGIS Online Map Viewer pop-up pie chart legend displaying the top values

Summary

In ArcGIS Online Map Viewer, Arcade expressions can be used to display the top field values within a pop-up pie chart legend. This article provides an example and instructions using Arcade expressions to create a Map Viewer pop-up pie chart legend displaying the top three languages spoken at home in Caledon, Ontario, Canada.

Procedure

1. Open the map in Map Viewer. Click Layers on the Contents (dark) toolbar and select the layer with the pop-up for editing.
2. On the Settings (light) toolbar, click Pop-ups > Options > Attribute expressions > Add expression.
3. In the editor window, specify a name for the new expression.
4. In the Expression dialog box, insert the appropriate Arcade expression, as described below.
   1. Define the array parameter storing the competing number field values and the text of the field alias property.

var <variableName1> = [
      {value: $feature.<fieldName1>, alias: " <fieldAlias1>"},
      {value: $feature.<fieldName2>, alias: " <fieldAlias2>"},
      ...
      {value: $feature.<fieldName214>, alias: " <fieldAlias214>"}
];

2. Specify the following statement to re-index the array by array values.

function getValuesArray(a){
  var valuesArray = []
  for(var i in a){
    valuesArray[i] = a[i].value;
  }
  return valuesArray;
}

3. Specify the following statement to search and compile the field aliases related to the field array.

function findAliases(topA,fullA){
  var aliases = [];
  var found = "";
  for(var i in topA){
    for(var k in fullA){
      if(topA[i] == fullA[k].value && topA[i] > 0 && Find(fullA[k].alias, found) == -1){
        found += fullA[k].alias;
        aliases[Count(aliases)] = {
          alias: fullA[k].alias,
          value: topA[i]
        };
      }
    }
  }
  return aliases;
}

4. Specify the following statement to sort the array from the highest to the lowest field value, and return the field aliases and field values.
   • For <numberOfTopValuesToDisplay>, input the desired number of top values to display. In this example, the number is 3.
   • For <textToDisplayWhenThereIsNoValue>, input the text to display if the field value is blank. In this example, the text to display is 'Nobody lives here'.

function getTopGroups(groupsArray){
    
  var values = getValuesArray(groupsArray);
  var topValues = IIF(Max(values) > 0, Top(Reverse(Sort(values)),<numberOfTopValuesToDisplay>), "<textToDisplayWhenThereIsNoValue>");
  var topAliases = findAliases(topValues,groupsArray);
    
  if(TypeOf(topValues) == "String"){
    return topValues;
  } else {
    var content = "";
    for(var i in topAliases){
      content += (i+1) + ". " + topAliases[i].alias + " - " + Text(topAliases[i].value, "#,###");
      content += IIF(i < Count(topAliases)-1, TextFormatting.NewLine, "");
    }
  }
    
  return content;
}
 
getTopGroups(<variableName1>);

Note:
The legend numbering does not directly represent the ranking when there are more than two similar reference values. For example, the third most spoken languages in the Caledon area are Tagalog, and Urdu, which are spoken in 80 households each.

The code block below shows the full working expression for the top three languages spoken at home in Caledon, Ontario, Canada.

var groups = [
      {value: $feature.MO_Arabic, alias: " Arabic"},
      {value: $feature.MO_Armenian, alias: " Armenian"},
      {value: $feature.MO_Belarusian, alias: " Belarusian"},
      {value: $feature.MO_Bengali, alias: " Bengali"},
      {value: $feature.MO_Bulgarian, alias: " Bulgarian"},
      {value: $feature.MO_Burmese, alias: " Burmese"},
      {value: $feature.MO_Catalan, alias: " Catalan"},
      {value: $feature.MO_Croatian, alias: " Croatian"},
      {value: $feature.MO_Czech, alias: " Czech"},
      {value: $feature.MO_Danish, alias: " Danish"},
      {value: $feature.MO_Dutch, alias: " Dutch"},
      {value: $feature.MO_English, alias: " English"},
      {value: $feature.MO_Finnish, alias: " Finnish"},
      {value: $feature.MO_French, alias: " French"},
      {value: $feature.MO_German, alias: " German"},
      {value: $feature.MO_Greek, alias: " Greek"},
      {value: $feature.MO_Gujarati, alias: " Gujarati"},
      {value: $feature.MO_Hakka, alias: " Hakka"},
      {value: $feature.MO_Hebrew, alias: " Hebrew"},
      {value: $feature.MO_Hindi, alias: " Hindi"},
      {value: $feature.MO_Hungarian, alias: " Hungarian"},
      {value: $feature.MO_Indonesian, alias: " Indonesian"},
      {value: $feature.MO_Iranian_Persian, alias: " IranianPersian"},
      {value: $feature.MO_Irish, alias: " Irish"},
      {value: $feature.MO_Italian, alias: " Italian"},
      {value: $feature.MO_Japanese, alias: " Japanese"},
      {value: $feature.MO_Korean, alias: " Korean"},
      {value: $feature.MO_Latvian, alias: " Latvian"},
      {value: $feature.MO_Macedonian, alias: " Macedonian"},
      {value: $feature.MO_Malay, alias: " Malay"},
      {value: $feature.MO_Mandarin, alias: " Mandarin"},
      {value: $feature.MO_Mongolian, alias: " Mongolian"},
      {value: $feature.MO_Nepali, alias: " Nepali"},
      {value: $feature.MO_Norwegian, alias: " Norwegian"},
      {value: $feature.MO_Polish, alias: " Polish"},
      {value: $feature.MO_Punjabi_Panjabi, alias: " Punjabi(Panjabi)"},
      {value: $feature.MO_Romanian, alias: " Romanian"},
      {value: $feature.MO_Russian, alias: " Russian"},
      {value: $feature.MO_Serbian, alias: " Serbian"},
      {value: $feature.MO_Sindhi, alias: " Sindhi"},
      {value: $feature.MO_Spanish, alias: " Spanish"},
      {value: $feature.MO_Swahili, alias: " Swahili"},
      {value: $feature.MO_Tamil, alias: " Tamil"},
      {value: $feature.MO_Thai, alias: " Thai"},
      {value: $feature.MO_Tibetan, alias: " Tibetan"},
      {value: $feature.MO_Turkish, alias: " Turkish"},
      {value: $feature.MO_Ukrainian, alias: " Ukrainian"},
      {value: $feature.MO_Uzbek, alias: " Uzbek"},
      {value: $feature.MO_Vietnamese, alias: " Vietnamese"},
      {value: $feature.MO_Welsh, alias: " Welsh"},
      {value: $feature.MO_Wu_Shanghainese, alias: " Wu(Shanghainese)"},
      {value: $feature.MO_Yue_Cantonese, alias: " Yue(Cantonese)"}
];

function getValuesArray(a){
  var valuesArray = []
  for(var i in a){
    valuesArray[i] = a[i].value;
  }
  return valuesArray;
}

function findAliases(topA,fullA){
  var aliases = [];
  var found = "";
  for(var i in topA){
    for(var k in fullA){
      if(topA[i] == fullA[k].value && topA[i] > 0 && Find(fullA[k].alias, found) == -1){
        found += fullA[k].alias;
        aliases[Count(aliases)] = {
          alias: fullA[k].alias,
          value: topA[i]
        };
      }
    }
  }
  return aliases;
}
 
function getTopGroups(groupsArray){
    
  var values = getValuesArray(groupsArray);
  var topValues = IIF(Max(values) > 0, Top(Reverse(Sort(values)),3), "Nobody lives here");
  var topAliases = findAliases(topValues,groupsArray);
    
  if(TypeOf(topValues) == "String"){
    return topValues;
  } else {
    var content = "";
    for(var i in topAliases){
      content += (i+1) + ". " + topAliases[i].alias + " - " + Text(topAliases[i].value, "#,###");
      content += IIF(i < Count(topAliases)-1, TextFormatting.NewLine, "");
    }
  }
    
  return content;
}
 
getTopGroups(groups);

5. Click Run for a preview of the expression result. If the required result is achieved, click Done.

6. In the Pop-ups pane, click Add content > Text.
7. Input the title of the legend and the newly created expression. In this example, the newly created expression is {expression/expr0}.
8. Click OK.

Note:
To create a pop-up pie chart displaying the top values for ArcGIS Online Map Viewer, refer to How To: Create an ArcGIS Online Map Viewer pop-up pie chart displaying the top values.

The image below shows the newly configured pop-up pie chart legend with the top three most spoken languages in Caledon, Ontario, Canada.