Animated Activity Gauge with TeeChart Pro VCL

At the moment TeeChart Pro for VCL / FMX does not have a Series type available to create Activity Gauges, maybe in the near future, but here I will show how using another series type and some tricks we can create this kind of Chart.

The series type to use is the Donut series. We’ve to add as many Donut series as Activities we want on our chart.

I’m going to take advantage of the ease with which we can ask the TChart component to setup most of the steps at designtime, right from the Chart editor itself.

Once we have the Chart in the form and have added the different Donut Series, it doesn’t seem possible to get the desired result, but we’ll see…
The first thing to do is set the Chart to 2D, hide the Title and the Legend, we’ll also hide the Marks for each of the series. Here we have :

Now, it’s time to modify one of the important properties that will start to make changes. It’s the property named “Multiple Pies”, within the Editor -> Series -> Series1 -> Donut -> Options -> Multiple Pies. By default this is set to “Automatic”, we’ll change it to “Disable” for all of the Series.

Once this property is modified, it will look like we only have one Donut series in the Chart, as shown here.

It is time to change another important property that will modify the Chart, it is the property named “Hole%”, we find it within the options of each series, in the “Format” tab. Here we’ve to set different percentage values for each of the Donut series’ holes, distributing the size between the different Series. The first Series must contain smaller hole size, we can set a value of “60%”, in the second Series (in the case we’ve three series) we’ll set a value of “74%” and “88%” for the third. The result will be:

Now, all you have to do is hide the Pen for each Series, or set a different color and size, and we’ll have the look of the Chart that we wanted.

 

As an extra characteristic of the Series or Chart, I’m going to add a Text, just in the centre, that will show the activities value. To do this, I can use an “Annotation Tool” already available in TeeChart, and also created/added via the TChart editor. Set annotation alignment to “center” and format the font.

An important feature of this Series type (Activity Gauge) it’s its animation. TeeChart Pro incorporates several Animations for the different Series types, but in this case, as we’re creating a type of series totally personalized, we will create the animation manually.

We’ve to add three TTimer objects to the form, one for each series, set them “Enabled” to False and define an “Interval” of 10.

We can also add a Button component, which is the one that we’ll use to start the animation.

Now let’s give it functionality; we’ll do the next steps through code.

The first thing we do via code, is create a method where we’ll reset and initialize all the Series values, named “ResetValues”, this will be the code:

procedure TActivityGaugeForm.ResetValues;

var i : integer;
begin
  ChartTool1.Text := '0 %';
  Chart1.Hover.Visible := false;

  for i := 0 to Chart1.SeriesCount-1 do
  begin
    Chart1[i].FillSampleValues(2);
    Chart1[i].YValue[0] := 100;
    Chart1[i].YValue[1] := 0;
    Chart1[i].ValueColor[0] := Series1.Pen.Color;
  end;
end;

We’ll call this method from the CreateForm event of Application, and also every time Button1 is clicked :

procedure TActivityGaugeForm.FormCreate(Sender: TObject);
begin
  ResetValues;
end;

procedure TActivityGaugeForm.Button1Click(Sender: TObject);
begin
  ResetValues;
  Timer1.Enabled := true;
  Button1.Enabled := false;
end;

Now, the only missing thing is to add the code that generates the Series animation inside its corresponding Timer event :

procedure TActivityGaugeForm.Timer1Timer(Sender: TObject);
begin
  Series1.YValue[0] := Series1.YValue[0]-1;
  Series1.YValue[1] := Series1.YValue[1]+1;

  ChartTool1.Text := round(Series1.YValue[1]).ToString() + ' %';

  if (Series1.YValue[1] = 90) then
  begin
    Timer1.Enabled := false;
    Timer2.Enabled := true;
  end;
end;

procedure TActivityGaugeForm.Timer2Timer(Sender: TObject);
begin
  Series2.YValue[0] := Series2.YValue[0]-1;
  Series2.YValue[1] := Series2.YValue[1]+1;

  ChartTool1.Text := round(Series2.YValue[1]).ToString() + ' %';

  if (Series2.YValue[1] = 75) then
  begin
    Timer2.Enabled := false;
    Timer3.Enabled := true;
  end;
end;

procedure TActivityGaugeForm.Timer3Timer(Sender: TObject);
begin
  Series3.YValue[0] := Series3.YValue[0]-1;
  Series3.YValue[1] := Series3.YValue[1]+1;

  ChartTool1.Text := round(Series3.YValue[1]).ToString() + ' %';

  if (Series3.YValue[1] = 60) then
  begin
    Timer3.Enabled := false;
    Button1.Enabled := true;
  end;
end;

We have everything. Now it’s time to run the application and see the result. You should see something similar to:

 

Source code of the example available at the Steema Github.

 

Creating Gauge Visualizations with TeeChart Pro VCL / FMX in your Applications

Gauges are increasingly used in our applications. Their capability to show different data sets, whether static or moving over time, makes gauges a valuable chart for dashboards or any other application which visually represents data.

 

First impressions count, and it’s important to understand data at a quick glance. For this reason dashboards are on the up and becoming increasingly more prevalent in modern data applications, hence we are seeing the many different types of gauges playing a vital role in dashboard design.

 

