{"id":1986,"date":"2019-03-10T10:16:13","date_gmt":"2019-03-10T10:16:13","guid":{"rendered":"https:\/\/help.instantatlas.com\/?p=1986"},"modified":"2019-03-10T10:16:13","modified_gmt":"2019-03-10T10:16:13","slug":"stacking-population-data-in-bar-charts","status":"publish","type":"post","link":"https:\/\/help.reports.esriuk.com\/report-builder\/2019\/03\/10\/stacking-population-data-in-bar-charts\/","title":{"rendered":"Stacking population data in bar charts with Report Builder"},"content":{"rendered":"<p>This article will try and show you some of the different ways you can use InstantAtlas Report Builder and the <a href=\"\/report-builder-agol\/widgets\/bar-chart-widget\/\" target=\"_blank\" rel=\"noopener\">bar chart widget<\/a> to present population data. We&#8217;re going to produce a few different charts, but we&#8217;re aiming for something like this:<\/p>\n<figure id=\"attachment_1987\" aria-describedby=\"caption-attachment-1987\" style=\"width: 976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/wp-content\/uploads\/2018\/09\/bar-chart-males-females-perc-stack-age-groups_0_6_E07000204.png\" alt=\"5 year age bands grouped chart\" width=\"976\" height=\"196\" class=\"size-full wp-image-1987\" \/><figcaption id=\"caption-attachment-1987\" class=\"wp-caption-text\">5 year age bands, male and female chart with indicators grouped together<\/figcaption><\/figure>\n<p><!--more--><\/p>\n<p>All of the examples in this post can be seen in the report at\u00a0<a href=\"https:\/\/reports.instantatlas.com\/report\/view\/0fcd2388dcb3401b86657a93f743b145\/E07000200\" target=\"_blank\" rel=\"noopener\">https:\/\/reports.instantatlas.com\/report\/view\/0fcd2388dcb3401b86657a93f743b145\/E07000200<\/a><\/p>\n<p>The InstantAtlas <a href=\"https:\/\/www.instantatlas.com\/extra\/\" target=\"_blank\" rel=\"noopener\">national data service<\/a> provides a wealth of data to help you create reports, dashboards and profiles for your areas of interest. However, with so much data available, presenting these data in a clear and informative way without overwhelming your audience can be tricky.<\/p>\n<p>A common way to visualise population data is by using <strong>age bands<\/strong>. The two bar charts below show 5 year age bands for males and females in St Edmundsbury district, Suffolk.<\/p>\n<figure id=\"attachment_1991\" aria-describedby=\"caption-attachment-1991\" style=\"width: 976px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/wp-content\/uploads\/2018\/09\/bar-chart-males-perc_0_3_E07000204.png\" alt=\"5 year age bands males chart\" width=\"976\" height=\"196\" class=\"wp-image-1991 size-full\" \/><figcaption id=\"caption-attachment-1991\" class=\"wp-caption-text\">5 year age bands, males, as a percentage of total male population<\/figcaption><\/figure>\n<figure id=\"attachment_1990\" aria-describedby=\"caption-attachment-1990\" style=\"width: 976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/wp-content\/uploads\/2018\/09\/bar-chart-females-perc_0_4_E07000204.png\" alt=\"5 year age bands females chart\" width=\"976\" height=\"196\" class=\"wp-image-1990 size-full\" style=\"font-weight: bold;background-color: transparent;color: #707070;font-family: 'Noto Sans', sans-serif;text-align: inherit\" \/><figcaption id=\"caption-attachment-1990\" class=\"wp-caption-text\">5 year age bands, females, as a percentage of total female population<\/figcaption><\/figure>\n<p>This is one way to look at the data, but it doesn&#8217;t make it very easy to see how much each age band contributes to the whole population. For that we can start to use <strong>stacked bar charts<\/strong>:<\/p>\n<figure id=\"attachment_1989\" aria-describedby=\"caption-attachment-1989\" style=\"width: 976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/wp-content\/uploads\/2018\/09\/bar-chart-females-perc-stack-single_0_6_E07000204.png\" alt=\"5 year age bands stacked chart females\" width=\"976\" height=\"196\" class=\"size-full wp-image-1989\" \/><figcaption id=\"caption-attachment-1989\" class=\"wp-caption-text\">5 year age bands, females, stacked as a percentage of total female population<\/figcaption><\/figure>\n<p>So how do we do that in Report Builder? When editing your report, you need to <a href=\"\/report-builder-agol\/widgets\/widget-settings\/\" target=\"_blank\" rel=\"noopener\">change the following settings<\/a>:<\/p>\n<table style=\"width: 655px\">\n<tbody>\n<tr>\n<th style=\"width: 246px\" scope=\"col\">Setting<\/th>\n<th style=\"width: 300px\" scope=\"col\">Value<\/th>\n<th style=\"width: 549px\" scope=\"col\">Why?<\/th>\n<\/tr>\n<tr>\n<td style=\"width: 246px\">X Axis Label Format<\/td>\n<td style=\"width: 300px\">#NAME<\/td>\n<td style=\"width: 549px\">Makes the X axis have a simple label of the name of your current feature\/area<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 246px\">Bar Orientation<\/td>\n<td style=\"width: 300px\">Horizontal<\/td>\n<td style=\"width: 549px\">Not essential, vertical works too, but horizontal often looks better with data like these&#8230;<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 246px\">Use Stacked Bars<\/td>\n<td style=\"width: 300px\">True (or &#8220;On&#8221;)<\/td>\n<td style=\"width: 549px\"><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 246px\">Binding Style<\/td>\n<td style=\"width: 300px\">Indicators As Series<\/td>\n<td style=\"width: 549px\">Switches the way data are assigned to either the series or the axis of the chart<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>(Another way of looking at population age bands could be <a href=\"\/report-builder-agol\/widgets\/pie-chart-widget\/\" target=\"_blank\" rel=\"noopener\">to use a pie chart<\/a>, but that&#8217;s a discussion for another time).<\/p>\n<p>This sort of chart can be great for presenting age bands, but what if we want to compare male and females values in the same chart? What about if <a href=\"\/report-builder-agol\/widgets\/widget-data\/\" target=\"_blank\" rel=\"noopener\">we just add all of the indicators <i class=\"fa fa-external-link small\"><\/i><\/a>? The chart below shows our &#8220;first attempt&#8221;:<\/p>\n<figure id=\"attachment_1988\" aria-describedby=\"caption-attachment-1988\" style=\"width: 976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/wp-content\/uploads\/2018\/09\/bar-chart-males-females-perc-stack-single_0_6_E07000204.png\" alt=\"5 year age bands chart, stacked\" width=\"976\" height=\"196\" class=\"size-full wp-image-1988\" \/><figcaption id=\"caption-attachment-1988\" class=\"wp-caption-text\">5 year age bands, both male and female, stacked<\/figcaption><\/figure>\n<p>Not very good. Too many &#8220;slices&#8221;, too few colours and almost impossible to compare the same age bands between male and female. To solve this we have to go into the <a href=\"\/report-builder-agol\/widgets\/widget-settings\/\" target=\"_blank\" rel=\"noopener\"><strong>Advanced<\/strong> settings <i class=\"fa fa-external-link small\"><\/i><\/a> of Report Builder and start <strong>grouping<\/strong> the indicators together and using <strong>indicator aliases<\/strong> to control what is shown in the legend and on the X axis. A few settings later and we get:<\/p>\n<figure id=\"attachment_1987\" aria-describedby=\"caption-attachment-1987\" style=\"width: 976px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/wp-content\/uploads\/2018\/09\/bar-chart-males-females-perc-stack-age-groups_0_6_E07000204.png\" alt=\"5 year age bands grouped chart\" width=\"976\" height=\"196\" class=\"size-full wp-image-1987\" \/><figcaption id=\"caption-attachment-1987\" class=\"wp-caption-text\">5 year age bands, male and female chart with indicators grouped together<\/figcaption><\/figure>\n<p>To achieve this, we need to <a href=\"\/report-builder-agol\/widgets\/widget-settings\/\" target=\"_blank\" rel=\"noopener\">change a few settings.<i class=\"fa fa-external-link small\"><\/i><\/a>\u00a0First, we alias the indicator names so that the chart \u201cknows\u201d they represent the same thing, just for different groups. So, using the indicator alias dialog, we change all the indicator names to a shortened version:<\/p>\n<table>\n<thead>\n<tr>\n<th scope=\"col\">Indicator<\/th>\n<th scope=\"col\">Alias<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<div class=\"col-md-4 col-md-offset-1 text-right\"><label for=\"aliasBox_datastore:I3226\" class=\"control-label\">Males age group 0 &#8211; 4 %<\/label><\/div>\n<\/td>\n<td>0 &#8211; 4 %<\/td>\n<\/tr>\n<tr>\n<td><label for=\"aliasBox_datastore:I3226\" class=\"control-label\">Females age group 0 &#8211; 4 %<\/label><\/td>\n<td>0 &#8211; 4 %<\/td>\n<\/tr>\n<tr>\n<td>&#8230;and so on for all the indicators&#8230;<\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Now the chart can provide a common legend for all the\u00a0\u201cslices\u201d in the chart. It also recognises that there are now\u00a0<em>repeating series<\/em>, so it splits the stacked bars into two groups. The final step is to rename those groups and be specific about which group a series belongs to:<\/p>\n<table style=\"width: 655px\">\n<tbody>\n<tr>\n<th style=\"width: 246px\" scope=\"col\">Setting<\/th>\n<th style=\"width: 300px\" scope=\"col\">Value<\/th>\n<th style=\"width: 549px\" scope=\"col\">Why?<\/th>\n<\/tr>\n<tr>\n<td style=\"width: 246px\"><span>Group Series By Names<\/span><\/td>\n<td style=\"width: 300px\">&amp;Males=1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18<br \/>\n&amp;Females=19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36<\/td>\n<td style=\"width: 549px\">Labels each group on the X axis<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>(This is an <strong>Advanced<\/strong> setting, so you need to toggle those settings <strong>on<\/strong> in the dialog)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/wp-content\/uploads\/2018\/09\/bar-chart-props-group-by-names.png\" alt=\"\" width=\"604\" height=\"636\" class=\"alignnone wp-image-2158 size-full\" \/><\/p>\n<p>The <strong>&amp;Males<\/strong> and <strong>&amp;Females<\/strong> control both the labels and which indicators are in which groups (note that the. The values (<em>=1,2,3,4&#8230;<\/em>) are simply the indices of the indicators in the alias list &#8211; in this case they are very simple because the data is organised so that all the male indicators come first, then the females. You can flip the groups around or move indicators between groups by changing the index values.<\/p>\n<p>You can open this report in edit mode with this URL:\u00a0<a href=\"https:\/\/reports.instantatlas.com\/report\/edit\/0fcd2388dcb3401b86657a93f743b145?clear=true\" target=\"_blank\" rel=\"noopener\">https:\/\/reports.instantatlas.com\/report\/edit\/0fcd2388dcb3401b86657a93f743b145?clear=true<\/a> &#8211; all the data is shared with everyone.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article will try and show you some of the different ways you can use InstantAtlas Report Builder and the bar chart widget to present population data. We&#8217;re going to produce a few different charts, but we&#8217;re aiming for something like this:<\/p>\n","protected":false},"author":61,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[58,55,61],"tags":[56,57,59,60],"class_list":["post-1986","post","type-post","status-publish","format-standard","hentry","category-national-data-services","category-report-builder","category-tips-and-tricks","tag-bar-chart","tag-chart","tag-population","tag-stack","entry"],"_links":{"self":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/posts\/1986","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/users\/61"}],"replies":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/comments?post=1986"}],"version-history":[{"count":0,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/posts\/1986\/revisions"}],"wp:attachment":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/media?parent=1986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/categories?post=1986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/tags?post=1986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}