Meet our flipping tiles!

With the upcoming release of our graphomate tiles 1.5.x.x, we thought it might be worthwhile to shed some light on the features and overall design concept.

The graphomate tile component allows you to quickly arrange and display information and KPIs crucial to your business in a visually pleasing manner. It consists of several layouts to choose from, and a number of visualization modules to display the actual data.

The new graphomat tiles extension provides the possibility to display information at the backside of a tile. For example by clicking with the mouse the flip-animation can be activated. In order to this new feature, you are able to show more data within the given space.

The first step in populating a graphomate tile is the selection of the underlying layout (1); currently, 13 different arrangements of up to two columns and three rows are possible. The tile can then be populated with visualization components via Drag&Drop – simply choose the desired modules and place them in their designated slots.



Upon placement of a module, a corresponding segment is added to the Module Options tab in the Additional Properties sheet. This is done dynamically during design time, as it is simply not possible to predict the final layout of a given tile.

The choice of modules ranges from simple KPIs, columns and bars, to more complex visualisations, such as line charts, stacked columns and fully-fledged bullet graphs. A Tiles component needs to be bound to a datasource; data is then used to populate the visualisation modules. In case of text-oriented modules such as the Title or Legend module, the metadata from the selected data can be accessed via a set of wildcards, such as [DIMENSIONS] to display all dimensions contained in the selection, [DIMENSIONn] for a specific dimension, or [SCALE] and [UNIT] for selection-specific information. It is of course possible to add user-defined text as well.

To preserve the visual consistency of a tile over all selected modules within a given tile, certain parameters will be set on component level, e. g. font type, size and color as well as number format. To help create a dashboard with several tiles, it is possible to select a grid size – if specified, the tile component can only be resized to multiples of the grid size.

Other, module-specific options can be applied to change the visual appearance ot the module. Examples are line thickness or visibility of module elements such as value labels and category labels.

Two tiles with identical modules, settings and databinding, but different display options

It is of course possible to further customize the look and feel of each tile with CSS.

In earlier versions, each module would bring its own scale; thus, comparison of data from module to module was not easy at a single glance. As of version 1.3, the tiles support a feature that allows different modules and even different tiles (and come to that, other graphomate components) to share a single scale, making it considerably easier to compare data.

Different tiles sharing the same scale
Modules sharing the same scale within their tile component

Of course, it is also possible to change the appearance ot the tile component via BIAL scripts. Available script commands encompass common things like changing width or height. Also, all modules can be accessed by scripts, allowing options to be changed or data to be set. The necessary commands can be conveniently accessed (and copy/pasted) from the Modules tab:


Additionally, scripts can be used to read the latest clicked element of a tile. This value can then be used to filter the datasources of further components such as graphomate charts or graphomate tables, making the graphomate tiles a convenient starting point for in-depth drill-downs.

Hopefully your now inspired to tile down you Dashboard.

Kind Regards,



This file is licenced under the Creative Commons-Licence.