Skip to content

Overview

Description

The TMS FNC Chart (further referred to as “Chart”) is a fully cross-platform component designed to display different kinds of data such as financial and marketing data, monthly business sales, graphical and math data and much more as a chart. The Chart supports types such as bar, area, line, marker and variants such as stacked bar, stacked area, stacked percentage area, stacked percentage bar XY-line, XY-scatter and digital line.

Getting Started

The Chart has a visual and a non-visual component. When creating a new project, the tool palette will allow you to select the TTMSFNCChart component, this is the global component for visual representation of your data. There ara a number of subtypes available to quickly start with the chart type of your choice. E.g. TTMSFNCBarChart, TTMSFNCPieChart, TTMSFNCCandleStickChart, ... The TTMSFNCChartEditorDialog can be used to manipulate the appearance and the data at runtime.

Design Time

When dropping an instance of the chart on the form you will notice that the component will initialize with some sample data based on chosen subtype. This allows you to quickly set up a test environment for your application.

Selecting the component allows you to manipulate the appearance of the various elements, the collection of series, points and annotations through the object inspector. To allow you to change these properties in a more convenient way, we have created a designtime editor available when double-clicking on the TTMSFNCChart instance, or when editing the Series property.

Getting_started

The editor presents each chart and series properties and its subproperties in different tabs and groups the properties in logical categories.

Runtime

The introduction of this chapter mentioned a non-visual component TTMSFNCChartEditorDialog. This component is a wrapper around the design time editor and can be used to edit the Chart at runtime.

The data that is initialized by default is also available at runtime when starting the application. This data can be cleared by removing the points from the series, or by removing all series from the Chart. The code that can be used to accomplish this is demonstrated below.

//Clear points, keep series
TMSFNCChart1.BeginUpdate;
for I := 0 to TMSFNCChart1.Series.Count - 1 do
 TMSFNCChart1.Series[I].Points.Clear;
TMSFNCChart1.EndUpdate;

//Clear series and points
TMSFNCChart1.BeginUpdate;
TMSFNCChart1.Clear;
TMSFNCChart1.EndUpdate;
When at some point you wish to add some sample series and points for testing purposes, you can use the code below.

//Initialize a sample
TMSFNCChart1.BeginUpdate;
TMSFNCChart1.InitSample;
TMSFNCChart1.EndUpdate;

Appearance

Color Scheme

You can choose which initial colors you want to use for each series. You can select the color list that you can customize, the standard Excel colors or the Monochromatic value that will pick shades of a selected color.

Color_Scheme

Global Font

To change the font of the complete chart, you can use the GlobalFont property. This allows you to change the size, color, fontname and style of all the fonts in the chart. With the scale property you can change the font sizes in relation to their previous sizes.

Organization

The Chart consists of multiple configurable visual elements that are numbered and explained in the screenshot below.

Organisation

1: Y–axis
The y-axis displays a range of series values from a predefined range or an automatic calculated minimum and maximum range. The y-axis can be set at the left, center and/or right side of the Chart. Different y-axis values can be shown for different series. The y-axis has the capability to show major & minor units with a different font and has multiple events for further customization.

2: X–axis
The x-axis displays a range of series values from a predefined range or an automatic calculated minimum and maximum range. The x-axis can be set at the top, center and/or bottom side of the Chart. Different x-axis values can be shown for different series. The x-axis has the capability to show major & minor units with a different font and has multiple events for further customization.

3: Title
The title optionally displays a text with customizable position, font and font color.

4: Legend
The legend optionally displays the text with a small glyph representing the chart type for each series added to the Chart.

5: Labels/Annotations
Each series has support for labels and multiple annotations for each added series point and can be customized in terms of appearance and formatting.

6: Series
The series of the Chart can be changed to one of the types listed below. Multiple series can be combined to create stacked series and show the summed total.

Name Type Description
ctLine Organisation Series are shown as a line from value to value.
ctXYLine Organisation Series are shown as a line from value to value, with a custom X value.
ctDigitalLine Organisation Series are shown as a digital line from value to value.
ctBar Organisation Series is shown as bars with height representing the value.
ctStackedBar Organisation Multiple series joined in stacked bar which shows the summed value of all grouped series of type ctStackedBar.
ctStackedPercentageBar Organisation Same as stacked bar but values per series are represented by percentage.
ctArea Organisation Series are shown as a filled area
ctStackedArea Organisation Multiple series joined in stacked area which shows the summed value of all grouped series of type ctStackedArea.
ctStackedPercentageArea Organisation Same as stacked bar but values per series are represented by percentage.
ctMarker Organisation Series are shown as shape/image per value.
ctXYMarker Organisation Series are shown as shape/image per value with a custom x-value
ctPie Organisation Series are shown as a pie shape with individual colourable slices.
ctSizedPie Organisation Series are shown as a pie with slices with a fixed angle and a radius based on the added values.
ctVariableRadiusPie Organisation Series are shown as a pie with slices with a variable angle and variable radius based on the added values.
ctSpider Organisation Series are shown as a spider chart with multiple spokes based on the added values.
ctBand Organisation Series are shown as a band chart with an upper (YValue) and lower value (YValueSecond)

Availability

Supported frameworks and platforms

  • VCL Win32/Win64
  • FMX Win32/Win64, macOS, iOS, Android, Linux
  • LCL Win32/Win64, macOS, iOS, Android, numerous Linux variants including Raspbian
  • WEB: Chrome, Edge, Firefox, …

Supported IDE’s

  • Delphi XE7 and C++ Builder XE7 or newer releases
  • Lazarus 1.4.4 with FPC 2.6.4 or newer official releases
  • TMS WEB Core for Visual Studio Code 1.3 or newer releases

Note

Important Notice: TMS FNC Chart requires TMS FNC Core (separately available at the My Products page)