Tutorial:Creating and inserting a flexible dashboard

This tutorial describes the characteristics of flexible dashboards and how they can be used in Statistics Explained articles to visualise data in a more user-friendly and intuitive way. It then shows how to create a flexible dashboard using the NComVA tool (outside of Statistics Explained) and finally how to insert in the appropriate place and with the standardised layout in an article.


Dashboard: characteristics and functions

What is a flexible dashboard?

A flexible dashboard is an interactive tool that allows visualising data using intuitive display charts, increasing the user-friendliness of data exploration.

<thumb src="EU LFS 2013 Final dashboard.png">

Dashboard 1: Labour status of persons aged 15 years and older, EU, 2013 - Source: Eurostat (lfsa_ergan)
Click the image for an interactive view of the data

Some of the available charts are:

  • Bar Chart
  • Maps
  • Scatter Plot
  • Tree map
  • Dynamic table
  • Radar Plot
  • Pie Chart
  • Time Histogram
  • Time Line Graph

These different types of charts can be combined and then be embedded in any type of HTML-based resource.

Examples

The article Unemployment statistics and beyond includes 3 flexible dashboards, one of these being Unemployment rate (total, female, male, youth and senior), 2005-2019 (see Dashboard 1).

When clicking on the image, the flexible dashboard appears in a pop-up window, which can be customised by users.

Another example of a flexible dashboard is the diagram at the end of the page in the dedicated section of the Europe 2020 indicators.

Inserting a flexible dashboard in Statistics Explained

Once the snippet code has been created, the flexible dashboard can then be inserted in a Statistics Explained article.

To do so, the snippet code has to be pasted into the draft version of the article. The original snippet code has the followig structure:

Snippet code - HTML.png


However, some changes are needed in order to have the flexible dashboard properly displayed:

  • Change initial and final tag 'iframe' for 'vislet':

<iframe> ... </iframe> tags should be replaced by: Vislet2.png

  • Add an image for the dashboard:

In order to display the flexible dashboard in the article, an image is required (it can be the snapshot of the dashboard itself). The image should first be uploaded in Statistics Explained in the usual way.

Then it has to be added into the snippet code with the tag: Image tag2.png, before the last 'vislet' tag.

  • Add the dashboard title with 'caption'; for instance:

caption="Dashboard 1: Labour status of persons aged 15 years and older, 2013 - Source: Eurostat"

  • Atributes for customize pop-up window: width and height of the window in pixels (in the following example is 500):

wwidth="500"
wheight="500"

(These atributes are optional. Default values of the window are 50x50).

Finally, the tag of the flexible dashboard in Statistics Explained will be as follows:

Final tag - vislet2.png

Note: The flexible dashboard does not appear on the PDF version and the printed version of the article.