Blog Posts BPMN DMN

Qatar World Cup Goals Statistics Dashboard

Blog: Drools & jBPM Blog

In Dashbuilder 0.26.0 we introduce Dark Mode, echarts as native library and global properties. 

To showcase these features let’s explore a Qatar World Cup 2022 Goal Score dashboard!

Check the dashboard online

FIFA World Cup Goals Statistics Dashboard

The dashboard shows a summary of goals and matches. The cards on top offer an overview of all matches, the 4 charts show different ways of seeing goals: by day, by stadium, weather and by attendance. At the bottom we have a table with all finished matches.

The data

To build our dashboard we use FIFA REST API. Basically the following URL returns all matches for a given tournament on a given period of time:

This URL has a JSON response:

Once having the source of data we need to transform it to the format supported by Dashbuilder (a 2d JSON vector). For this we use a JSONAta expression, which simply select the fields we want and return in a JSON array format and also create a few fields:

Finally we can define our datasets in our YAML file and declare all columns that will be used in by the dashboards components:

Global Settings

Our dashboards defines some settings that will be shared for all displayer element added to the page: all chart should use a specific color, y axis should have the same label, charts should be resizable, have the same height (300), grids are turned off, export the chart to PNG is enabled and they all consume the same dataset (fifa_matches). For cards (METRIC component) we define a common HTML template. Remember that these properties can be overridden by the component declaration!

Top Cards

The top cards is a simply result of a dataset group operation:

All the cards are organized in a row with four columns:


Charts are in two different rows. The first row contains chart “Goals by Day” line chart, which is match grouped by day, the resulting columns is the day and the average function on columns “Total Goals”

The second column contains a “Goals by Stadium” bar chart. It uses matches grouped by stadium and the column used on Y-Axis is also the average of Total goals

This is the first row code:

On the second row we have two bubble charts. “Goals by Weather” chart has weather on X axis, average number of goals on Y and the bubble size contains the total number of matches that happened on that weather

See for that we don’t declare the group function for the columns, instead we use a property that makes it easy to change the whole visualization. By default the group function is AVERAGE.

The “Goals by Attendance” chart does not use grouping, instead it shows all matches. The chart bubble size is relative to the match total goals, the x axis is the match name and the y axis is the attendance. Notice that this chart also has support to zoom!

Matches Table

Finally we have a table showing all matches. It is not a native component, it is a micro frontend running outside of Dashbuider web bundle! Dashbuilder has a native table, but this external table component is great because it contains filters and order, but it loads all data in memory, so it is recommended to use it with datasets that have < 1k rows.

The data for the table does not have grouping, but we format the date. Any javascript could be used to format the data, but we decided to retrieve the day and hour using toLocaleData and toLocateHour. We also format score columns so they won’t show with decimal places.

The table is in its own row which has a single column with two components: the “All Matches” title and the table itself:

With this we cover the dashboard. Notice that we used most of the improvements that will be in the next Kogito Tooling release.

Dashbuilder 0.26.0 improvements

The version 0.26 has the following main features:

There are also new features for displayers:

At the time of this writing the 0.26.0 version is not released yet, keep an eye on our blog to see when it is released. If you want to try this version use the Serverless Logic Web Tools nightly build!


In this article we shared a new dashboard built with the 0.26.0 Dashbuilder version. Check the full code in our samples repository.

We are preparing a great news story that involves Dashbuilder and Quarkus, so stay tuned!

The post Qatar World Cup Goals Statistics Dashboard appeared first on KIE Community.

Leave a Comment

Get the BPI Web Feed

Using the HTML code below, you can display this Business Process Incubator page content with the current filter and sorting inside your web site for FREE.

Copy/Paste this code in your website html code:

<iframe src="" frameborder="0" scrolling="auto" width="100%" height="700">

Customizing your BPI Web Feed

You can click on the Get the BPI Web Feed link on any of our page to create the best possible feed for your site. Here are a few tips to customize your BPI Web Feed.

Customizing the Content Filter
On any page, you can add filter criteria using the MORE FILTERS interface:

Customizing the Content Filter

Customizing the Content Sorting
Clicking on the sorting options will also change the way your BPI Web Feed will be ordered on your site:

Get the BPI Web Feed

Some integration examples