Part 3: Charts

Adding charts to the report is similar to adding tables. Decide on the chart you would like to use, drag and drop it to the report, select indicators from the data store and then adjust the settings to configure the chart.

Different to text boxes and tables there is only one instance of each chart type. By adjusting the settings, a chart can be styled to different types. This part of the tutorial demonstrates how to create different bar chart types out of the generic bar chart widget.

Add a bar chart

Select the bar chart widget from the toolbox and drag it into the report. It should be placed beneath the table (created in the previous tutorial), be half of the page size and anchored to the left.

After placing the widget, double click on it to bring up the settings. Go into the data tab and select Ward_Rgn* and Ward_Ctry* as comparison areas. Make sure that the ‘Show Comparison Areas?’ box is ticked. Then, scroll down to indicators, deselect all indicators and locate the theme ‘Population / Estimates / Other Groupings / All’. Select the indicators:

  • Persons age group 0 – 17%
  • Persons age group 18 – 64%
  • Persons age group 65+%

Do not change any date settings so that the latest date is selected by default. You can click on the metadata link to display source information and e.g. the publishing date.

Click apply on the settings to continue.

The default bar chart layout adds indicators data as vertical bar while comparison areas are represented by lines.

Bars for comparison data and stacked bar chart

The representation of comparison data can be changed in the bar chart settings. Open the ‘Settings’ tab in the chart properties and navigate to ‘Series’. Untick the box for ‘Show Comparisons As Lines’.  This will remove the trend lines and add additional bars to the chart.

Notice that bars are grouped around the indicator (date) and that each area has a distinct colour.

While this representation can be handy for a small number of comparison areas, it gets unwieldy when having a large number of indicators and/or comparison areas. In this case, a stacked bar chart might be a much better option.

Go back into Settings and expand ‘Bars’. Activate the setting ‘Use Stacked Bars’.

This setting keeps the grouping by indicator but ‘stacks’ the areas.

While there are use cases to aggregate values from different areas, a grouping by area and stacking of indicator values makes more sense when mapping population age composition.

To change the grouping go into Settings, ‘Series’. The default binding style is ‘FeatureAsSeries’ – so features (England, London, Addiscombe) become a series for each indicator. Change the binding style to ‘IndicatorAs Series’ and observe the changes.

Now bars are grouped by feature and the three indicators form a series. To finish up on the stacked bar chart, apply the following changes:

  • In ‘Labels, Text & Titles’ change Title to ‘Age composition in #FNAME’. Set Label Style to ‘Short Name’.
  • In ‘Series’ remove ‘#DATE’ from the Label Format.
  • Do the same for XAxis Label Format in Axes.
  • Enable the ‘Advanced Settings’ and set YAxis Range from ‘Auto’ to ‘Constrained’. After that put in ‘0,100’ into ‘YAxis Range Values’ to limit the Y-Axis to 100%. Assign ‘Percent’ as title in the field below.

The result should look like this:

Copy the chart by right clicking and selecting ‘copy’. Paste it into the report and place it on the right side of the copied chart. You will need to set  ‘Anchor: Right’.

Open the settings for the right chart and switch to ‘Quick Picks’. Select ‘One Area, All Indicators’ which will reset the layout to the default option.

Time Series Bar Charts

Instead of showing multiple indicators for the same date (2015), the right bar chart shall now be changed to show a time series, that is data from one indicator for multiple dates.

First, clear the bar chart of any data that is in there and disable comparison areas. Then go into the theme ‘Crime / Police Data / Monthly rates’ and select the indicator ‘All Crime Rate’.

There are two ways to add additional dates for an indicator:

Hover over the box for ‘latest 1 dates’ and click on the arrows to adjust the number of latest dates. If you need to check on the actual dates or prefer to select specific dates, click on the ‘choose specific dates’ link. Note that the indicator needs to be selected before displaying dates.

This will show all dates available for the selected indicator. Some indicators have data for a specific date, while others show aggregations over a time period. Select the latest 6 dates for ‘All Crime Rate’ now. Go into settings and verify that the binding style is set as ‘FeaturesAsSeries” (Series group). The chart should now look like this:

Now add another indicator in the ‘Data’ tab. Select the 6 latest dates for ‘Crime / Police Data / Monthly rates / Anti-social behaviour Rate’. With the current binding style of ‘FeaturesAsSeries’, both indicators are grouped into separate time series and don’t mix with each other.

Set the binding style to ‘FeaturesDatesAsSeries’. In the label format settings below, remove #DATE by deleting this part of the text. Go into the ‘Legend’ group and untick ‘Show Legend’. After applying these changes, the bar chart shows a time series, grouped by date instead of indicator.

Finally, do the following changes to the chart:

  • In ‘Labels, Text & Titles’ change Title to ‘Crime Rate in #FNAME’
  • In ‘Bars, Bar Orientation’, select ‘Horizontal’
  • In ‘Axes’ put in ‘Percent’ as Y-Axis Title and reduce the ‘Axis Font Size’ to 12 px.

Bar Chart for all areas

In addition to showing data for the currently selected area as well as data for comparison areas, the bar chart can also show all areas of the same geography (e.g. for all wards).

Drag a new bar chart into a report, and resize it so that it stretches across the whole width of the report. Place it above the two bar charts created earlier. Delete any indicators for the chart and add ‘Population / Estimates / Persons all ages’, latest 1 date as single indicator.

In the ‘Areas’ group of Data untick ‘Show Comparison Areas?’ as no data from other geographies than wards shall be displayed. You chart should show only show a single bar for ‘Persons all ages 2015’ now. Tick ‘Show All Areas?’ to add data from all wards to the chart.

Each ward has been added with a distinctive colour. This is due to the default binding style ‘FeaturesAsSeries’. Go into Settings, Series, Binding Style and change it to ‘IndicatorAsSeries’ to make the chart more readable.

To further improve the chart, apply the following changes.

  • Change the title in ‘Labels, Text & Titles’ to ‘Number of residents in #FNAME’.
  • Disable Show Legend (Legend).
  • Set the sort value in ‘Bars’ to ‘Ascending’ so that bars get sorted by their indicator value instead of their area name.

To make the currently selected area make more standing out, you can highlight it in ‘Borders Colours & Styles’. Once ‘Highlight Selected Feature’ is active, the highlight colour and style can be changed. Set Highlight Style to ‘FillAndCallout’ to apply the highlight colour to the bar and add a small callout box with the area name. This callout box is especially useful in cases where you have a lot of areas and need to disable ‘Force One Axis Label Per Bar’ (Bars) to hide the majority of area names.