Create popup charts from Arcade expressions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
return {
  type: "fields",
  // defines variables calculated by the expression
  attributes: {
    field1: "value",
    field2: "value"
  }
  // the attributes to include in the fields table
  fieldInfos: [{
    fieldName: "field1"
  }, {
    fieldName: "field2"
  }],
};

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
40
41
42
43
44
// create an object to store attributes
// and an array used to store field names for the title
var attributes = {};
var fieldInfos = [];

// Query the number of crimes that intersect a selected polygon
var crimes = Intersects(
  $feature,
  FeatureSetByName($map, "San Diego crimes", ["desc_"])
);

// Queries the count of crimes grouped by the "desc_" field
var stats = GroupBy(crimes, ["desc_"],
  [{ name: "total", expression: "1", statistic: "count" }]
);

// Orders the results in descending order by the total count
// excludes crimes that don't have a classification
var topCrimes = Top(OrderBy(Filter(stats, "desc_ <> ''"), "total desc"), 3);

if(Count(topCrimes) == 0){
  return {
    type: "text",
    text: "No crimes committed in this area"
  };
}
// iterate through each crime, add its count to the attributes
// and create an associated fieldInfo to include it in the table
for(var item in topCrimes){
  var num_crimes = item.total;
  var crimeType = item["desc_"];
  attributes[crimeType] = num_crimes;
  Push(fieldInfos, {
    fieldName: crimeType
  });
}

// return the fieldInfos as defined
// by the FieldsContent specification
return {
  type: "fields",
  fieldInfos: fieldInfos,
  attributes: attributes
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
return {
  type: "media",
  // defines attribute values calculated in the expression
  // values for all charts must be included here
  attributes: {
    field1: number,
    field2: number
  },
  title: "Media content title",
  mediaInfos: [
    {
      type: "piechart",  // can also be "columnchart", "linechart", "piechart", "image"
      title: "Chart title",
      value: {
        // the list of attribute values to include in the chart
        fields: [ "field1", "field2" ]
      }
    }
  // you can define more charts here
  ]
}

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
// create an object to store attributes
// and arrays used to store field names for each chart
var attributes = {};
var totalFields = [];
var firstCrimeFields = [];
var secondCrimeFields = [];
var thirdCrimeFields = [];

// Query the number of crimes that intersect a selected polygon
var crimes = Intersects(
  $feature,
  FeatureSetByName($map,"San Diego crimes", ["desc_", "is_night"])
);

// Queries the count of crimes and the number that occurred
// at night grouped by the "desc_" field
var stats = GroupBy(crimes, ["desc_"],
  [
    { name: "total", expression: "1", statistic: "count" },
    { name: "night", expression: "is_night", statistic: "sum" }
  ]
);

// Orders the results in descending order by the total count
// excludes crimes that don't have a classification
var topCrimes = Top(OrderBy(Filter(stats, "desc_ <> ''"), "total desc"), 3);

if(Count(topCrimes) == 0){
  return {
    type: "text",
    text: "No crimes committed in this area"
  };
}

// iterate through each crime type, adding each crime's statistic
// to the attributes dictionary and to the appropriate
// chart's fieldNames array
var i = 0, firstCrime, secondCrime, thirdCrime;
for(var t in topCrimes){
  i++;
  var type = t.desc_;
  var night = t.night;
  var daytime = t.total - t.night;
  attributes[type] = t.total;
  Push(totalFields, type);

  var nightFieldName = `Total of crime ${i} that occurred at night`;
  var dayFieldName = `Total of crime ${i} that occurred in daytime`;

  attributes[nightFieldName] = night;
  attributes[dayFieldName] = daytime;

  if(i == 1){
    firstCrime = type;
    Push(firstCrimeFields, nightFieldName);
    Push(firstCrimeFields, dayFieldName);
  }
  if(i == 2){
    secondCrime = type;
    Push(secondCrimeFields, nightFieldName);
    Push(secondCrimeFields, dayFieldName);
  }
  if(i == 3){
    thirdCrime = type;
    Push(thirdCrimeFields, nightFieldName);
    Push(thirdCrimeFields, dayFieldName);
  }
}

// Add the attributes to the media element
// create each chart, specifying its type
// and setting the fields needed for it to render
return {
  type: "media",
  attributes: attributes,
  title: "Crime Summary",
  mediaInfos: [{
    type: "columnchart",
    value: {
      fields: totalFields
    }
  }, {
    type: "piechart",
    title: firstCrime,
    value: {
      fields: firstCrimeFields
    }
  }, {
    type: "piechart",
    title: secondCrime,
    value: {
      fields: secondCrimeFields
    }
  }, {
    type: "piechart",
    title: thirdCrime,
    value: {
      fields: thirdCrimeFields
    }
  }]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// get the expressions from scripts defined outside JavaScript
const arcadeFields = document.getElementById("crimes-list").text;
const arcadeChart = document.getElementById("crimes-chart").text;

blockGroup.popupTemplate = {
  title: "Top 3 crimes",
  content: [{
    type: "expression",
    expressionInfo: {
      expression: arcadeFields
    }
  }, {
    type: "expression",
    expressionInfo: {
      expression: arcadeChart
    }
  }]
};