HTML5 Infographics

Infographics can be a powerful way to visualise your data in a modern way that makes it easy for users to understand patterns and make comparisons. Report Builder offers 4 different kinds of infographic widgets: scaled icons, filled icons, repeating icons and scaled boxes. The icon based widgets allow you to choose from a wide range of font-based icons or you can upload you own custom icon.

Scaled Icon

html5-scaled-icon-widget-iconThe Scaled Icon widget reflects the sizes of the indicator values  by the sizes of the icons. The scale of the icon sizes can be adjusted. It is especially useful to show how the selected feature is performing in comparison to all other report features or to compare a single feature to specifically set up comparison areas such as  regional  or national values.

Here a few examples:

Filled Icon

html5-fill-icon-widget-iconThe Filled Icon widget fills a proportion of an icon or its background depending on the data value. It is especially useful for displaying percentage values or indicators that have logical minimum and maximum values. The fill can be set to appear horizontally or vertically.

Here a few examples:


Repeating Icon

html5-repeating-icon-widget-iconThe Repeating Icon widget allows you to build  a simple infographic that shows a number as a set of icons.

The default is to show one icon for each integer (so a value of 45 would show 45 icons).


You can override this behaviour using the Value Per Icon setting, so that you can show much larger numbers, as shown below:

US States population 2010 – one icon per 1,000,000 inhabitants

Note that there is a hard limit for large numbers – if the maximum value is greater than 1,000 then the Value per Icon setting will be automatically adjusted to a value that gives a sensible visual output. For example, in the example above the maximum value is around 30,000,000 so the Value per Icon is automatically set to 1,000,000. It is possible to override this to a greater value but not to a lesser value – for example, setting the Value per Icon to 10,000 would have no effect on the visual output.

Scaled Boxes

html5-scaled-boxes-widget-iconThe Scaled Boxes widget works in a similar way as the Scaled Icon widget, but the sizes of the indicator values are reflected by boxes instead of icons. There are two types of layout available: filled and stacked.

The filled layout ‘fills’ the widget with boxes and allows you to display the value of the selected feature in proportion to the values of other report features.


The stacked layout ‘stacks’ the boxes on top of each other. It is useful if you wish to compare the selected feature against other comparison areas with larger differences, such as district against regional and national values.