From Steema Software Reference Wiki
Revision as of 11:39, 29 April 2016 by Clive (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Tchart java.png

Contents page

Tutorial 1 - Getting started

Getting Started - building Charts and populating Data Series


You may define the Chart appearance, titles, Legend characteristics and 3D aspect without having to include a data Series.
That gives you the freedom to add and remove different data Series types at runtime without having to redefine the whole Chart look and feel.


Everything comes together to make the final Chart, with Chart axes being the interface between Chart and Series.
A Series has data, and its values will influence the label characteristics of the Chart axes.
The axes appearance, colours, grid frequency and label fonts may all be defined for the Chart before adding data Series.
TeeChart will make a best estimate of most values to minimise the need for you to manually define Chart and Series methods.

The steps in this tutorial highlight how easy it is to build a Chart from scratch and will introduce you to the Chart Editor to enable you, through later tutorials, to modify and further enhance the appearance and functionality of the Chart at runtime. Good Charting !!

Building a Chart

Including TeeChart on a Form

By following the installation instructions for TeeChart you should have succeeded in adding the TeeChart Pro icons to the Java Component palette.
The TeeChart icon is a representation of a circled (Pie) Chart.
You will find TeeChart, the TChart component, in the Additional section of the Java Component Palette.


Select the first icon of the three and click and drag out to size TChart on a Form.
You will see TChart as a panel with some basic Chart features such as Axis and Title.

Populate the new data Series

For programmed input of data you will need to write some code. This section will show you the steps necessary to build a chart with coded input.

At runtime the Series will be empty of data unless you manually populate it. Select a Command button from the Component palette and place it on your Form. Double-click on the button to access the code editor. In the code Editor type these lines:

Series bar = new Bar(tChart1.getChart());
bar.add(400, "pears", Color.Green);
bar.add(500, "apples", Color.Red);
bar.add(400, "bananas", Color.Yellow);
bar.add(200, "oranges", Color.Orange);

Run the project and press the command button. Three new bars will appear on your Chart. That's it !! There's no more to it.

The Series' Add method accepts 3 variables, Value, Label and Colour. The Add method thus assumes equal spacing of values on the Label axis (in this case the X-Axis). If your data contains 2 variables you may use the AddXY Method. Add another Command button to your project and put this code in it. Run the Project and add points using this code:

Random rnd = new Random();

Series bar = new Bar(tChart1.getChart());

	if (bar.getCount() > 0)
	// Increment X Axis value and add a new random point
		bar.add((bar.getXValues().getLast()   rnd.nextInt(10)),
			((bar.getYValues().getLast() / (bar.getYValues().getLast() - 1.0))
			rnd.nextInt(10)), "Lemons", Color.GreenYellow);
		// Add a new random point
		bar.add(1, rnd.nextInt(10), "Lemons", Color.Yellow);

The Chart Editor

Accessing the Chart Editor at Runtime

To access the Chart Editor select a command button and place it on your Form. Double click it and add the following line of code.


Run the project and click the button to view the Chart Editor

The Chart Editor allows you access to most of the commonly used Chart properties at runtime.


To add a new Series, mouseclick on the Add... button and select the Series type from the Series Gallery. If after selecting a Series type you wish to change it later you may do so (with a few exceptions where the Series data content may be incompatible) by returning to the first Editor screen and selecting the Change.. button.

The Chart Series Gallery

TeeChart gallery

The Gallery consists of six tabbed pages:

Blbullet.gif Standard Series

Standard Series types: those likely to be called upon most frequently.

Blbullet.gif Financial

Financial Series include more specialised Financial Series types for financial applications.

Blbullet.gif Stats

Stats Series include more specialised Statistical Series types for planning or mapping applications.

Blbullet.gif Extended Series

Extended Series include more specialized Series types for Financial, planning or mapping applications.

Blbullet.gif 3D

3D Series Types, those types that take three (X, Y, Z) rather than two (X, Y) variables.

Blbullet.gif Other

Miscellaneous Series types.

Select a Series type. For this exercise we will choose a Bar Series type. The Gallery will close and the new Series will be displayed in the first Chart Editor screen.

Selecting a Series Type to suit your data needs

The last coded example generated new X and Y values. The X axis distance between points may not be constant, depending on the values used, which may cause overlapping of Bars in some cases. This would be desirable for some but not all applications. Using the Chart Editor to Change the Series type (Enter the Chart Editor at Design time and use the Change button on the first page) to a LineSeries shows an alternative way to graphically represent data with 2 variables. If your data contains more than 2 variables, there are other Series Types suited to displaying the data. The following table shows the composition of TeeChart Series types.

Series Type

No. of variables

Datasource Properties

Standard types



XValues, YValues, XLabel

Horizontal Line


XValues, YValues, XLabel

Fast Line


XValues, YValues, XLabel



XValues, YValues (called Bar), XLabel



XValues, YValues (called Bar), XLabel



XValues, YValues, XLabel



XValues, YValues, XLabel



Xvalues, YValues, XLabel



PieValues, XLabel



StartXValues, StartYValues, XLabel, EndXValues, EndYValues



Xvalues, YValues, XLabel, RadiusValues



StartValues, EndValues, AY (Y axis level), AXLabel (Label optionally shown on Y-axis or as mark)



X0 (Top), Y0 (Bottom), X1 (Left), Y1 (Right)

Subset of Extended Types



XValues, YValues, XLabel



OpenValues, CloseValues, HighValues, LowValues, DateValues



XValues, YValues, XLabel, ZValues

Error Bar


XValues, YValues, XLabel, ErrorValues



XValues, YValues, XLabel, ZValues



XValues, YValues, Labels (Polar has Angle and Radius)



XValues, YValues, Labels (Radar has Angle and Radius)

3D Surface


XValues, YValues, ZValues



XValues, YValues (VolumeValues), XLabel


© 1998-2020 Steema Software SL. All rights reserved.