{"id":344161,"date":"2020-06-15T08:16:51","date_gmt":"2020-06-15T15:16:51","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcwatch&p=344161"},"modified":"2020-07-09T08:29:13","modified_gmt":"2020-07-09T15:29:13","slug":"learn-to-add-charts-to-pop-ups-in-arcgis-online","status":"publish","type":"arcwatch","link":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/learn-to-add-charts-to-pop-ups-in-arcgis-online","title":{"rendered":"Learn to Add Charts to Pop-ups in ArcGIS Online"},"content":{"rendered":"","protected":false},"author":1172,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[10392],"tags":[163382,419082,411322],"arcwatch_issues":[449841],"class_list":["post-344161","arcwatch","type-arcwatch","status-publish","format-standard","hentry","category-arcgis-online","tag-arcgis-online","tag-charts","tag-pop-ups","arcwatch_issues-august-2020","arcwatch_sections-the-tip"],"acf":{"short_description":"Learn to add charts to pop-ups in ArcGIS Online by following these step-by-step instructions from Esri technology evangelist Bern Szukalski. ","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"Charts in pop-ups in ArcGIS Online<\/a> provide a visual and meaningful way to display numeric attribute information. You can add pie, bar, column, and line charts.\r\n\r\nBar and column charts\u00a0are best used to show data in discrete categories. Spaces between the elements separate the values.\r\n\r\nYou can use line charts to show change over time or a progression. A line chart implies an inherent order, progressing from left to right.\r\n\r\nPie charts\u00a0are effective for showing the parts of a whole. All the attributes shown in the pie should add up to 100 percent.\r\n\r\nIn this tip, you will learn how to configure bar, column, line, and pie charts in layer pop-ups. The examples focus on change in worldwide population over time and the lot value and improvements value of property in Peoria, Illinois.\r\n\r\nOpen the\u00a0completed map<\/a>\u00a0to view the configured pop-up charts. Click any feature to view the bar, column, and line charts. Click the arrow to advance to the next chart."},{"acf_fc_layout":"image","image":347521,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Use the bookmarks to navigate from World Population to Home Values."},{"acf_fc_layout":"image","image":347551,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Click any feature to view the pie chart showing Lot value and improvements value."},{"acf_fc_layout":"image","image":347601,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"You can configure these charts yourself by following the steps below.\r\n\r\nOpen the\u00a0sample map<\/a>\u00a0and click Modify Map, or sign in and save the map."},{"acf_fc_layout":"image","image":347641,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Adding Charts<\/strong>\r\n\r\nYou can add charts to your layer pop-up in two ways: by configuring the layer in your web map or (if you own the hosted feature layer) by configuring the layer using the Visualization tab on the item pages. In this example, you will configure the layers in a web map. See\u00a0Pop-ups: The essentials<\/a>\u00a0for more information.\r\n\r\nStep 1:<\/strong> Open the\u00a0sample map<\/a>, where you will add your charts. Click Modify Map or sign in and save the map so you can make changes.\r\n\r\nStep 2:<\/strong> Hover over the Population Change layer and open the layer options by clicking the ellipsis button (\u2026)"},{"acf_fc_layout":"image","image":347661,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 3:<\/strong> Choose\u00a0Configure Pop-up."},{"acf_fc_layout":"image","image":347691,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 4:<\/strong> Add a bar chart.\r\n\r\nThe pop-up has been partially configured, but it does not include charts.\r\n\r\nIn the pop-up configuration panel, scroll down to the\u00a0Pop-up Media\u00a0section, click ADD, and choose Bar Chart."},{"acf_fc_layout":"image","image":347711,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 5:<\/strong> Configure the chart.\r\n\r\nWhile each chart is different, the chart configuration panel is similar for each chart type.\r\n\r\na. Choose a title for the chart (optional).\r\n\r\nb. Enter a caption for the chart (optional).\r\n\r\nc. Choose the fields whose values will be used to populate the chart. To show the population change over time, check off all fields with population data.\r\n\r\nd. When you finish, click OK and apply your layer configuration settings."},{"acf_fc_layout":"image","image":347841,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 6:<\/strong> Repeat the steps above for column and line charts. When you are done, click OK to save your changes and dismiss the pop-up configuration panel.\r\n\r\nYou should have three charts in the Population Change layer pop-up. Click any feature to view the pop-up and click the arrow to the right of the chart to view them all.\r\n\r\n "},{"acf_fc_layout":"image","image":347851,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"View larger image<\/a><\/u>\r\n\r\nNext, go to the Home Values layer and add a pie chart.\r\n\r\nStep 7:<\/strong> Use the bookmarks to navigate to Home Values.\r\n\r\nStep 8:<\/strong> Hover over the Home Values layer and open the layer options (like you did in step 2).\r\n\r\nStep 9:<\/strong> Choose Configure Pop-up from the options (like you did in step 3).\r\n\r\nStep 10:<\/strong> In the pop-up configuration panel, scroll down to the\u00a0Pop-up Media\u00a0section, click ADD, and choose Pie Chart."},{"acf_fc_layout":"image","image":347861,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Step 11:<\/strong> Configure the chart.\r\n\r\nWhile each chart is different, the chart configuration panel is similar for each chart type.\r\n\r\na. Choose a title for the chart (optional).\r\n\r\nb. Enter a caption for the chart (optional).\r\n\r\nc. Choose the fields whose values will be used to populate the chart. The values should add up to 100 percent. In this example, the Total Assessed Value is the sum of Lot Value and Improvements Value.\r\n\r\nd. When finished, click OK and apply your layer configuration settings."},{"acf_fc_layout":"image","image":347881,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Click OK to apply all pop-up configuration changes, and click a Home Values feature to view the pop-up and pie chart. Your chart should look like the one shown below:"},{"acf_fc_layout":"image","image":347891,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"For more information, see the following:\r\n