{"id":976672,"date":"2020-08-19T08:30:17","date_gmt":"2020-08-19T15:30:17","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=976672"},"modified":"2024-11-01T00:17:24","modified_gmt":"2024-11-01T07:17:24","slug":"generate-data-for-interactive-charts-using-arcade-in-popups","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups","title":{"rendered":"Generate data for interactive charts using Arcade in popups"},"author":6561,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[777102,738191,22941],"tags":[32551,32521,585551,30111,212872],"industry":[],"product":[36831,36601],"class_list":["post-976672","blog","type-blog","status-publish","format-standard","hentry","category-arcade","category-developers","category-mapping","tag-arcade","tag-arcade-expressions","tag-covid-19","tag-data-visualization","tag-popups","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Generate a series of Arcade expressions to create a gallery of interactive charts in your popup.","flexible_content":[{"acf_fc_layout":"content","content":"

Recently, I built a web app<\/a> using the ArcGIS API for JavaScript<\/a> (ArcGIS JS API) where I visualized COVID-19 data in a time series animation. The app allows users to explore various visualizations of COVID-19 cases and deaths through time. <\/p>\n

While the visuals and the animation stand well on their own, I wanted to present meaningful information to users on a county-by-county basis. On each click they would see a popup, complete with informative figures and charts. However, I had a problem — not all the data were available to me as field values.<\/p>\n

Thanks to ArcGIS Arcade<\/a> and a few JavaScript functions, I wrangled the data into a series of six charts. Despite the more than (gulp) 1,200 Arcade expressions needed to make the charts work, I was pleasantly surprised the popup still displayed with minimal delay. Read on to learn how you can generate Arcade expressions for displaying effective interactive charts in popups.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":976922,"id":976922,"title":"popup-overview 2","filename":"popup-overview-2.png","filesize":503189,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-overview-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\/popup-overview-2","alt":"In this web app visualizing COVID-19 data, the popup contains a series of five charts describe how a variable has changed for the selected feature over time.","author":"6561","description":"","caption":"In this web app visualizing COVID-19 data, the popup contains a series of six charts describing how a variable has changed for the selected feature over time.","name":"popup-overview-2","status":"inherit","uploaded_to":976672,"date":"2020-08-14 16:13:58","modified":"2020-08-17 19:32:17","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2058,"height":1196,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-overview-2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-overview-2.png","medium-width":449,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-overview-2.png","medium_large-width":768,"medium_large-height":446,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-overview-2.png","large-width":1858,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-overview-2-1536x893.png","1536x1536-width":1536,"1536x1536-height":893,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-overview-2-2048x1190.png","2048x2048-width":2048,"2048x2048-height":1190,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-overview-2-800x465.png","card_image-width":800,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-overview-2-1858x1080.png","wide_image-width":1858,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/covid19viz\/"},{"acf_fc_layout":"content","content":"

Check out this blog post<\/a> where I describe the methodology behind creating each of the visualizations in this app.<\/p>\n

Popups and charts<\/h2>\n

In the ArcGIS JS API, you can define popups<\/a> containing one or more elements that display data about a selected feature. In most cases, the data come from fields in the layer. Field names are typically wrapped in curly braces to act as placeholders for the data values within a content element of a PopupTemplate<\/a>.<\/p>\n

\/\/ Popup template displaying the winner of an election<\/span>\r\nlayer.popupTemplate = {\r\n  title: \"{COUNTY}, {STATE}\"<\/span>,\r\n  content: \"{WINNER} won the presidential primary here with {WINNER_VOTES}.\"<\/span>\r\n};\r\n<\/code><\/pre>\n
When it comes to charts, you can define bar<\/a>, column<\/a>, pie<\/a>, or line<\/a> charts by referencing data as an array of field names. The following snippet shows how you can create a column chart comparing the number of one-vehicle, two-vehicle, or three-vehicle households in a layer of census tracts, assuming these numbers are stored in separate fields.<\/p>\n
layer.popupTemplate = {\r\n  title: \"{COUNTY}, {STATE}\"<\/span>,\r\n  content: [{\r\n    type: \"media\"<\/span>,\r\n    mediaInfos: [\r\n      {\r\n        type: \"column-chart\"<\/span>,\r\n        title: \"Number of households with one, two, or three registered vehicles\"<\/span>,\r\n        value: {\r\n          fields: [\r\n            \"ONE_VEHICLE\"<\/span>,\r\n            \"TWO_VEHICLES\"<\/span>,\r\n            \"THREE_VEHICLES\"<\/span>\r\n          ]\r\n        }\r\n      }\r\n    ]\r\n  }]\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":982102,"id":982102,"title":"Screen Shot 2020-08-18 at 3.33.54 PM","filename":"Screen-Shot-2020-08-18-at-3.33.54-PM.png","filesize":830853,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\/screen-shot-2020-08-18-at-3-33-54-pm","alt":"This map visualizes each census tract based on the most common number of vehicles in each household. The popup displays a column chart to compare the number of 1-vehicle households, 2-vehicle households, and 3-vehicle households.","author":"6561","description":"","caption":"This map visualizes each census tract based on the predominant number of vehicles in each household. The popup displays a column chart to compare the number of 1-vehicle households, 2-vehicle households, and 3-vehicle households.","name":"screen-shot-2020-08-18-at-3-33-54-pm","status":"inherit","uploaded_to":976672,"date":"2020-08-18 22:41:00","modified":"2020-08-31 22:48:27","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2400,"height":1574,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM.png","medium-width":398,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM.png","medium_large-width":768,"medium_large-height":504,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM.png","large-width":1647,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM-1536x1007.png","1536x1536-width":1536,"1536x1536-height":1007,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM-2048x1343.png","2048x2048-width":2048,"2048x2048-height":1343,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM-709x465.png","card_image-width":709,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM-1647x1080.png","wide_image-width":1647,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/abNmzKK?editors=0010"},{"acf_fc_layout":"content","content":"
Creating new values from Arcade expressions<\/h2>\n
Sometimes the data you want to illustrate needs to be derived from one or more existing fields. It may even be stored as a non-number type like a string, or date. <\/p>\n
This was the case with the Viral app<\/a>, but it also went beyond not having all the data I wanted to display. The data I did have was represented as multiple values in a single string, not as a number.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":971342,"id":971342,"title":"data","filename":"data-e1597436904644.png","filesize":411061,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/data-e1597436904644.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/animate-and-explore-covid-19-data-through-time\/data-4","alt":"Several days worth of COVID-19 data reported from Alameda, California, USA. The numbers highlighted in yellow indicate the reporting date in the field name. Numbers highlighted in red are total cases. Numbers highlighted in black are total deaths.","author":"6561","description":"","caption":"Several days worth of COVID-19 data reported from Alameda, California, USA. The numbers highlighted in yellow indicate the reporting date in the field name. Numbers highlighted in red are total cases. Numbers highlighted in black are total deaths.","name":"data-4","status":"inherit","uploaded_to":970071,"date":"2020-08-10 23:33:32","modified":"2020-08-17 19:53:35","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":450,"height":631,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/data-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/data-e1597436904644.png","medium-width":186,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/data-e1597436904644.png","medium_large-width":450,"medium_large-height":631,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/data-e1597436904644.png","large-width":450,"large-height":631,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/data-e1597436904644.png","1536x1536-width":450,"1536x1536-height":631,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/data-e1597436904644.png","2048x2048-width":450,"2048x2048-height":631,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/data-332x465.png","card_image-width":332,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/data-e1597436904644.png","wide_image-width":450,"wide_image-height":631}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/services9.arcgis.com\/6Hv9AANartyT7fJW\/ArcGIS\/rest\/services\/JHU_last14\/FeatureServer\/2\/query?where=Combined_Key+%3D%27Alameda%2C+California%2C+US%27&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&resultType=none&distance=0.0&units=esriSRUnit_Meter&returnGeodetic=false&outFields=*&returnGeometry=false&returnCentroid=false&featureEncoding=esriDefault&multipatchOption=xyFootprint&maxAllowableOffset=&geometryPrecision=&outSR=&datumTransformation=&applyVCSProjection=false&returnIdsOnly=false&returnUniqueIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&returnQueryGeometry=false&returnDistinctValues=false&cacheHint=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&having=&resultOffset=&resultRecordCount=&returnZ=false&returnM=false&returnExceededLimitFeatures=true&quantizationParameters=&sqlFormat=none&f=html&token="},{"acf_fc_layout":"content","content":"
This data format appears strange, but it was organized this way for good reason. The goal was to map multiple COVID-19 variables for each day and animate them through time. Each field in the layer represents all the data for one day, which could potentially contain several values, separated with a pipe character (i.e. |<\/code>). This format allowed us to have all the relevant information for each feature in one layer, where the number of cases and deaths were stored in a single field for each day. <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":985562,"id":985562,"title":"Screen Shot 2020-08-21 at 11.09.16 AM","filename":"Screen-Shot-2020-08-21-at-11.09.16-AM.png","filesize":32923,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-21-at-11.09.16-AM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\/screen-shot-2020-08-21-at-11-09-16-am","alt":"The database table highlighting the number of COVID-19 cases and deaths reported each day for a single county. Each column or field represents the data reported for all features in a given day.","author":"6561","description":"","caption":"The database table highlighting the number of COVID-19 cases and deaths reported each day for a single county. Each column, or field, represents the data reported for all features in a given day.","name":"screen-shot-2020-08-21-at-11-09-16-am","status":"inherit","uploaded_to":976672,"date":"2020-08-21 18:10:11","modified":"2020-08-21 18:13:25","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1052,"height":377,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-21-at-11.09.16-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-21-at-11.09.16-AM.png","medium-width":464,"medium-height":166,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-21-at-11.09.16-AM.png","medium_large-width":768,"medium_large-height":275,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-21-at-11.09.16-AM.png","large-width":1052,"large-height":377,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-21-at-11.09.16-AM.png","1536x1536-width":1052,"1536x1536-height":377,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-21-at-11.09.16-AM.png","2048x2048-width":1052,"2048x2048-height":377,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-21-at-11.09.16-AM-826x296.png","card_image-width":826,"card_image-height":296,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-21-at-11.09.16-AM.png","wide_image-width":1052,"wide_image-height":377}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-21-at-11.09.16-AM.png"},{"acf_fc_layout":"content","content":"
Read the Get to know the data<\/a> section in a previous blog to learn more about the thinking behind this data format.<\/p>\n
This is where Arcade comes in. Arcade allows you to parse and cast these values as numbers, and use them to calculate other values. For example, the following expression retrieves the number of cases from a field value, formats it, and returns it for display in the popup.<\/p>\n
\/\/ value on 8\/4\/2020 is \"5082|27\" or 5,082 cases and 27 deaths<\/span>\r\nvar<\/span> currentDayValue = $feature[\"DAYSTRING_08_04_2020\"<\/span>];\r\n\r\n\/\/ returns [ \"5082\", \"27\" ]<\/span>\r\nvar<\/span> parts = Split(currentDayValue, \"|\"<\/span>);\r\n\r\n\/\/ returns 5,082<\/span>\r\nvar<\/span> cases = Number<\/span>(parts[0<\/span>]);\r\nreturn<\/span> Text(cases, \"#,###\"<\/span>);\r\n<\/code><\/pre>\n
Display a value from an Arcade expression<\/h2>\n
Arcade expressions are managed in the expressionInfos<\/a> property of the PopupTemplate. You reference the result of the expression as you would a value coming from a field, except the term expression\/<\/code> precedes the name of the expression.<\/p>\n
layer.popupTemplate = {\r\n  title: \"{COUNTY}, {STATE}\"<\/span>,\r\n  content: `\r\n    {expression\/cases} cases were reported here,\r\n    with {expression\/deaths} resulting in death.`<\/span>,\r\n  expressionInfos: [{\r\n    name: \"cases\"<\/span>,\r\n    title: \"Total COVID-19 cases\"<\/span>,\r\n    expression: `\r\n      \/\/ value on 8\/4\/2020 is \"5082|27\" or 5,082 cases and 27 deaths\r\n      var currentDayValue = $feature[\"DAYSTRING_08_04_2020\"];\r\n\r\n      \/\/ returns [ \"5082\", \"27\" ]\r\n      var parts = Split(currentDayValue, \"|\");\r\n\r\n      \/\/ returns 5082\r\n      var cases = Number(parts[0]);\r\n      return Text(cases, \"#,###\");\r\n    `<\/span>\r\n  }, {\r\n    name: \"deaths\"<\/span>,\r\n    title: \"COVID-19 related deaths\"<\/span>,\r\n    expression: `\r\n      \/\/ value on 8\/4\/2020 is \"5082|27\" or 5,082 cases and 27 deaths\r\n      var currentDayValue = $feature[\"DAYSTRING_08_04_2020\"];\r\n\r\n      \/\/ returns [ \"5082\", \"27\" ]\r\n      var parts = Split(currentDayValue, \"|\");\r\n\r\n      \/\/ returns 27\r\n      var deaths = Number(parts[1]);\r\n      return Text(deaths, \"#,###\");\r\n    `<\/span>\r\n  }]\r\n};\r\n<\/code><\/pre>\n
This allowed me to display several meaningful variables in the popup with a text<\/code> element and a fields<\/code> element.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":977002,"id":977002,"title":"popup-text","filename":"popup-text.png","filesize":21130,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-text.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\/popup-text","alt":"A popup describing key COVID-19 statistics for a county in the United States.","author":"6561","description":"","caption":"","name":"popup-text","status":"inherit","uploaded_to":976672,"date":"2020-08-14 16:14:19","modified":"2020-08-17 19:53:22","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":449,"height":325,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-text-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-text.png","medium-width":361,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-text.png","medium_large-width":449,"medium_large-height":325,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-text.png","large-width":449,"large-height":325,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-text.png","1536x1536-width":449,"1536x1536-height":325,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-text.png","2048x2048-width":449,"2048x2048-height":325,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-text.png","card_image-width":449,"card_image-height":325,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-text.png","wide_image-width":449,"wide_image-height":325}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/popup-text.png"},{"acf_fc_layout":"content","content":"
Generating expressions<\/h2>\n
While all that content is good, I really wanted to add some charts that displayed how some of these variables changed over time, including total cases, deaths, doubling time, new cases, estimated active cases and recoveries.<\/p>\n
The challenge with creating charts from Arcade expressions is that each chart object in the popup template expects a series of numeric field names. Because of the data format, I needed to reference an Arcade expression that generated each data point for each chart. <\/p>\n
Given the number of days since the first reported case of COVID-19 had already passed the 200-day mark, that meant I needed more than 200 expressions for each of the six charts (or more than 1,200 expressions in total). <\/p>\n
Since writing that many individual expressions would be absurd, I wrote a few functions in JavaScript to generate all the expressions I needed and place them in their proper places in the PopupTemplate. I was satisfied with the resulting charts, which you can observe in the image below (click the image to enlarge it).<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":977952,"id":977952,"title":"banner-6","filename":"banner-6.jpg","filesize":50644,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-6.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\/banner-6-2","alt":"A series of charts whose values were returned from Arcade expressions.","author":"6561","description":"","caption":"","name":"banner-6-2","status":"inherit","uploaded_to":976672,"date":"2020-08-14 23:44:22","modified":"2020-08-17 19:52:52","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-6-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-6.jpg","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-6.jpg","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-6.jpg","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-6-1536x864.jpg","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-6.jpg","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-6-826x465.jpg","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-6.jpg","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-6.jpg"},{"acf_fc_layout":"content","content":"
I’ll use the active cases<\/strong> chart to demonstrate how this works. Since the number of active cases is not reliably reported, the CDC approximates this number<\/a> with a formula:<\/p>\n
\r\nactive cases =\r\n  (100% of new cases from last 14 days) +\r\n  (19% of cases from days 15-25) +\r\n  (5% of cases from days 26-49) -\r\n  deaths\r\n<\/code>\r\n<\/pre>\n
Since I have all the data I need to compute this value in various fields of each feature, I wrote a function that generates the Arcade expression that approximates the number of active COVID-19 cases for a given date.<\/p>\n
Note the getFieldFromDate<\/code> function, which builds the field name for the data required from specific dates. <\/p>\n
\nExpand to view the function<\/summary>\n
export<\/span> function<\/span> createActiveCasesExpression<\/span>(currentDateFieldName: string<\/span>)<\/span>{\r\n  return<\/span> `\r\n    function getFieldFromDate(d) {\r\n      var fieldName = \"DAYSTRING_\" + Text(d, \"MM_DD_Y\");\r\n      return fieldName;\r\n    }\r\n\r\n    var currentDayFieldName = \"${currentDateFieldName}<\/span>\";\r\n    var currentDayValue = $feature[currentDayFieldName];\r\n    var currentDayValueParts = Split(currentDayValue, \"|\");\r\n    var currentDayCases = Number(currentDayValueParts[0]);\r\n    var currentDayDeaths = Number(currentDayValueParts[1]);\r\n\r\n    var parts = Split(Replace(currentDayFieldName,\"DAYSTRING_\",\"\"), \"_\");\r\n    var currentDayFieldDate = Date(Number(parts[2]), Number(parts[0])-1, Number(parts[1]));\r\n\r\n    \/\/ Active Cases = (100% of new cases from last 14 days\r\n    \/\/ + 19% of days 15-25 + 5% of days 26-49) - Death Count\r\n\r\n    var daysAgo14 = DateAdd(currentDayFieldDate, -14, 'days');\r\n    var daysAgo15 = DateAdd(currentDayFieldDate, -15, 'days');\r\n    var daysAgo25 = DateAdd(currentDayFieldDate, -25, 'days');\r\n    var daysAgo26 = DateAdd(currentDayFieldDate, -26, 'days');\r\n    var daysAgo49 = DateAdd(currentDayFieldDate, -49, 'days');\r\n\r\n    var startDate = Date(2020, 0, 22);\r\n\r\n    var deaths = currentDayDeaths;\r\n\r\n    if (daysAgo15 < startDate){\r\n      return currentDayCases - deaths;\r\n    }\r\n\r\n    var daysAgo14FieldName = getFieldFromDate(daysAgo14);\r\n    var daysAgo14Value = $feature[daysAgo14FieldName];\r\n    var daysAgo14ValueParts = Split(daysAgo14Value, \"|\");\r\n    var daysAgo14Cases = Number(daysAgo14ValueParts[0]);\r\n    var daysAgo14Deaths = Number(daysAgo14ValueParts[1]);\r\n\r\n    var daysAgo15FieldName = getFieldFromDate(daysAgo15);\r\n    var daysAgo15Value = $feature[daysAgo15FieldName];\r\n    var daysAgo15ValueParts = Split(daysAgo15Value, \"|\");\r\n    var daysAgo15Cases = Number(daysAgo15ValueParts[0]);\r\n    var daysAgo15Deaths = Number(daysAgo15ValueParts[1]);\r\n\r\n    if (daysAgo26 < startDate){\r\n      return Round(\r\n        (currentDayCases - daysAgo14Cases) +\r\n        ( 0.19 * daysAgo15Cases )\r\n        - deaths\r\n      );\r\n    }\r\n\r\n    var daysAgo25FieldName = getFieldFromDate(daysAgo25);\r\n    var daysAgo25Value = $feature[daysAgo25FieldName];\r\n    var daysAgo25ValueParts = Split(daysAgo25Value, \"|\");\r\n    var daysAgo25Cases = Number(daysAgo25ValueParts[0]);\r\n    var daysAgo25Deaths = Number(daysAgo25ValueParts[1]);\r\n\r\n    var daysAgo26FieldName = getFieldFromDate(daysAgo26);\r\n    var daysAgo26Value = $feature[daysAgo26FieldName];\r\n    var daysAgo26ValueParts = Split(daysAgo26Value, \"|\");\r\n    var daysAgo26Cases = Number(daysAgo26ValueParts[0]);\r\n    var daysAgo26Deaths = Number(daysAgo26ValueParts[1]);\r\n\r\n    if (daysAgo49 < startDate){\r\n      return Round(\r\n        (currentDayCases - daysAgo14Cases) +\r\n        ( 0.19 * ( daysAgo15Cases - daysAgo25Cases ) ) +\r\n        ( 0.05 * daysAgo26Cases ) -\r\n        deaths\r\n      );\r\n    }\r\n\r\n    var daysAgo49FieldName = getFieldFromDate(daysAgo49);\r\n    var daysAgo49Value = $feature[daysAgo49FieldName];\r\n    var daysAgo49ValueParts = Split(daysAgo49Value, \"|\");\r\n    var daysAgo49Cases = Number(daysAgo49ValueParts[0]);\r\n    var daysAgo49Deaths = Number(daysAgo49ValueParts[1]);\r\n\r\n    deaths = currentDayDeaths - daysAgo49Deaths;\r\n    var activeEstimate = (currentDayCases - daysAgo14Cases) +\r\n      ( 0.19 * ( daysAgo15Cases - daysAgo25Cases ) ) +\r\n      ( 0.05 * ( daysAgo26Cases - daysAgo49Cases) )\r\n      - deaths;\r\n\r\n    return Round(activeEstimate);\r\n  `<\/span>;\r\n}\r\n<\/code><\/pre>\n<\/details>\n
This expression and its containing expressionInfo<\/code> object needed to be generated for each day<\/strong> in the dataset. The following function does this by taking the date of the first reported case and yesterday’s date as the startDate<\/code> and endDate<\/code> parameters.<\/p>\n
\nView code snippet<\/summary>\n
function<\/span> createTotalActiveCasesExpressionInfos<\/span>(startDate: Date, endDate: Date<\/span>) <\/span>{\r\n  const<\/span> expressionInfos: ExpressionInfo[] = [];\r\n\r\n  let<\/span> currentDate = startDate;\r\n\r\n  while<\/span> (currentDate <= endDate){\r\n    const<\/span> currentFieldName = getFieldFromDate(currentDate);\r\n    expressionInfos.push( new<\/span> ExpressionInfo({\r\n      expression: createActiveCasesExpression(currentFieldName),\r\n      name: `total-active-${currentFieldName}<\/span>`<\/span>,\r\n      title: formatDate(currentDate)\r\n    }));\r\n    currentDate = getNextDay(currentDate);\r\n  }\r\n  return<\/span> expressionInfos;\r\n}\r\n<\/code><\/pre>\n
<\/code>
\n<\/details>\n
Putting it together<\/h2>\n
Once the expressions and their info objects are generated, I generate FieldInfo<\/a> objects for formatting tooltip values, and the list of expression names to reference in the chart.<\/p>\n
const<\/span> activeExpressionInfos =\r\n  createTotalActiveCasesExpressionInfos(initialTimeExtent.start, initialTimeExtent.end);\r\nconst<\/span> activeExpressionNameList =\r\n  activeExpressionInfos.map( expressionInfo => `expression\/${expressionInfo.name}<\/span>`<\/span> );\r\nconst<\/span> activeExpressionFieldInfos =\r\nactiveExpressionNameList.map(function<\/span>(name:string<\/span>)<\/span>{\r\n  return<\/span> {\r\n    fieldName: name,\r\n    format: {\r\n      places: 0<\/span>,\r\n      digitSeparator: true<\/span>\r\n    }\r\n  };\r\n});\r\n<\/code><\/pre>\n
With all the required elements now created, the popup template can then be pieced together.<\/p>\n
\nView code snippet<\/summary>\n
layer.popupTemplate = {\r\n  title: `{Admin2}, {Province_State}, {Country_Region}`<\/span>,\r\n  \/\/ request all data at once to improve UX<\/span>\r\n  outFields: [\"*\"<\/span>],\r\n  content: [\r\n    \/\/ include other text and<\/span>\r\n    \/\/ fieldInfos content items here<\/span>\r\n    {\r\n      type: \"media\"<\/span>,\r\n      mediaInfos: [\r\n        {\r\n          type: \"line-chart\"<\/span>,\r\n          title: \"Estimated active cases\"<\/span>,\r\n          value: {\r\n            fields: activeExpressionNameList\r\n          }\r\n        }\r\n        \/\/ include other charts here<\/span>\r\n      ]\r\n    }\r\n  ],\r\n  fieldInfos: activeExpressionFieldInfos,\r\n  \/\/ concat field infos from other content elements<\/span>\r\n  expressionInfos: activeExpressionInfos\r\n  \/\/ concat expressionInfos from other charts and tables<\/span>\r\n};\r\n<\/code><\/pre>\n<\/details>\n
Once added to the PopupTemplate, the user can now see an interactive chart representing active COVID-19 cases as they increased and decreased over time.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":976982,"id":976982,"title":"tooltips","filename":"tooltips.png","filesize":10850,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/tooltips.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\/tooltips","alt":"An interactive chart displaying how the number of active COVID-19 cases has changed over time.","author":"6561","description":"","caption":"","name":"tooltips","status":"inherit","uploaded_to":976672,"date":"2020-08-14 16:14:15","modified":"2020-08-17 19:52:08","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":440,"height":292,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/tooltips-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/tooltips.png","medium-width":393,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/tooltips.png","medium_large-width":440,"medium_large-height":292,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/tooltips.png","large-width":440,"large-height":292,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/tooltips.png","1536x1536-width":440,"1536x1536-height":292,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/tooltips.png","2048x2048-width":440,"2048x2048-height":292,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/tooltips.png","card_image-width":440,"card_image-height":292,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/tooltips.png","wide_image-width":440,"wide_image-height":292}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Final Thoughts<\/h2>\n
While the popup performs reasonably well with so many Arcade expressions, it can still take a while to load if the user clicks an area that returns several features. The number of expressions grows as the layer updates with new data each day. So I may need to simplify the popup as the pandemic matures.<\/p>\n
Also, the popup is considerably slower when opened on mobile devices. Therefore, I disabled it and degraded other parts of the app when a mobile device is detected.<\/p>\n
On a final note, the experience for creating many chart values with Arcade expressions certainly isn’t ideal. This workflow is a bit hard to follow and takes some effort to replicate. The ArcGIS JS API team is exploring ways to improve the user and developer experience for creating charts from Arcade expressions. This includes prototyping the ability to author a single expression that returns multiple values per chart, as opposed to authoring many expressions that return only one value each.<\/p>\n
Regardless, you can use the techniques outlined in this post to create charts from Arcade expressions today!<\/p>\n"}],"authors":[{"ID":6561,"user_firstname":"Kristian","user_lastname":"Ekenes","nickname":"Kristian Ekenes","user_nicename":"kekenes","display_name":"Kristian Ekenes","user_email":"KEkenes@esri.com","user_url":"https:\/\/github.com\/ekenes","user_registered":"2018-03-02 00:18:32","user_description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","user_avatar":""}],"related_articles":[{"ID":970071,"post_author":"6561","post_date":"2020-08-13 08:30:22","post_date_gmt":"2020-08-13 15:30:22","post_content":"","post_title":"Animate and explore COVID-19 data through time","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"animate-and-explore-covid-19-data-through-time","to_ping":"","pinged":"","post_modified":"2020-08-19 08:37:55","post_modified_gmt":"2020-08-19 15:37:55","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=970071","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"2","filter":"raw"},{"ID":403392,"post_author":"6561","post_date":"2019-01-15 08:00:41","post_date_gmt":"2019-01-15 16:00:41","post_content":"","post_title":"Create powerful popups in web apps with Arcade feature sets","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"create-powerful-popups-in-web-apps-with-arcade-feature-sets","to_ping":"","pinged":"","post_modified":"2024-11-11 12:35:28","post_modified_gmt":"2024-11-11 20:35:28","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=403392","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":199072,"post_author":"6561","post_date":"2018-06-05 08:00:08","post_date_gmt":"2018-06-05 08:00:08","post_content":"","post_title":"Generate Arcade expressions for data exploration web apps","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"generate-arcade-expressions-for-data-exploration-web-apps","to_ping":"","pinged":"","post_modified":"2024-11-11 12:37:33","post_modified_gmt":"2024-11-11 20:37:33","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=199072","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/card-map.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-map.jpg"},"yoast_head":"\nGenerate data for interactive charts using Arcade in popups<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generate data for interactive charts using Arcade in popups\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T07:17:24+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Generate data for interactive charts using Arcade in popups\",\"datePublished\":\"2020-08-19T15:30:17+00:00\",\"dateModified\":\"2024-11-01T07:17:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\"},\"wordCount\":9,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"arcade\",\"arcade expressions\",\"COVID-19\",\"data visualization\",\"popups\"],\"articleSection\":[\"Arcade\",\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\",\"name\":\"Generate data for interactive charts using Arcade in popups\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2020-08-19T15:30:17+00:00\",\"dateModified\":\"2024-11-01T07:17:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generate data for interactive charts using Arcade in popups\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\",\"name\":\"Kristian Ekenes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"caption\":\"Kristian Ekenes\"},\"description\":\"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.\",\"sameAs\":[\"https:\/\/github.com\/ekenes\",\"https:\/\/www.linkedin.com\/in\/kristian-ekenes\/\",\"https:\/\/x.com\/kekenes\"],\"gender\":\"male\",\"jobTitle\":\"Principal Product Engineer\",\"worksFor\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Generate data for interactive charts using Arcade in popups","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups","og_locale":"en_US","og_type":"article","og_title":"Generate data for interactive charts using Arcade in popups","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-11-01T07:17:24+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Generate data for interactive charts using Arcade in popups","datePublished":"2020-08-19T15:30:17+00:00","dateModified":"2024-11-01T07:17:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups"},"wordCount":9,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["arcade","arcade expressions","COVID-19","data visualization","popups"],"articleSection":["Arcade","Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups","name":"Generate data for interactive charts using Arcade in popups","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2020-08-19T15:30:17+00:00","dateModified":"2024-11-01T07:17:24+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Generate data for interactive charts using Arcade in popups"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b","name":"Kristian Ekenes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","caption":"Kristian Ekenes"},"description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","sameAs":["https:\/\/github.com\/ekenes","https:\/\/www.linkedin.com\/in\/kristian-ekenes\/","https:\/\/x.com\/kekenes"],"gender":"male","jobTitle":"Principal Product Engineer","worksFor":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes"}]}},"text_date":"August 19, 2020","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/banner-map.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":32551,"name":"arcade","slug":"arcade","term_group":0,"term_taxonomy_id":32551,"taxonomy":"post_tag","description":"","parent":0,"count":113,"filter":"raw"},{"term_id":32521,"name":"arcade expressions","slug":"arcade-expressions","term_group":0,"term_taxonomy_id":32521,"taxonomy":"post_tag","description":"","parent":0,"count":27,"filter":"raw"},{"term_id":585551,"name":"COVID-19","slug":"covid-19","term_group":0,"term_taxonomy_id":585551,"taxonomy":"post_tag","description":"","parent":0,"count":72,"filter":"raw"},{"term_id":30111,"name":"data visualization","slug":"data-visualization","term_group":0,"term_taxonomy_id":30111,"taxonomy":"post_tag","description":"","parent":0,"count":97,"filter":"raw"},{"term_id":212872,"name":"popups","slug":"popups","term_group":0,"term_taxonomy_id":212872,"taxonomy":"post_tag","description":"","parent":0,"count":12,"filter":"raw"}],"category_data":[{"term_id":777102,"name":"Arcade","slug":"arcade","term_group":0,"term_taxonomy_id":777102,"taxonomy":"category","description":"","parent":0,"count":98,"filter":"raw"},{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":420,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/976672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/6561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=976672"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/976672\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=976672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=976672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=976672"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=976672"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=976672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Check out this GitHub repo<\/a>, which contains all the source code, to see how the popupTemplate<\/a> is assembled.<\/p>\n
But you can display more than just text<\/a> in popups. You can add tables<\/a>, attachments<\/a>, images<\/a>, charts<\/a>, and other custom<\/a> content such as widgets and HTML elements.<\/p>\n