{"id":1698722,"date":"2022-09-27T16:03:59","date_gmt":"2022-09-27T23:03:59","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1698722"},"modified":"2022-09-27T22:41:01","modified_gmt":"2022-09-28T05:41:01","slug":"step-by-step-chart-viewer-in-arcgis-instant-apps","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/analytics\/step-by-step-chart-viewer-in-arcgis-instant-apps","title":{"rendered":"Step by Step: Chart Viewer in ArcGIS Instant Apps"},"author":299212,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23341],"tags":[42641,26781,762122,30111,33371],"industry":[],"product":[760042],"class_list":["post-1698722","blog","type-blog","status-publish","format-standard","hentry","category-analytics","tag-arcgis-online","tag-chart","tag-chart-viewer","tag-data-visualization","tag-map-viewer","product-instant-apps"],"acf":{"short_description":"A frequent question we are asked is how can we display multiple charts alongside the map in a template. This guide will show how.","flexible_content":[{"acf_fc_layout":"content","content":"

This blog is a continuation of my previous blog<\/a> where I demonstrated Map Viewer Charts for data exploration. The web app that we will be focusing on in this blog is Chart Viewer in ArcGIS Instant Apps. Why? Because using its template, we can display multiple charts to complement a map.<\/p>\n

In this tutorial, we will use Chart Viewer from Instant Apps to publish this<\/a> web app using a web map containing charts created in Map Viewer. Chart Viewer supports all chart types offered in Map Viewer (bar, line, pie, histogram and scatter plot), hence our web map can contain any or all chart types.<\/p>\n

Let’s get started right-away with a web map-<\/p>\n

Step 1 – Import your web map to Instant apps\u00a0<\/strong><\/h3>\n

We will need to sign-in into our ArcGIS Online account to access Create App<\/strong>\u00a0options. We will be using this web map<\/a> that was created in the previous blog<\/a> using Map Viewer. You can use your own web map to follow along, just ensure that the web map is saved in Map Viewer and has at least one chart in it. Once you have a web map open in Map Viewer, click on Create app<\/strong> and select Instant Apps<\/a> from the dark pane.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1722432,"id":1722432,"title":"instant apps control","filename":"instant-apps-control-4.jpg","filesize":33646,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/instant-apps-control-4.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/analytics\/step-by-step-chart-viewer-in-arcgis-instant-apps\/instant-apps-control-5","alt":"","author":"299212","description":"","caption":"","name":"instant-apps-control-5","status":"inherit","uploaded_to":1698722,"date":"2022-09-27 17:01:18","modified":"2022-09-27 17:01:18","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":506,"height":563,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/instant-apps-control-4-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/instant-apps-control-4.jpg","medium-width":235,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/instant-apps-control-4.jpg","medium_large-width":506,"medium_large-height":563,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/instant-apps-control-4.jpg","large-width":506,"large-height":563,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/instant-apps-control-4.jpg","1536x1536-width":506,"1536x1536-height":563,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/instant-apps-control-4.jpg","2048x2048-width":506,"2048x2048-height":563,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/instant-apps-control-4-418x465.jpg","card_image-width":418,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/instant-apps-control-4.jpg","wide_image-width":506,"wide_image-height":563}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Step 2 – Choose a template<\/strong><\/h3>\n

ArcGIS Instant Apps offers a variety of web app templates based on your requirements like Exhibit, Nearby, Chart Viewer etc. In this tutorial we will use the Chart Viewer template to publish our web map and charts together in a web app. Next, select Chart Viewer<\/strong> from the layout options. Give your app a title and hit Create app<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1721672,"id":1721672,"title":"chart viewerrrr","filename":"chart-viewerrrr.jpg","filesize":125050,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/chart-viewerrrr.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/analytics\/step-by-step-chart-viewer-in-arcgis-instant-apps\/chart-viewerrrr","alt":"","author":"299212","description":"","caption":"","name":"chart-viewerrrr","status":"inherit","uploaded_to":1698722,"date":"2022-09-26 22:49:24","modified":"2022-09-26 22:49:24","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":1913,"height":933,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/chart-viewerrrr-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/chart-viewerrrr.jpg","medium-width":464,"medium-height":226,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/chart-viewerrrr.jpg","medium_large-width":768,"medium_large-height":375,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/chart-viewerrrr.jpg","large-width":1913,"large-height":933,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/chart-viewerrrr-1536x749.jpg","1536x1536-width":1536,"1536x1536-height":749,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/chart-viewerrrr.jpg","2048x2048-width":1913,"2048x2048-height":933,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/chart-viewerrrr-826x403.jpg","card_image-width":826,"card_image-height":403,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/chart-viewerrrr.jpg","wide_image-width":1913,"wide_image-height":933}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Step 3 – Configure Chart Viewer\u00a0<\/strong><\/h3>\n

Configure your Chart Viewer app template using the five steps explained in this blog<\/a>. I generally proceed with using the default settings unless I am working on more than one layer or require customization.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1721742,"id":1721742,"title":"express","filename":"express.jpg","filesize":155658,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/express.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/analytics\/step-by-step-chart-viewer-in-arcgis-instant-apps\/express-2","alt":"","author":"299212","description":"","caption":"","name":"express-2","status":"inherit","uploaded_to":1698722,"date":"2022-09-26 23:19:18","modified":"2022-09-26 23:19:18","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":1915,"height":932,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/express-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/express.jpg","medium-width":464,"medium-height":226,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/express.jpg","medium_large-width":768,"medium_large-height":374,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/express.jpg","large-width":1915,"large-height":932,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/express-1536x748.jpg","1536x1536-width":1536,"1536x1536-height":748,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/express.jpg","2048x2048-width":1915,"2048x2048-height":932,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/express-826x402.jpg","card_image-width":826,"card_image-height":402,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/express.jpg","wide_image-width":1915,"wide_image-height":932}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Step 4 – Publish your web app\u00a0<\/strong><\/h3>\n

