Dashboards, graphical visualization of data, seem to be everywhere, especially in these pandemic times where daily and weekly trends take on a very personal significance. In this article, we are going to look at a beautiful dashboard that you can very easily customize to suit your own needs.

Visualization is the art of making the useful, beautiful.

There is only so far you can get with tables of facts and figures. Sooner or later, you will need to create a graphical visualization of your data. Pictures save a thousand words, but they also help your users grasp the information in a more easily consumed way.

Most Delphi programmers are probably familiar with the basic TChart component which has been bundled with nearly every version of Delphi. For more recent versions of RAD Studio such as Sidney, you had to tick an optional checkbox to get the TChart component to appear on your component palette. That bundled version of the TChart component is provided by Steema Software based in Spain.

The dashboard we are writing about here is also produced by Steema to demonstrate the power of their Pro versions of TeeChart as well as their TeeGrid. More on that in a moment.

What does the dashboard visualization look like?

It’s beautiful!

Where can you get the dashboard visualization?

The great news is the Steema dashboard example is freely available for download from GitHub here: https://github.com/Steema/TeeChart-FireMonkey-samples/tree/master/Dashboard

I used the cross-platform GitHub desktop project to download the sample directly from the repository.

What components do you need?

To work with Steema’s dashboard visualization example you’re going to need a copy of their Pro TeeChart component. This is NOT the same as the bundled version. In fact, if you have the bundled version installed, you will need to completely uninstall it first because it will clash with the Pro version. You will also need to install Steema’s TeeGrid component too.

What if I don’t have the TeeChart Pro or TeeGrid component packs?

Not a problem – Steema’s website has a download for a fully functional 30-day trial of both component libraries. I used the trial versions to write this article and they worked without any problems.

Go to this link to download them: https://www.steema.com/product/vcl

Just make sure you uninstall the bundled version of TeeChart that came with RAD Studio FIRST because I didn’t remember and got myself into a bit of tangle. If that happens to you, uninstall both the new component packs using their uninstaller. Then go into the IDE, select “component” from the menu, then “install packages”. Now scroll down and make sure all references to the TeeChart and TeeGrid components are gone. Click on any that are there, and then “remove”.

Now close the IDE and install the TeeChart Pro and TeeGrid components using their installers, and all will be well. I make these mistakes, so you don’t have to!

What does the dashboard visualization do?

Well, the source code reads from an included SQLite database. Almost all the data retrieval is done using LiveBindings. All the data access components use the FireDAC query components. There are a few areas in the program where the data is read and manipulated in code but overall, it’s nearly all the LiveBindings which do the heavy lifting.

The dashboard visualization is then either displayed in a regular Delphi FMX form or it can be extracted out to a bunch of HTML-based web pages. As demos go it’s masterful and apart from showing the power of the TeeChart and TeeGrid components it also demonstrates quite how far RAD Studio and Delphi go towards making your life as a programming software developer a lot easier. I often say at webinars that “Delphi is my superpower”. It’s this kind of gorgeous yet useful visualization which can be a lot harder to achieve in other programming languages.

The maps and charts are interactive with most of the work being handled by the components themselves.

Is there anything else?

Did I mention this demo is also completely cross-platform? Thanks to the visualization being written using FireMonkey the demo works on Windows (of course), macOS, iOS and Android. I didn’t try FMXLinux (which now comes included with some versions of RAD Studio – see GetIt for details) but it’s entirely possible that would work too – if you try and get the dashboard visualization to work why not drop me a line in the comments below?

Anyway, do try out this superb demo. Steema’s components are excellent in their own right but combined with this dashboard, they can add that extra pizazz to your apps, no matter what platform, desktop or mobile.

---

Looking for great UI components and styles when building dashboard visualizations in the FMX Framework? Try the Cross-Platform App Builder, which simplifies your design and allows you to take advantage of the infinite design possibilities.