{"id":12901,"date":"2016-09-16T13:26:01","date_gmt":"2016-09-16T12:26:01","guid":{"rendered":"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/?page_id=12901"},"modified":"2019-02-19T18:14:49","modified_gmt":"2019-02-19T18:14:49","slug":"area-profile-layout","status":"publish","type":"page","link":"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/profiling-areas-layouts\/area-profile-layout\/","title":{"rendered":"Area Profile Layout"},"content":{"rendered":"<p><br \/>\nThe <strong>Area Profile<\/strong> layout is best suited to display the difference between the indicator values and the values of the comparison areas. In addition to the most common widgets, it contains an <strong>Area Profile<\/strong> widget as shown in the image below.<\/p>\n<p><a href=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileLayout.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileLayout.png\" alt=\"Area Profile Layout\" class=\"alignnone wp-image-12951 size-full\" width=\"1363\" height=\"665\" srcset=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileLayout.png 1363w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileLayout-300x146.png 300w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileLayout-768x375.png 768w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileLayout-1024x500.png 1024w\" sizes=\"auto, (max-width: 1363px) 100vw, 1363px\" \/><\/a><\/p>\n<p>This widget looks and behaves like a table but it has a spine chart in one of its table columns. The horizontal bars to either side of the central spine show whether indicator values for the selected area(s) are above\/below a given comparison value.<\/p>\n<p>Click <a href=\"http:\/\/dashboards.instantatlas.com\/viewer\/report?appid=7f1308927eac4127a363756b2c808d3f&amp;authid=JEMmJsd8slgSbuxG&amp;loadAllData=true&amp;indicator=i5b2eb6e6-4066-55c0-5450-5f7d2fd864fc&amp;date=2002&amp;prop_legendClassifier=quantile&amp;pal_defaultPaletteId=Sequential%20Green&amp;pal_defaultSchemeId=categoricScheme1&amp;pal_noClasses=5&amp;bbox=-89645.58593582321%2C6629679.803441099%2C70264.86258871428%2C6786707.45490846&amp;select=E05000323%2CE05000066%2CE05000093\" target=\"_blank\" rel=\"noopener\">here<\/a> to see a demo dashboard using an Area Profile layout.<\/p>\n<p>Click <a href=\"http:\/\/dashboards.instantatlas.com\/viewer\/dashboard?appid=7f1308927eac4127a363756b2c808d3f\" target=\"_blank\" rel=\"noopener\">here <\/a>to see this demo dashboard in the edit mode.<\/p>\n<p>Here are the steps to create a dashboard using Area Profile layout as shown in the demo dashboard.<\/p>\n<ul>\n<li><a href=\"#areaprof_layout\">Applying the Area Profile layout<\/a><\/li>\n<li><a href=\"#areaprof_data\">Data Preparation<\/a><\/li>\n<li><a href=\"#areaprof_dmodel\">Setting up dashboard Data Model<\/a><\/li>\n<li><a href=\"#areaprof_config\">Configuring the Area Profile widget<\/a><\/li>\n<\/ul>\n<p><a name=\"areaprof_layout\"><\/a><\/p>\n<hr \/>\n<h2><strong>Applying the Area Profile layout<\/strong><\/h2>\n<p>1. In the Dashboard Editor, select <strong>Layout<\/strong> in the top menu.<\/p>\n<p>2. Under <strong>Profiling Areas<\/strong> section, hover over the <strong>Area Profile<\/strong> layout and then click <strong>Apply<\/strong>.<\/p>\n<p>3. In the <strong>Continue?<\/strong> dialog, click <strong>Yes<\/strong>.<\/p>\n<p>Note: Any changes to widget properties (including table columns) will be lost if you apply a new layout.<\/p>\n<p><a name=\"areaprof_data\"><\/a><\/p>\n<hr \/>\n<h2><strong>Data Preparation<\/strong><\/h2>\n<p>The spine chart in the demo dashboard shows the difference between the indicator values of London wards and the values of the London average (comparator). The difference values are included in the source table as individual columns for each of the indicators as shown in the image below.<\/p>\n<p><a href=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileCSVDiffCol.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileCSVDiffCol.png\" alt=\"Area Profile CSV Diff Columns\" class=\"alignnone wp-image-12971 size-full\" width=\"1069\" height=\"290\" srcset=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileCSVDiffCol.png 1069w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileCSVDiffCol-300x81.png 300w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileCSVDiffCol-768x208.png 768w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileCSVDiffCol-1024x278.png 1024w\" sizes=\"auto, (max-width: 1069px) 100vw, 1069px\" \/><\/a><\/p>\n<p>The percentage difference can be calculated in the following way:<\/p>\n<p>100 * ((base area indicator value \u2013 comparator value) \/ comparator value)<\/p>\n<p>This will give you positive difference values where the base area value is higher than the comparator value and negative difference values where the base area value is lower than the comparator value.<\/p>\n<p>If your data includes target values they can be depicted\u00a0as vertical markers superimposed on the horizontal bars on the spine chart. Your audience will be able to identify easily\u00a0whether the target for a particular indicator has been reached or not.<\/p>\n<p>Once the data source table is uploaded in the Dashboard Builder account and added to the dashboard, the next step is to structure the appropriate data model for the dashboard.<\/p>\n<p><a name=\"areaprof_dmodel\"><\/a><\/p>\n<hr \/>\n<h2><strong>Setting Up the Data Model in the Data Manager<\/strong><\/h2>\n<p>In this demo dashboard, the horizontal bar in spine chart is configured to display the associate <strong>diff <\/strong>value. To do so, each of the difference value columns in the CSV is set up as an associate for each of the indicators in the data manager\u2019s data model panel as shown in the image below. Note that they must use the same associate name to be grouped together. In the example below <strong>diff<\/strong> is used as the associate name.<\/p>\n<p><a href=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileDiffAssociate.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileDiffAssociate.png\" alt=\"Area Profile Dif fAssociate\" class=\"alignnone wp-image-12982 size-full\" width=\"1239\" height=\"592\" srcset=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileDiffAssociate.png 1239w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileDiffAssociate-300x143.png 300w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileDiffAssociate-768x367.png 768w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileDiffAssociate-1024x489.png 1024w\" sizes=\"auto, (max-width: 1239px) 100vw, 1239px\" \/><\/a><\/p>\n<p>Each of the target value columns is also required to be set up as an associate in the same way as the difference value columns. In this example the associate is named as <strong>target<\/strong>.<\/p>\n<p><a name=\"areaprof_config\"><\/a><\/p>\n<hr \/>\n<h2><strong>Configuring the Area Profile widget<\/strong><\/h2>\n<h4><strong>Specify data source<\/strong><\/h4>\n<p>Once the data model is set up properly in the data manager, the Area Profile widget can now be configured to display the data, in this demo dashboard it is the\u00a0<strong>diff<\/strong> associate.<\/p>\n<p>1. Select the <strong>Area Profile<\/strong> widget. Its Properties panel should appear on the left.<\/p>\n<p>2. Click <strong>Columns<\/strong> to expand the section.<\/p>\n<p>3. Locate the column box for the spine chart. It looks like the image below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileColumnBox.png\" alt=\"Area Profile Column Box\" class=\"alignnone size-full wp-image-12992\" width=\"332\" height=\"469\" srcset=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileColumnBox.png 332w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/AreaProfileColumnBox-212x300.png 212w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/p>\n<p>4. In the Column Values section, set the minimum and maximum values for the spine chart.<\/p>\n<p>5. In the Bar section, specify the associate <strong>diff<\/strong> in the <strong>Data Source<\/strong> box.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/08\/Note.png\" alt=\"Note\" class=\"alignnone size-full wp-image-13002\" width=\"22\" height=\"20\" \/>\u00a0You can set the colour of the horizontal in the <strong>Colour<\/strong>\u00a0box but this will be overridden by the <strong>Selected Features Legend<\/strong>&#8216;s colour scheme if this widget is included.<\/p>\n<h4>Setting Targets<\/h4>\n<p>If you wish to show additional values on the spine chart in conjunction with the horizontal bars you can do so by inserting targets as shown in the image below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/09\/AreaProfiileTargets.png\" alt=\"Map Legend Targets\" class=\"alignnone size-full wp-image-13691\" width=\"868\" height=\"297\" srcset=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/09\/AreaProfiileTargets.png 868w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/09\/AreaProfiileTargets-300x103.png 300w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/09\/AreaProfiileTargets-768x263.png 768w\" sizes=\"auto, (max-width: 868px) 100vw, 868px\" \/><\/p>\n<p>To insert a vertical marker of an associate\/indicator value, follow the steps below.<\/p>\n<p>1. Click <strong>Chart Column Targets<\/strong> to expand the section.<\/p>\n<p>2. Click <strong>New Target <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/09\/NewTargetsButton.png\" alt=\"New Targets Button\" class=\"alignnone size-full wp-image-13701\" width=\"115\" height=\"38\" \/><\/strong>.<\/p>\n<p>3. In the new target box, in the <strong>Data<\/strong> box, specify the data source for this target, in this demo dashboard\u00a0it is the associate\u00a0<strong>target<\/strong>.<\/p>\n<p>4. Rename the label in the <strong>Label<\/strong> box. The text here will be used as the tooltip.<\/p>\n<p>5. Select a shape for the vertical marker in the <strong>Shape<\/strong> box.<\/p>\n<p>6. Change the size and colour in the <strong>Size<\/strong> and <strong>Colour<\/strong> fields.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/09\/AreaProfileTargetProperties.png\" alt=\"Area Profile Target Properties\" class=\"alignnone size-full wp-image-13711\" width=\"311\" height=\"360\" srcset=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/09\/AreaProfileTargetProperties.png 311w, https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-content\/uploads\/sites\/41\/2016\/09\/AreaProfileTargetProperties-259x300.png 259w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Area Profile layout is best suited to display the difference between the indicator values and the values of the comparison areas. In addition to the most common widgets, it contains an Area Profile widget as shown in the image below. This widget looks and behaves like a table but it has a spine chart &hellip; <a href=\"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/profiling-areas-layouts\/area-profile-layout\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Area Profile Layout<\/span><\/a><\/p>\n","protected":false},"author":22,"featured_media":0,"parent":12861,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12901","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-json\/wp\/v2\/pages\/12901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-json\/wp\/v2\/comments?post=12901"}],"version-history":[{"count":0,"href":"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-json\/wp\/v2\/pages\/12901\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-json\/wp\/v2\/pages\/12861"}],"wp:attachment":[{"href":"https:\/\/help.instantatlas.com\/dashboard-builder-agol\/wp-json\/wp\/v2\/media?parent=12901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}