After configuration, select Publish<\/strong> and then Confirm<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1722442,"id":1722442,"title":"confirm","filename":"confirm.jpg","filesize":105600,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/confirm.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/analytics\/step-by-step-chart-viewer-in-arcgis-instant-apps\/confirm","alt":"","author":"299212","description":"","caption":"","name":"confirm","status":"inherit","uploaded_to":1698722,"date":"2022-09-27 17:01:46","modified":"2022-09-27 17:01:46","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":1913,"height":875,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/confirm-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/confirm.jpg","medium-width":464,"medium-height":212,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/confirm.jpg","medium_large-width":768,"medium_large-height":351,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/confirm.jpg","large-width":1913,"large-height":875,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/confirm-1536x703.jpg","1536x1536-width":1536,"1536x1536-height":703,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/confirm.jpg","2048x2048-width":1913,"2048x2048-height":875,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/confirm-826x378.jpg","card_image-width":826,"card_image-height":378,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/confirm.jpg","wide_image-width":1913,"wide_image-height":875}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Step 5 – Launch the web app\u00a0<\/strong><\/h3>\n

Once your web app is published, a ‘Share’ pop-up will appear. This pop-up will provide several options on how to share the web app. To simply launch the web app, select Launch<\/strong> from the pop-up. The app will be launched in a new window. Voila! Your web app is ready. It should look like this<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1721542,"id":1721542,"title":"app ready","filename":"app-ready.jpg","filesize":164978,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/app-ready.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/instant-apps\/analytics\/step-by-step-chart-viewer-in-arcgis-instant-apps\/app-ready","alt":"","author":"299212","description":"","caption":"","name":"app-ready","status":"inherit","uploaded_to":1698722,"date":"2022-09-26 22:16:25","modified":"2022-09-26 22:16:25","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":1916,"height":924,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/app-ready-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/app-ready.jpg","medium-width":464,"medium-height":224,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/app-ready.jpg","medium_large-width":768,"medium_large-height":370,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/app-ready.jpg","large-width":1916,"large-height":924,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/app-ready-1536x741.jpg","1536x1536-width":1536,"1536x1536-height":741,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/app-ready.jpg","2048x2048-width":1916,"2048x2048-height":924,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/app-ready-826x398.jpg","card_image-width":826,"card_image-height":398,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/app-ready.jpg","wide_image-width":1916,"wide_image-height":924}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Explore your visualizations<\/h1>\n

So far, we have learned how to set up a template using Chart Viewer but your journey to share your insightful viz doesn’t stop here.<\/p>\n