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.
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.
TTMSFNCChartEditorDialog can be used to manipulate the appearance and the data at runtime.
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.
The editor presents each chart and series properties and its subproperties in different tabs and groups the properties in logical categories.
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.
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.
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.
The Chart consists of multiple configurable visual elements that are numbered and explained in the screenshot below.
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.
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.
The title optionally displays a text with customizable position, font and font color.
The legend optionally displays the text with a small glyph representing the chart type for each series added to the Chart.
Each series has support for labels and multiple annotations for each added series point and can be customized in terms of appearance and formatting.
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.
|ctLine||Series are shown as a line from value to value.|
|ctXYLine||Series are shown as a line from value to value, with a custom
|ctDigitalLine||Series are shown as a digital line from value to value.|
|ctBar||Series is shown as bars with height representing the value.|
|ctStackedBar||Multiple series joined in stacked bar which shows the summed value of all grouped series of type
|ctStackedPercentageBar||Same as stacked bar but values per series are represented by percentage.|
|ctArea||Series are shown as a filled area|
|ctStackedArea||Multiple series joined in stacked area which shows the summed value of all grouped series of type ctStackedArea.|
|ctStackedPercentageArea||Same as stacked bar but values per series are represented by percentage.|
|ctMarker||Series are shown as shape/image per value.|
|ctXYMarker||Series are shown as shape/image per value with a custom
|ctPie||Series are shown as a pie shape with individual colourable slices.|
|ctSizedPie||Series are shown as a pie with slices with a fixed angle and a radius based on the added values.|
|ctVariableRadiusPie||Series are shown as a pie with slices with a variable angle and variable radius based on the added values.|
|ctSpider||Series are shown as a spider chart with multiple spokes based on the added values.|
|ctBand||Series are shown as a band chart with an upper
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, …
- 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
Important Notice: TMS FNC Chart requires TMS FNC Core (separately available at the My Products page)