In this blog article, we’re going to look at the possibilities that TeeChart VCL/FMX offer us to simplify and speed up the creation of this type of data visualisation.

 

TeeChart Pro for VCL and FireMonkey include numerous professional chart styles, amongst which we find a wide range of gauges. It’s easy to start adding gauges to your Apps with the TeeChart components library. We can create the panel or dashboard we are referring to without the need to write a single line of code, and what’s more we can do so for all platforms supported by Embarcadero, making it an important cross-platform tool.

 

Note that all the functionality contained in the TeeChart Pro library of components is cross-platform compatible.

 

To begin with, let’s take a look at all the gauge types available with TeeChart Pro:

image1

 

If we create a new application, display its form and add a TeeChart Chart to it from the component library, we can then double-click on the Chart to open the Chart Editor. From here we can add Series to the Chart and personalise them to our taste, all at designtime. To add a new Gauge Series we select ‘Add’ from the ‘Series’ section and go to the Gauges tab in the gallery that has opened, as you can see in Image 1.

Types of Gauges:

Numeric Gauge Linear Gauge Vertical Gauge
     

 

Circular Gauge Knob Gauge Clock Gauge
 
 
 

Each Gauge type has its own characteristics and functionality.

In this example, we’re going to add as many charts as there are gauge types available and we’ll change the appearance of each one of them via each of their respective editors.

 

TeeChart allows us to personalise each Series from the Object Inspector (and in VCL also from its own Editor dialogue).

 

image2

 

We can download the demo from the Steema area on GitHub:

Using Gauges sample at GitHub

 

Using TeeChart we can always create any type of Gauge or Chart personalised to our requirements, that being because the TeeChart Canvas allows us to paint any object on it.

For example, if what we want is to create a type of Gauge of the style ‘Radial Gauge’ we can easily create it via a Donut Series. We’ll simply need to set a total angle (for example, 180º), position the Donut in the centre of the Chart via the 3D editor tab (using horizontal and vertical offset), adding an annotation tool in the centre for the dynamic percentage information.

 

Having done that, it’s only left for us to add values to the Series (for example 15 and 85). The result being:

Get more info and download the latest TeeChart Pro for VCL and FMX version at :

https://www.steema.com/product/vcl

 

RAD Studio 10.1 Berlin, add TeeChart to “FireUI Live Preview”

Studio 10.1 Berlin has just been released and includes the FireUI Live Preview tool to visualize forms at design-time in mobile devices and desktop (Windows / Mac OSX) machines.

Studio10_1_Berlin_TeeChart_FireUI_Live_Preview

The default application does not provide support for TeeChart control, but its very easy to add !

  • Open the LivePreview.dproj project in Studio 10.1 from:  c:\Program Files (x86)\Embarcadero\Studio\18.0\source\Tools\FireUIAppPreview
  • Edit the project’s Regs.pas unit to add the TeeChart related units (see code below)
  • Run the app (without debugging)
  • Create a new Firemonkey project, add a TChart control to see it at Live Preview (connect to your ide machine first)

There is only a minor caveat that should be easy to solve:

When adding series of data to TChart, they appear filled with random points at design-time.
However, Live Preview displays component contents without the “csDesigning” ComponentState property so the series appear empty.

Modifications to Regs.pas unit (displayed in bold font) :


unit Regs;

interface

uses
  System.Classes, FMX.Controls, FMX.ImgList,

  FMXTee.Constants,

  {$IF TeeMsg_TeeChartPalette='TeeChart'}
  {$DEFINE TEEPRO} 
  {$ENDIF}

  {$IFDEF TEEPRO}
  FMXTee.Editor.Pro,  // <-- if you have the Pro version of TeeChart
  {$ENDIF}

  FMXTee.Chart, FMXTee.Series;

implementation

initialization

  // Register here any component that is not previously registered by the framework

  RegisterClass(FMX.ImgList.TImageList);
  RegisterClass(FMX.Controls.TStyleBook);

  RegisterClass(FMXTee.Chart.TChart);
  RegisterTeeStandardSeries;

end.

What’s New in TeeChart VCL/FMX v2015.16

Build 2015.16.150901

Release September 2015

This technical document describes all changes made to TeeChart component library (FireMonkey and VCL versions) since the release of April 2015.

 

New Supported IDEs

  • Embarcadero RAD Studio 10 Seattle.
    Full support for Delphi and C++ Builder 10 Seattle for all platform projects.

 

‘Detail’ property

Series ‘master-detail’ functionality, with a new ‘Detail’ property and ‘Add’ method overload in the Series class to enable the ‘drill-down’ of Series data.
Example demo available at http://www.teechart.net/files/public/support/SeriesDetailSample.zip

 

TChartLayout component

TChartLayout component, a scrollable panel which will automatically arrange multiple charts into a viewable state.

 

GDI+ canvas Scale property

Creates smoother looking charts. Default value is 1 and can be changed at design and runtime through the Chart editor 3D render dialog.

 

Third legend column support

Support for a third legend column accompanied by a new TextStyle value:
ltsXAndValueAndText.
This shows each point X, Y, and Text label at legend.

 

New Firemonkey dashboard project showcasing TeeChart standard series types

Full sources also available at GitHub:
https://github.com/Steema/TeeChart-for-FireMonkey-applications-samples/tree/master/StandardSeriesDemo