Welcome to TeeChart version 3
Contents
Introduction
TOC o ‘1-3’ Introduction GOTOBUTTON _Toc378759117 PAGEREF _Toc378759117 7
Licensing issues GOTOBUTTON _Toc378759118 PAGEREF _Toc378759118 7
About TeeChart GOTOBUTTON _Toc378759119 PAGEREF _Toc378759119 7
TeeChart version 3 GOTOBUTTON _Toc378759120 PAGEREF _Toc378759120 8
TeeChart Pro GOTOBUTTON _Toc378759121 PAGEREF _Toc378759121 8
Getting Started
Installing TeeChart GOTOBUTTON _Toc378759122 PAGEREF _Toc378759122 11
Installation steps GOTOBUTTON _Toc378759123 PAGEREF _Toc378759123 11
TeeChart version 3 runtime contents GOTOBUTTON _Toc378759124 PAGEREF _Toc378759124 11
Packages GOTOBUTTON _Toc378759125 PAGEREF _Toc378759125 11
TeeChart GOTOBUTTON _Toc378759126 PAGEREF _Toc378759126 11
Online help GOTOBUTTON _Toc378759127 PAGEREF _Toc378759127 12
TeeChart & QuickReport v2.0 GOTOBUTTON _Toc378759129 PAGEREF _Toc378759129 12
TeeChart Manual (MS Word format) GOTOBUTTON _Toc378759130 PAGEREF _Toc378759130 12
Using TeeChart on-line help GOTOBUTTON _Toc378759131 PAGEREF _Toc378759131 13
Using TeeChart on-line help GOTOBUTTON _Toc378759132 PAGEREF _Toc378759132 13
Selecting a TeeChart component GOTOBUTTON _Toc378759133 PAGEREF _Toc378759133 13
Selecting a TeeChart property, method or event GOTOBUTTON _Toc378759134 PAGEREF _Toc378759134 13
TeeChart Wizard GOTOBUTTON _Toc378759135 PAGEREF _Toc378759135 14
Using the TeeChart Wizard GOTOBUTTON _Toc378759136 PAGEREF _Toc378759136 14
A TeeChart quick start guide GOTOBUTTON _Toc378759137 PAGEREF _Toc378759137 15
Which TeeChart component should I use? GOTOBUTTON _Toc378759138 PAGEREF _Toc378759138 15
Creating a new chart with TChart or TDBChart component GOTOBUTTON _Toc378759139 PAGEREF _Toc378759139 15
Create a new Form. GOTOBUTTON _Toc378759140 PAGEREF _Toc378759140 15
Edit the new chart GOTOBUTTON _Toc378759141 PAGEREF _Toc378759141 16
The Chart editor GOTOBUTTON _Toc378759142 PAGEREF _Toc378759142 17
Add a data series GOTOBUTTON _Toc378759143 PAGEREF _Toc378759143 17
Edit the series GOTOBUTTON _Toc378759144 PAGEREF _Toc378759144 18
Configuring data series in a TChart GOTOBUTTON _Toc378759145 PAGEREF _Toc378759145 18
Example Pie-series GOTOBUTTON _Toc378759146 PAGEREF _Toc378759146 19
Editing the series GOTOBUTTON _Toc378759147 PAGEREF _Toc378759147 19
Configuring data series in a TDBChart GOTOBUTTON _Toc378759148 PAGEREF _Toc378759148 20
Using the TeeChart demos GOTOBUTTON _Toc378759149 PAGEREF _Toc378759149 24
Charting Reference
The Chart components GOTOBUTTON _Toc378759150 PAGEREF _Toc378759150 28
Two Chart components GOTOBUTTON _Toc378759151 PAGEREF _Toc378759151 28
Chart subcomponents GOTOBUTTON _Toc378759152 PAGEREF _Toc378759152 28
The Chart as backdrop to your series GOTOBUTTON _Toc378759153 PAGEREF _Toc378759153 28
Associating a series with a Chart GOTOBUTTON _Toc378759154 PAGEREF _Toc378759154 28
Often used parameters GOTOBUTTON _Toc378759155 PAGEREF _Toc378759155 29
TChart component GOTOBUTTON _Toc378759156 PAGEREF _Toc378759156 32
TDBChart component GOTOBUTTON _Toc378759157 PAGEREF _Toc378759157 32
Creating the Dataset GOTOBUTTON _Toc378759158 PAGEREF _Toc378759158 32
Connecting your series to a database Dataset GOTOBUTTON _Toc378759159 PAGEREF _Toc378759159 32
Coding your datasource GOTOBUTTON _Toc378759160 PAGEREF _Toc378759160 33
Series types GOTOBUTTON _Toc378759161 PAGEREF _Toc378759161 35
TChartSeries GOTOBUTTON _Toc378759162 PAGEREF _Toc378759162 35
Line series GOTOBUTTON _Toc378759163 PAGEREF _Toc378759163 35
Line GOTOBUTTON _Toc378759164 PAGEREF _Toc378759164 35
Fast line GOTOBUTTON _Toc378759165 PAGEREF _Toc378759165 35
Bar GOTOBUTTON _Toc378759166 PAGEREF _Toc378759166 35
Example bar series configuration GOTOBUTTON _Toc378759167 PAGEREF _Toc378759167 36
Bar series display GOTOBUTTON _Toc378759168 PAGEREF _Toc378759168 37
Horizontal bar GOTOBUTTON _Toc378759169 PAGEREF _Toc378759169 39
Area GOTOBUTTON _Toc378759170 PAGEREF _Toc378759170 39
Point GOTOBUTTON _Toc378759171 PAGEREF _Toc378759171 40
Pie GOTOBUTTON _Toc378759172 PAGEREF _Toc378759172 40
Arrow GOTOBUTTON _Toc378759173 PAGEREF _Toc378759173 41
Bubble GOTOBUTTON _Toc378759174 PAGEREF _Toc378759174 41
Gantt GOTOBUTTON _Toc378759175 PAGEREF _Toc378759175 41
How to add Gantt bars manually GOTOBUTTON _Toc378759176 PAGEREF _Toc378759176 42
Shape GOTOBUTTON _Toc378759177 PAGEREF _Toc378759177 43
Combining series GOTOBUTTON _Toc378759178 PAGEREF _Toc378759178 44
Example series combination GOTOBUTTON _Toc378759179 PAGEREF _Toc378759179 44
Extended series GOTOBUTTON _Toc378759180 PAGEREF _Toc378759180 46
Candle GOTOBUTTON _Toc378759181 PAGEREF _Toc378759181 46
Volume GOTOBUTTON _Toc378759182 PAGEREF _Toc378759182 47
Errorbar GOTOBUTTON _Toc378759183 PAGEREF _Toc378759183 47
Surface GOTOBUTTON _Toc378759184 PAGEREF _Toc378759184 48
Polar GOTOBUTTON _Toc378759185 PAGEREF _Toc378759185 48
Custom series GOTOBUTTON _Toc378759186 PAGEREF _Toc378759186 48
QuickReport Integration GOTOBUTTON _Toc378759187 PAGEREF _Toc378759187 49
Adding a Chart to QuickReport GOTOBUTTON _Toc378759188 PAGEREF _Toc378759188 49
Notes on working with QuickReport GOTOBUTTON _Toc378759189 PAGEREF _Toc378759189 49
Functions GOTOBUTTON _Toc378759190 PAGEREF _Toc378759190 50
Standard functions GOTOBUTTON _Toc378759191 PAGEREF _Toc378759191 50
Add GOTOBUTTON _Toc378759192 PAGEREF _Toc378759192 50
Subtract GOTOBUTTON _Toc378759193 PAGEREF _Toc378759193 51
Multiply GOTOBUTTON _Toc378759194 PAGEREF _Toc378759194 52
Divide GOTOBUTTON _Toc378759195 PAGEREF _Toc378759195 52
High GOTOBUTTON _Toc378759196 PAGEREF _Toc378759196 53
Low GOTOBUTTON _Toc378759197 PAGEREF _Toc378759197 54
Average GOTOBUTTON _Toc378759198 PAGEREF _Toc378759198 54
Extended Functions GOTOBUTTON _Toc378759199 PAGEREF _Toc378759199 55
Moving average GOTOBUTTON _Toc378759200 PAGEREF _Toc378759200 55
R.S.I. GOTOBUTTON _Toc378759201 PAGEREF _Toc378759201 55
Exponential Average GOTOBUTTON _Toc378759202 PAGEREF _Toc378759202 55
Momentum GOTOBUTTON _Toc378759203 PAGEREF _Toc378759203 56
Fitted Curve GOTOBUTTON _Toc378759204 PAGEREF _Toc378759204 56
Custom Functions GOTOBUTTON _Toc378759205 PAGEREF _Toc378759205 56
Working with charts and series GOTOBUTTON _Toc378759206 PAGEREF _Toc378759206 57
Click events GOTOBUTTON _Toc378759207 PAGEREF _Toc378759207 57
Chart OnClickSeries GOTOBUTTON _Toc378759208 PAGEREF _Toc378759208 57
Chart OnClick GOTOBUTTON _Toc378759209 PAGEREF _Toc378759209 57
Series OnClick and OnDblClick GOTOBUTTON _Toc378759210 PAGEREF _Toc378759210 58
Custom drawing on the chart GOTOBUTTON _Toc378759211 PAGEREF _Toc378759211 58
Calculating Co-ordinates GOTOBUTTON _Toc378759212 PAGEREF _Toc378759212 58
Chart Canvas GOTOBUTTON _Toc378759213 PAGEREF _Toc378759213 60
Internal bitmap GOTOBUTTON _Toc378759214 PAGEREF _Toc378759214 61
Repainting GOTOBUTTON _Toc378759215 PAGEREF _Toc378759215 62
Where to draw ? GOTOBUTTON _Toc378759216 PAGEREF _Toc378759216 62
Chart Regions GOTOBUTTON _Toc378759217 PAGEREF _Toc378759217 62
Drawing GOTOBUTTON _Toc378759218 PAGEREF _Toc378759218 62
Setting Axis scales GOTOBUTTON _Toc378759219 PAGEREF _Toc378759219 63
CustomDraw (Axis) GOTOBUTTON _Toc378759220 PAGEREF _Toc378759220 66
Series manipulation GOTOBUTTON _Toc378759221 PAGEREF _Toc378759221 66
Creating Series at runtime. GOTOBUTTON _Toc378759222 PAGEREF _Toc378759222 67
Series array property GOTOBUTTON _Toc378759223 PAGEREF _Toc378759223 67
SeriesCount property GOTOBUTTON _Toc378759224 PAGEREF _Toc378759224 68
Deleting Series GOTOBUTTON _Toc378759225 PAGEREF _Toc378759225 68
Changing the Series Z order at runtime. GOTOBUTTON _Toc378759226 PAGEREF _Toc378759226 68
Adding Points GOTOBUTTON _Toc378759227 PAGEREF _Toc378759227 69
Null Values GOTOBUTTON _Toc378759228 PAGEREF _Toc378759228 69
Controlling Points Order GOTOBUTTON _Toc378759229 PAGEREF _Toc378759229 70
XY Points GOTOBUTTON _Toc378759230 PAGEREF _Toc378759230 71
Point Limits GOTOBUTTON _Toc378759231 PAGEREF _Toc378759231 71
Deleting Points GOTOBUTTON _Toc378759232 PAGEREF _Toc378759232 71
Retrieving and modifying Points GOTOBUTTON _Toc378759233 PAGEREF _Toc378759233 71
Locating Points GOTOBUTTON _Toc378759234 PAGEREF _Toc378759234 72
Point Statistics GOTOBUTTON _Toc378759235 PAGEREF _Toc378759235 72
Notifications GOTOBUTTON _Toc378759236 PAGEREF _Toc378759236 73
Point Colours GOTOBUTTON _Toc378759237 PAGEREF _Toc378759237 73
Point Labels GOTOBUTTON _Toc378759238 PAGEREF _Toc378759238 73
Changing the Series type at runtime – Advanced GOTOBUTTON _Toc378759239 PAGEREF _Toc378759239 73
Printing Charts GOTOBUTTON _Toc378759240 PAGEREF _Toc378759240 74
Margins GOTOBUTTON _Toc378759241 PAGEREF _Toc378759241 74
Resolution GOTOBUTTON _Toc378759242 PAGEREF _Toc378759242 74
Print, PrintLandscape. GOTOBUTTON _Toc378759243 PAGEREF _Toc378759243 75
PrintPartial GOTOBUTTON _Toc378759244 PAGEREF _Toc378759244 75
Multiple Charts per Page GOTOBUTTON _Toc378759245 PAGEREF _Toc378759245 75
Windows and printers limitations GOTOBUTTON _Toc378759246 PAGEREF _Toc378759246 75
Chart Zoom and Scroll GOTOBUTTON _Toc378759247 PAGEREF _Toc378759247 76
Zoom GOTOBUTTON _Toc378759248 PAGEREF _Toc378759248 76
Animated Zoom GOTOBUTTON _Toc378759249 PAGEREF _Toc378759249 76
Zooming by code GOTOBUTTON _Toc378759250 PAGEREF _Toc378759250 77
Undoing Zoom GOTOBUTTON _Toc378759251 PAGEREF _Toc378759251 77
Zoom Events GOTOBUTTON _Toc378759252 PAGEREF _Toc378759252 78
Scrolling GOTOBUTTON _Toc378759253 PAGEREF _Toc378759253 78
Scroll event GOTOBUTTON _Toc378759254 PAGEREF _Toc378759254 79
Controlling scroll GOTOBUTTON _Toc378759255 PAGEREF _Toc378759255 79
Keyboard Scrolling GOTOBUTTON _Toc378759256 PAGEREF _Toc378759256 79
Real-Time Charting and Speed GOTOBUTTON _Toc378759257 PAGEREF _Toc378759257 79
BufferedDisplay GOTOBUTTON _Toc378759258 PAGEREF _Toc378759258 80
Functions GOTOBUTTON _Toc378759259 PAGEREF _Toc378759259 80
Adding a function with the Chart editor GOTOBUTTON _Toc378759260 PAGEREF _Toc378759260 80
Deleting a function with the Chart editor GOTOBUTTON _Toc378759261 PAGEREF _Toc378759261 81
Changing a FunctionType with the Chart editor GOTOBUTTON _Toc378759262 PAGEREF _Toc378759262 81
Adding a function by code GOTOBUTTON _Toc378759263 PAGEREF _Toc378759263 81
Deleting a function by code GOTOBUTTON _Toc378759264 PAGEREF _Toc378759264 82
Period GOTOBUTTON _Toc378759265 PAGEREF _Toc378759265 82
Editing charts GOTOBUTTON _Toc378759266 PAGEREF _Toc378759266 83
Navigating the Chart Editor and using the Object Inspector GOTOBUTTON _Toc378759267 PAGEREF _Toc378759267 83
Pages of the Chart Editor GOTOBUTTON _Toc378759268 PAGEREF _Toc378759268 83
Page tab sections of the Chart Editor GOTOBUTTON _Toc378759269 PAGEREF _Toc378759269 83
Object Inspector GOTOBUTTON _Toc378759270 PAGEREF _Toc378759270 83
Index 85
Introduction
Thank You for using TeeChart version 3 – we hope you enjoy working with it!
This manual is aimed at helping those with or without experience of development with TeeChart. There�s a Quick Start section to get you up to speed on the fundamentals of TeeChart version 3, a chart type overview and a comprehensive Charting reference section. We�ve packed in many hints and tips, basing the contents on our experience of types of questions received from TeeChart customers.
The manual is protected by copyright. Please don�t distribute the whole manual. Feel free, however, to copy and distribute any specific parts of this manual you find useful.
Introduction
TeeChart version 3 contains many exciting new features.
There are many new enhancements and extensions to both Chart and data series types. The Chart Editor has improved to offer an integrated configuration interface (one-stop shop) for both chart and series.
All the underlying native Delphi component architecture has been maintained allowing you to work with data series independently from the chart. Still inherent is the flexibility to mix and match different series across different charts. New Function definitions can be applied to any group of your data series across charts. Available now is series cloning, type change and chart copy that permits all chart and series parameters to be copied, as one, to a new chart, thus permiting Copy & Paste inside Delphi IDE and creation of Chart Templates.
Series can be connected to Tables, Queries and RemoteDatasets residing on different Forms or DataModules. You can create ActiveX Forms containing Chart components and deploy them on the WWW using new Delphi 3 features.
TChart is seamlessly integrated with QuickReport with a custom built TChart component on the QuickReport palette in Delphi 3.
Licensing issues
Royalty free!! If you wish to distribute your programs compiled with TeeChart components you are free to do so with no royalties XE ‘royalties’ !! If you wish to distribute your programs with the possibility that users may retouch or access the code of any TeeChart components therein, or use TeeChart components to re-compile their code, you should purchase TeeChart for those users as they will require access to TeeChart source code or compiled units.
Disclaimer
TeeMach SL disclaim all warranties, either express or implied, including but not limited to implied warranties of merchantability and fitness for a particular purpose, with respect to the instructions contained in this manual.
In no event shall TeeMach SL be liable for any damages whatsoever (including without limitation, damages for loss of business profits, business interruption, loss of business information, or other pecuniary loss), even if TeeMach SL have been advised of the possibility of such damages.
About TeeChart
TeeChart charting components have been written in Delphi by David Berneda. They are 100% Delphi Native Visual Component Library compliant. TeeChart products are distributed and supported by TeeMach SL. of Barcelona , >Catalonia>, >Spain> .
TeeChart version 3
Runtime TeeChart libraries are included as part of Delphi version 3. They include many compiled units of the Chart components and all compiled standard series types. TeeChart v3 has a design time Chart Editor, extensive coded examples and demos, full online help and electronically saved (MS Word format) user manual.
Features of TeeChart 3 runtime version:
32-bit version for Delphi 3 standard Series types Statistical functions Data aware Series Gallery 2D, 3D QuickReport Integration Zoom, scroll and real time Royalty free Custom drawing Custom printing Extensive demos Design time integrated Chart and Series editor Online help Electronic reference manual (Word format)
TeeChart Pro
TeeChart Pro is a comprehensive charting tool aimed at those developers wishing to program with or make use of extended TeeChart functionality. TeeChart Pro includes 100% source code.
Extended features of TeeChart Pro:
100 % Source code 16-bit version for Delphi 1 32-bit version for Delphi 2 and 3 Extended Series types Custom Series creation Developer Custom Series guide Extended Statistical functions Extensive demo code Runtime Chart Editor and Gallery Extended Online help Printed reference manual with developer guide
With TeeChart Pro you define the limits. Use the developer guide to help you create hot-spots for drilldown on your charts or customise the TeeChart code to create your own series types and functions and permanently add them to the TeeChart Gallery. With 100% source code you can choose which functionality to deliver.
How to obtain TeeChart Pro
To obtain TeeChart Pro you could use the auto-create order form in the about TeeChart section, accessible via a right-mouse click on your chart in Delphi at design time. TeeChart�s Online help also contains order information, just search for TeeChart Pro in the help index.
Getting Started
This section should bring you up to speed if you are trying out TeeChart version 3 for the first time. Building a chart from scratch is very quick with TeeChart so we recommend it worth your while to run through the examples in your Delphi IDE.
Installing TeeChart
You may already have TeeChart v3 runtime installed as shipped with Delphi version 3. Otherwise, if this is the first installation of TeeChart in your machine or if you require to replace the installed TeeChart package, the following guide takes you through the installation steps for TeeChart runtime version and Online help. If you would like to run TeeChart on a different version of Delphi you need TeeChart Pro please refer to the section about TeeChart Pro in the introduction of this manual.
Installation steps
Copy these four Delphi packages to your Borland package directory:
Tee30.dpl
TeeDB30.dpl
TeeUI30.dpl
DCLTee30.dpl
2. Install DCLTee30 as a Delphi 3 package using the Delphi standard package installation steps.
TeeChart version 3 runtime contents
Packages
Delphi version 3 uses packages to store component libraries. The package is a DLL that contains a compiled version of the TeeChart libraries.
Packages
Tee30
TeeDB30
TeeUI30
DCLTee30
They are installed in the recommended default Borland directory for packages.
TeeChart
TeeChart 3 runtime version (the version shipped as standard with Delphi version 3) is only available as a package for Delphi version 3. To install TeeChart in Delphi version 1 and 2 or to install extended TeeChart functionality in Delphi versions 1, 2 or 3 you need TeeChart Pro v3. TeeChart Pro supports all versions of Delphi . A trial version is available at https://ourworld.compuserve.com/homepages/dberneda.
Online help
TeeChart comes with its own context sensitive help file. Help will become available when the TeeChart package is installed. If you experience any problems, confirm that the TeeChart.hlp file is installed in the default Borland helpfile directory.
TeeChart & QuickReport v2.0
TeeChart has been written to integrate with QuSoft�s QuickReport. QuickReport integration is installed as standard with the TeeChart version 3 runtime package.
TeeChart v3 runtime supports QuickReport version 2.
TeeChart Manual (MS Word format)
This manual may be printed, copied and distributed as required. Please maintain the reference of source for the document when used out of direct context (TeeMach TeeChart version 3 Chart Guide).
Using TeeChart on-line help
Using TeeChart on-line help
Selecting a TeeChart component
Whilst designing your project using a TeeChart component you may select the component from the component palette or on the form where you have placed it and key F1. Context sensitive help relating to that component will appear.
Selecting a TeeChart property, method or event
Highlight a property or event in Object Inspector and key F1 to obtain help for that item. Alternatively write the word for which you would like some help in your code. Select the word by placing and clicking the cursor on that word and key F1. If help is available, TeeChart context sensitive help will access directly a description relating to that functionality.
TeeChart Wizard
Using the TeeChart Wizard
To create a Chart using TeeChart Wizard select the File menu in Delphi and N ew. Choose Business from the tab selector in the New Items window. You will see the TeeChart Wizard icon.
Simply double-click the icon to start creating charts! The Wizard will lead you through the steps necessary to create your own non-database or database aware chart.
A TeeChart quick start guide
Which TeeChart component should I use?
There are three TeeChart icons in the component palette.
TChart TDBChart TQRChart
TQRChart, is a component especially tailored for use with Qusoft�s QuickReport – We will discuss it in another chapter. TQRChart XE ‘TQRDBChart is descendant of TDBChart
The 2 components, TChart XE ‘TChart and TDBChart XE ‘TDBChart are the basic building blocks of all TeeChart charts.
If you wish to create the data series for your chart manually, or via a coded procedure then use the TChart component. If you wish to source your graph data from a table or SQL query then use the TDBChart component. You may, of course, use TDBChart in all cases but it will result in a larger compiled size of your code which would be inefficient if you are not using a datasource (explanation follows).
Once an initial data series is defined, both chart components, TChart and TDBChart support the use of another data series as a data source.
So why two kinds of Chart components? – couldn�t we achieve this functionality via just one component?
Answer:
Projects compiled with using only TChart components, don’t need the Borland Database Engine DLL’s (BDE).
Internally, both derive from the TCustomChart XE ‘TCustomChart component, which is responsible for most charting capabilities.
Delphi 3 offers somewhat more flexibility as a TClientDataset XE ‘TClientDataset can be accessed without the need for BDE.
Creating a new chart with TChart or TDBChart component
Many of the steps necessary for defining a TChart or TDBChart are the same. This section describes the common steps needed to start defining either of the two types of chart.
Create a new Form.
Create a new form and place a TChart or TDBChart component on it (drag it across from the component palette).
Drag the corners of the new TChart or TDBChart component out to a size that helps you visualise the contents of the new chart as you define it. Later you can adjust the size of the chart to suit your needs.
Edit the new chart
Position the mousepointer over the new chart and press the right mousebutton. A menu appears that includes the �Edit Chart� option.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC r 1 Using the right mouse button on the chart will call the Chart options menu. > >
Select the E dit Chart� option to edit the chart and define and populate its data series.
The Chart editor
Fig. STYLEREF 1 n SEQ Fig. * ARABIC The Chart Editor screen
The Chart page (1st page) of the Chart editor contains definition information for the chart. There are various sections to define general and other more specific, chart parameters. Some parameters won�t apply until you have some data series defined in the chart. Try modifying a parameter, the Title for example, and you will see it update in real time on the chart.
All OK. – But what we really want to see is our data charted. To do that we need to create a data series.
Add a data series
Press the Add button in the Series tab section of the Chart page. TeeChart will show you a gallery of series types. Select one to add to your chart, you can change its type later if you decide that you would prefer to visualise your data in a different way.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC The Chart Gallery
Select a series type by mouse or with arrow keys and press �OK�. Double-clicking on the series type will achieve the same result. The Extended series page is only available in the Gallery with TeeChart Pro.
The series type is automatically added to your chart. In the chart editor you will see a new configuration tab added for the new series.
Suppose we had selected a line series. The editor will appear as follows:
Fig. STYLEREF 1 n SEQ Fig. * ARABIC New series added to chart
TeeChart has added the series to the chart. It has also added some random values so that you can visualise, in the chart, the series appearance at design-time to easily follow any changes you are making.
Press the F9 key to compile your project. The project should compile to show you an empty chart. The random values don�t work at runtime so the next step is to go back to the chart editor and add a data source or write your own code to add data values.
Edit the series
Selecting the series tab allows you to edit your series. The next step is to add data to the series. The steps necessary to include the data for the series vary slightly between a TChart component and a TDBChart component. See the following 2 sections:
Configuring data series in a TChart for a description on how to add data to a TChart series.
Configuring data series in a TDBChart describes the actions necessary to add data to a TDBChart series.
Configuring data series in a TChart
We have a TChart on the form and have added a series to it. We are ready to populate the series.
Let�s type some Pascal code to add points values programmatically.
We’ll see later how to create a database-aware Chart with automatic record retrieval.
Example Pie-series
Suppose the series we added was a Pie series. We could populate the series in the following way. For the following code to work we should leave the series name as its default of Series1.
Place a TButton on your Form and go to the OnClick event .
Copy the following code at the Button1.OnClick event:
With Series1 do
Begin
Add( 40, ‘Pencil’ , clRed ) ;
Add( 60, ‘Paper’, clBlue ) ;
Add( 30, ‘Ribbon’, clGreen ) ;
end;
A description of the Add method and other available methods and properties is available at design time via the context sensitive help included with TeeChart. Place the cursor on the word Add in your code and press F1 for a full description of the method.
Return to your code and press F9 again to run the project.
Press Button1 to see the Pie chart appear – the code works!
Editing the series
Close the program to go back to Delphi �s IDE.
In design mode, all Chart and Series properties are accessible through the Delphi Object Inspector or by right-clicking the Chart and selecting the �Edit chart� option or double-clicking on the part of the Chart that you wish to edit. Here we�ll use the Chart editor to edit our new chart and series. Fig. 5 Shows the first editor screen.
To edit features of the series we can double-click on the series in the list or highlight the series and select E dit or directly select the tab for the series – each technique will take us to the editor for the series.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC The Chart Editor screen showing the new Pie series
Try changing some properties of the Pie series; you will see the results update automatically on the chart. There is no cancel to undo changes but most parameters are easily toggled. Remember, in design time the TChart component hasn�t yet run your code so it shows the randomly generated set of data. You will need to start your project to see how the new parameters show up with your own data.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC The Chart Editor series page showing editor tab for our Pie series
Many things can be done visually in the editor, or try modifying some parameters in Object Inspector, or modifying a property with your own code. For more advanced projects, you�ll most likely find yourself typing some Object Pascal code.
Now we�ll take a closer look at adding data to the TDBChart component.
Configuring data series in a TDBChart
Prior to using any database facilities, you should have correctly installed the Borland Database Engine (or equivalent) and the Database Delphi VCL components.
A Step by step guide to creating a database aware chart.
Place a TTable XE ‘TTable component and point it to the ‘DBDEMOS’ database and the ‘ANIMALS.DBF’ dBase table.
Place a TDatasource XE ‘TDatasource component and set its DataSet property to Table1.
Place a TDBGrid XE ‘TDBGrid and set the DataSource XE ‘DataSource property to DataSource1.
Set the Table XE ‘Table 1.Active property to TRUE to see the Grid filled with table data.
Place a TDBChart XE ‘TDBChart component onto a Form.
Select and install a Pie XE ‘Pie’ series as described in section REF _Ref369794094 n �Edit the new chart�
Go to the series page of the Chart editor by either double-clicking on the series name, highlighting the series and selecting E dit, or by selecting the series tab.
Select your series from the series listbox and go to the datasource tab.
From the listbox select your data source type.
There are 4 types of data source available. The DataSource XE ‘DataSource style is a component property that may be one of the following:
� N o data� if points are being added programmatically (at source code).
or
�Random values� draw your chart series with random values.
or�
�A function XE ‘function’ which may be:
One or more other series (like LineSeries1, BarSeries2, etc.) which could come from this chart or from another chart in your project. A function may work with a combination of one or more other series and an algorithmic function (min, max, average, etc.).
or..
A � D ataset� which may be a:
TTable, TQuery, TClientDataset or any other TDataset component. (like Table1, TQuery1, etc.)
Adding a dataset
For our example, let’s choose the 4th option from the previous section, �Dataset� style. In our TDBChart we�ll include data from the table that we�ve already added to the form.
You need to select the listbox option A dataset to map this series to the table that you have included in the project. As you make the selection you will notice new page options appear to define the dataset for the pie series. Your editor should look like Fig. 5-7
Fig. STYLEREF 1 n SEQ Fig. * ARABIC The Chart Editor screen showing the Data source tab for our pie series
All you need to define a simple dataset for the series lies here. You have already included a table and datasource in your form, and set the table to active. But the options here offer you the flexibility to define the dataseries in varying ways:
Click on the down-arrow for the � D ataset:� combobox.
If you have an activated table in the form it will be
highlighted here.
Select your table.
Define the values that will be plotted in the chart:
As we have defined a Pie XE ‘Pie’ series we are presented with pie specific configuration options. Each series has parameters that vary, but only slightly, in definition from the example below.
The Pie field is mandatory, and must contain a valid numeric field or a string field with values that can be converted to numbers.
In our example, choose the Weight field.
(The ANIMALS table is a collection of animal names with weight and size information.)
You can optionally select an Labels XE ‘Labels’ field to draw the corresponding string for each point on the pie.
In our example, choose the Name field.
This label will be used to draw the Pie Legend.
Note
Some chart series types have more than one figure to represent a point. Values that are plotted by date or time are an example of X Values XE ‘X Values’ Series. Not all date-time values should be equally spaced. The X Value is the specific horizontal position for each Y value XE ‘Y value’ . Later try deleting the pie series and adding a series of a different type, – ie. Lineseries -, you will see the option to apply X and Y values appear.
(We don’t have X Values in a Pie series.)
Now click the ‘OK’ button.
The TDBChart component will show a Pie Chart and a Legend.
You are seeing exactly the same chart you saw when you pressed F9 to run the project.
Using the TeeChart demos
You have seen the most basic TeeChart procedures.
The next step is to look at some examples in the demo files.
First Thing To Do:
Open in DEMOSTEEDEMO folder the TEEDEMO XE ‘TEEDEMO’ .DPR Delphi Project.
There are many included forms in this demo.
Each form shows a specific TeeChart feature or Series type.
Many Forms contain Pascal source code to show event handling or interactive
charting.
Let’s see the ScrollForm XE ‘ScrollForm’ demo form. Click on Project Manager and search for USCROLL unit or ScrollForm form. This form shows a basic TChart component with one TLineSeries component.
Note:
In this example we�ve named the series �LinesSeries1� to clearly identify it in the code. It�s not necessary though to name the series according to series type as the flexibility of TeeChart�s components offers the ability to change type at any time – thus series names by default are generic, Series1, Series2, etc..
Click on Form.OnCreate or switch to source code to see the following:
procedure TScrollForm.FormCreate(Sender: TObject);
begin
FillDemoPoints;
end;
procedure TScrollForm.FillDemoPoints;
var t:Longint;
begin
LineSeries1.Clear;
for t:= 0 to 59 do
AddXY( EncodeTime( 12, t, 0,0),Random(100),��,clRed );
for t:= 0 to 59 do
AddXY( EncodeTime( 13, t, 0,0),Random(100),��,clRed);
end;
This code will Clear LineSeries and plot two hours of random values from 0 to 100.
Because it is placed on the Form.OnCreate event, each time the form is shown, this code is executed.
Double click the Button1 component to see its associated OnClick code:
procedure TScrollForm.Button1Click(Sender: TObject);
var h,m,s,msec:word;
begin
if CheckBox1.Checked then
DecodeTime( LineSeries1.YValues XE ‘YValues’ .Last , h, m, s, msec)
else
DecodeTime( LineSeries1.XValues.Last , h, m, s, msec);
inc(m);
if m=60 then
begin
m:=0;
inc(h);
end;
AddXY XE ‘AddPoint’ ( EncodeTime( h, m, s, msec), Random(100),��, clYellow );
end;
This code increments the last added point Time by one more minute.
The incremented Time value is added to the LineSeries, thus giving a new point.
The next source code is the demo purpose:
How to scroll the Horizontal Axis as new Points are added to the end ?
The easy way is to type the following code at the Series.OnAfterAdd event. This event is called each time a new point is added to the Series.
In this example, we scale the bottom horizontal chart axis to show 55 minutes prior to the last point and 5 minutes after the last point.
procedure TScrollForm.LineSeries1AfterAdd(Sender: TChartSeries;
ValueIndex: Longint);
begin
if CheckBox1.Checked then
begin
With Sender.GetVertAxis do
Begin
Automatic := False;
Minimum := 0;
Maximum := Sender.YValues.MaxValue +
DateTimeStep[ dtFiveMinutes ];
Minimum := Maximum – DateTimeStep[ dtOneHour ];
end;
end
Many possibilities can be achieved by manually setting the Axis properties.
Each Chart component has four axis: LeftAxis XE ‘LeftAxis’ , TopAxis XE ‘TopAxis’ , RightAxis XE ‘RightAxis’ and BottomAxis XE ‘BottomAxis’ . Each Axis has a boolean ‘Automatic XE ‘Automatic’ ‘ property that defaults to True, meaning TeeChart will always calculate the Minimum and Maximum values for each Axis.
The Minimum and Maximum properties are of type double, allowing float numbers or DateTime representations like ‘Date’, ‘Time’, ‘Now’ or any other valid datetime value.
We have seen a specific TeeChart feature in detail.
Now, compile and execute this project and look at each sample form.
They should give you ideas that you can apply to your projects while you learn about TeeChart features.
The TEECHART.HLP file describes each component property in detail, with some source code examples mostly taken from the TEEDEMO project.
We suggest that you to play with each different sample form and create new small projects to test TeeChart with your real data.
Charting reference
This section describes design considerations specific to each chart and series type. Rather than attempting to list all properties that are, anyway, better covered and more easily navigable via the online help file, we would like to bring to your attention points of interest that may help in the design of your application.
To understand the design paradigm of TeeChart we need to separate conceptually, the contents of the chart -the data series- from the chart itself, e.g. its axis format, legend and titles. We can define and work with series across chart boundaries, referencing series components independently of the chart. We may, however, copy and paste a chart and it will copy with all its defined contents, axis, legends and series.
The Chart components
Two Chart components
There are 2 chart components – The distinction serves simply to help cut down memory use for Charts that do not need to access a database.
Projects compiled with using only TChart components, don’t need the Borland Database XE ‘Database’ Engine DLL’s (BDE XE ‘BDE’ ). A new TChart will not contain configuration parameters for connecting to a database.
Version 3 Delphi offers the use of the TClientDataset as a Datasource. It does not use the BDE.
Chart subcomponents XE ‘subcomponents’
The 2 chart components have subcomponents. If, for example, you wish to access or modify the property of an axis XE ‘axis’ of your chart you will be modifying the property of one of the following subcomponents:
BottomAxis
TopAxis
LeftAxis
RightAxis
See the online help to get a complete list of axis properties. Legend XE ‘Legend is another example of of a TChart subcomponent.
The Chart as backdrop to your series
The Chart components provide the backdrop for your data series. The overall �look� of your chart is controlled by the chart properties accessible via the Chart Editor, the Delphi Object Inspector or by coding – see the online help for a complete list.
As a backdrop you have available to you the Delphi Canvas XE ‘Canvas’ property and methods to calculate screen co-ordinates from values and vice-versa. The UDRAW.PAS XE ‘UDRAW.PAS’ example unit is a good reference point to see some examples of access to the canvas. In short, every TChart component has a ‘Canvas XE ‘ACanvas’ t ‘See Canvas’ ‘ property which is a standard Delphi TCanvas XE ‘TCanvas’ t ‘See Canvas’ object.
Associating a series with a Chart
Series associate with a chart via a series property called ParentChart XE ‘ParentChart . The series are moveable between charts by changing the chart defined in the ParentChart property.
Via the Chart editor
After a Chart has been placed on a form, a right button click gives access to the Edit chart menu (alternatively double-click). The first screen of the Edit chart menu offers a list of button options to add, delete, clone, change type or title of a series. Adding a data series via this menu automatically associates the new data series with the chart.
Via the Object Inspector
Whilst browsing the list of components of a form in the Object Inspector you should see all series added to any chart on that form. Those series components are not directly visible on the form but are nevertheless components with accessible properties.
If, for example, and you could try this with a simple test, you have 2 charts on your form and have used the Chart editor to add a series to one of the charts – you could now access the property list of that series in the Object Inspector and change the name of ParentChart to the other chart on the form. On now opening the Chart editor for the new �ParentChart� you will see the series. Of course if you make this move for a series defined with DataSource from a TDBChart to a TChart you will lose the ability to access the DataSource as the TChart is not database aware.
Via code
Use the ParentChart property to associate (or disassociate) a series with a chart.
Example:
In Form1, we’ll create and show another Form (Form2), and assign Form1.LineSeries1 to Form2.ChartInForm2 :
With TForm2.Create(Self) do
try
Self.LineSeries1.ParentChart := ChartInForm2 ;
ShowModal ;
finally
Free ;
end ;
That will show Form2 (containing a Chart component) and drawing Form1.LineSeries1.
Often used parameters
All the parameters associated with charts are useful at the time you need them. There are a few parameters, however, that are worth mentioning here in special context. They are often used or serve to change the overall �look�, performance, or exportability of your chart.
For a more detailed study of these and many other configurable parameters please refer to section Chart reference.
Label increment, % separation and angle
It may be difficult to fit all your axis XE ‘axis’ labels onto the axis that displays onscreen – As an example, this is often true of date labels XE ‘axis:labels’ XE ‘labels’ t ‘See axis’ which are long and can have a high incidence of change on the axis.
Label Increments
TeeChart offers Label increment XE ‘increment’ as a means to controlling the frequency of labelling on your Chart axis. You can access the property via the Chart Editor under Axis (select your axis) – Scales – Desired increment XE ‘Desired increment’ . The menu shows you a list of the standard options for time increments (e.g. One second, one minute � one day, etc.) Selecting �one day� will cut out repetitions of date on the axis, showing the date label only once for the point range of that date.
Via code you may access the property as a property of the subcomponent XE ‘subcomponent’ for the relevant axis.
Example:
Chart1.BottomAxis.Increment := DateTimeStep[ dtOneHour ] ;
Chart1.RightAxis.Increment := 1000 ;
% Separation XE ‘% Separation’ t ‘See Separation’
If the labels on the axis have a look of rolling into one another you can increase the % separation XE ‘separation’ which will forcibly increase the gap between them. In some cases this may, as a result, hide some labels. It will very much depend on your labels and whether your chart users will have the option to �resize� their chart.
The option is available in the Chart Editor under Axis (select your axis) – Labels – % Separation.
Setting Labels Separation to 0 % means no overlapping checking will be performed, thus all axis labels will be displayed.
Angle
If it is neither practical or possible to place the axis labels side to side along the axis another option is change the angle of the labels to 90s to the axis. This option is available in the Chart Editor under Axis (select your axis) – Labels – % Angle.
BitMaps (BMP XE ‘BMP’ ) or Metafile XE ‘Metafile’ s
TeeChart offers both the bitmap (BMP ) and the Metafile format to save charts. Two type of metafile formats are supported WMF (Windows Metafile Format) and EMF (Extended Metafile Format).
Bitmap format is used internally by TeeChart. It is quicker to draw onscreen than a Metafile. When requiring a Chart to be �exported� to another application or to be embedded in a container application such as MSWord a Metafile format handles resizing better onscreen – TeeChart uses Metafile format with QuickReport XE ‘QuickReports’
Zoom
TeeChart offers as default zoom XE ‘zoom’ on all charts. To obtain zoom at runtime hold the left mouse button and drag mouse toward down/right. You’ll see a rectangle around the selected area. Release the left mouse button to Zoom. You can continue zooming again and again. To RESTORE (or UNDO) the zoom, drag a rectangle in the opposite direction (up/left).
Note
You may use mouseclicks to activate code associated with points in data series. That OnClick behaviour will override zoom behaviour. You can set toggle between OnClick events and zoom with the CancelMouse property.
You may enable or disable zoom functionality in the Chart Editor – Chart page, General tab. The option, AllowZoom XE ‘AllowZoom accesses the chart property, also changeable by code:
Chart1.AllowZoom := False;
�False� deactivates zoom.
Zoom can also be obtained via coding. It is necessary to obtain the screen pixel co-ordinates for the area in which you wish to do the zoom.
Example 1:
Zoom an area with ‘pixel’ co-ordinates:
Rect.Left := 123 ;
Rect.Top := 67 ;
Rect.Right := 175 ;
Rect.Bottom:= 100 ;
Chart1.ZoomRect XE ‘ZoomRect’ ( Rect );
Example 2:
Zoom an area with point value co-ordinates:
You need first to translate from value to pixel co-ordinates. To do so, you can use the Axis or Series components.
Rect.Left := LineSeries1.CalcXPosValue XE ‘CalcXPosValue’
Rect.Top := LineSeries1.CalcYPosValue XE ‘CalcYPosValue’
Rect.Right := LineSeries1.CalcXPosValue(57.6);
Rect.Bottom:= LineSeries1.CalcYPosValue(15000);
Chart1.ZoomRect(Rect);
Backdrop
You can add more information to your chart or simply enhance its appearance by adding a bitmap as a backdrop.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC r 1 Bitmap as a chart backdrop
You will find the parameters to define your Chart backdrop in the General tab of the chart page of the Chart editor.
TChart component
The TChart XE ‘TChart component is the basic building block for �non-database-aware� charts. Select the TChart component from the Delphi palette and simply drag it onto your form to include a chart in your application.
TDBChart component
TDBChart XE ‘TDBChart derives from TChart and inherits all its functionality. When a Chart Series is connected to a TDBChart component, TDBChart looks in the Series DataSource property.
The datasource XE ‘datasource for the series is defined by the series definition – not by the chart – Thus multiple series in a TDBChart could access different data sources. However, if those series are not associated, via ParentChart, with a TDBChart then the option to define a series database-datasource won�t be available.
Creating the Dataset
TeeChart charts will connect with 3 different types of Dataset XE ‘Dataset’
TTable XE ‘TTable
TQuery XE ‘TQuery
TClientDataset XE ‘TClientDataset XE ‘ClientDataset’
The minimum that requires to be set in each case is:
The name of the database,
For the table the TableName of a table
or
in the case of the query a valid SQL XE ‘SQL’ t ‘See TQuery’ string.
or
in the case of a ClientDataset Define source (right button on TClientDataset object in form).
Remember to activate the Dataset by setting the Active property to True
Connecting your series to a database Dataset
In �Getting Started� you saw how to connect a data series to a database dataset XE ‘dataset’ t ‘See datasource’ . Let�s recap here on the key components.
When you select your new Series in the Chart Editor Series page you will see the tab option for Data Source XE ‘Data Source’ t ‘See Datasource’ . If you want your data series to be connected to a new dataset then you should select D ataset from the drop down combo listbox. A new selector box will appear with the options for definition of the new dataset XE ‘Database’ t ‘See Datasource’
The exact contents of the page will change depending on the series type you have chosen. The parameters you set here modify the properties in the series definition which vary between series type. The following table shows the possible options for normal series types (function series are different).
Series Type Datasource Properties Basic Line XValues, YValues, XLabel Fast Line XValues, YValues, XLabel Bar XValues, YValues (called Bar), XLabel Area XValues, YValues, XLabel Point Xvalues, YValues, XLabel Pie PieValues, XLabel Arrow StartXValues, StartYValues, XLabel, EndXValues, EndYValues Bubble Xvalues, YValues, XLabel, RadiusValues Gantt StartValues, EndValues, AY (Y axis level), AXLabel (Label optionally shown on Y-axis or as mark) Shape X0 (Top), Y0 (Bottom), X1 (Left), Y1 (Right) Extended Candle OpenValues, CloseValues, HighValues, LowValues, DateValues Error Bar XValues, YValues, XLabel, ErrorValues Polar XValues, YValues 3D Surface XValues, YValues, ZValues Volume XValues, YValues (VolumeValues), XLabel
Coding your datasource
You may populate your Chart at runtime by coding which series to add to the chart and defining the fields of those series.
It assumes you have a table on your form, Table1 with fields Name and Amount.
Var
MySeries,Ave:TLineSeries;
MySeries:=TLineSeries.Create( Self );
With MySeries do
begin
ParentChart:=DBChart1;
DataSource:=Table1;
XLabelsSource:=’Name’;
YValues.ValueSource:= ‘Amount’;
CheckDatasource;
end;
Series types
Adding values, accessing values
TChartSeries
The TChartSeries XE ‘TChartSeries component is the ancestor of all series types. When referencing the properties XE ‘properties’ of the series type with which you are working check, in addition to the properties listed with that series, the properties of the TChartSeries in the online help to get a full list of properties common to all series.
Line series
There are 2 line series types available, Line and Fast Line. Which one should be used ? Fast line is just what its name describes – it is fast. It is distinct from Line because to achieve speed – speed to add new points to the series – the price paid is that it foregoes some properties that the Line series has. See the section on Fast Line for a description of those differences.
Line XE ‘TChartSeries:Line’ XE ‘Line’
Fig. STYLEREF 1 n SEQ Fig. * ARABIC r 1 A 3D Line series showing one series with the stairs property set to true. The stairs XE ‘stairs’ can be inverted.
Fast line XE ‘TChartSeries:Fast Line’ XE ‘Fast line’
This line series draws only at 2 Dimensions but draws very quickly – performance will depend on your hardware – The series type was originally conceived to tackle high volume requirements of technical and financial applications but serves well for any dataset of very high point volumes.
If, when using Fast Line you know approximately how many data points will be added to your series you could use the global variable TeeDefaultCapacity XE ‘TeeDefaultCapacity to prepare memory. For example, assuming a data series of 10,000 you should set TeeDefaultCapacity to 10,000. This will, in one pass, allocate memory to populate the whole series replacing the need to incrementally allocate memory which costs more time.
Bar XE ‘TChartSeries:Bar’
The bar XE ‘bar’ series in 2 or 3 dimensions doesn�t have to be represented by a rectangular bar –
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Choose a barstyle XE ‘barstyle’ for your Chart series or �mix and match� to suit your needs.
Example bar series configuration
Mixing bar XE ‘bar’ series styles may be useful for some applications. Below is an example stacked bar chart.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Mixed bartypes
Steps taken to build this demo chart and populate it with data are as follows:
1. Drag a Chart component onto your form and drag it out to the size you want.
2. Click the right mouse button over the chart and select editor from the menu.
Add 3 bar series and give them individual titles using Title on the first editor screen (titles in our example �East� �West� and �Other�).
Select M ulti Bar and set as stacked in the Format page of any one of the 3 series (The change will apply to all 3 series).
Add a title using the entry tab for �Titles XE ‘Titles’ � in the Chart page of the editor.
Go to the axis tab. Select Left axis and add the title. We allowed the axis to automatically size itself but took minor XE ‘minor’ ticks XE ‘ticks’ off on the bottom axis.
Each series has a different shape defined for its bars. We define the shape individually in the configuration page of each barseries. The first tab, Format, has the option for Style.
You could code the style with:
East.BarStyle:= bsPyramid ;
West.BarStyle:= bsInvPyramid ;
Other.BarStyle:= bsRectangle ;
Lookup BarStyle in the TeeChart online help to get the full list of options.
For this chart it would be necessary to control the series order to achieve the correct effect. This can be done in the Chart Editor at design time by selecting the series in the series list of the Chart page and using the arrows to change the order. At runtime we can achieve the same with the following code:
Drawing order is always based on the order for which the series are assigned to ParentChart XE ‘ParentChart
The order can be altered at run-time via the Serieslist XE ‘Serieslist property:
Chart1.SeriesList[ 0 ] := East;
Chart1.SeriesList[ 1 ] := West;
Chart1.SeriesList[ 2] := Other;
We added some random XE ‘random’ values to populate this demo. We could launch the code at form creation or put a button on the form to run the code.
procedure OurForm.Button2Click(Sender: TObject);
var t:integer;
begin
Randomize;
with East do
for t:=1 to 12 do AddY( Random(70), ShortMonthNames[t],clTeeColor);
with West do
for t:=1 to 12 do AddY( Random(70), ShortMonthNames[t],clTeeColor);
with Other do
for t:=1 to 12 do AddY( Random(30), ShortMonthNames[t],clTeeColor);
end;
We populated the data for 12 months but are showing only 5 months. The Paging XE ‘Paging’ tab in the Chart page of the editor has the definition of points per page.
Bar series display
The Multi Bar XE ‘Multi Bar’ parameter set in the Format tab of the series page for one of the bar series sets the display alignment of the bars for each bar series in the Chart. – It is not necessary to go to each bar series to change the parameter.
The following figure shows different formats to display bar series. Each Chart has the same information only displayed in a different way. The Stacked 100% series display doesn�t represent the actual values but rather the relative value of each element of the series to a total of 100%.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC . a A 3D Bar series showing four methods to display the same information. Stacked XE ‘Stacked’ property None Fig. 8-4. b Side Fig. 8-4. c Stacked Fig. 8-4. d > > Stacked 100%
Horizontal bar XE ‘TChartSeries:Horizontal bar’
The horizontal bar XE ‘horizontal bar’ series shares the same properties as the bar series. Apart from any aesthetic requirement, one occurrence of the need to use a horizontal bar series may be to adequately display long axis labels which are best read horizontally.
Fig. STYLEREF 1 n SEQ Fig._ * ARABIC 2D Horizontal bar
Area XE ‘TChartSeries:Area’
An Area series XE ‘Area series’ has similar characteristics to a line series – filled –
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 3D Area series
Point XE ‘TChartSeries:Point’
A Point series XE ‘Point series’ is similar in definition to a Line series without the line.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 2D Horizontal bar
Pie XE ‘TChartSeries:Pie’
A Pie series XE ‘Pie series’ is unique in not needing any axis. It is possible to mix a Pie series in a Chart with another series that requires an axis.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 3D Pie
Arrow XE ‘TChartSeries:Arrow’
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 3D Arrow series
The arrow XE ‘arrow’ series is useful for displaying start and end points of many individual events.
Bubble XE ‘TChartSeries:Bubble’
The Bubble XE ‘Bubble’ series has 3 configurable parameters that define the value of the data in your series.
Xvalues, YValues, RadiusValues
The bubble series is useful for showing importance weighting. For example, comparing high volume selling product that, by income, doesn�t bring in a revenue of the scale of another low volume seller. We can see at a glance, literally, that big bubbles are important !
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 2D Bubble Chart
Shapes
Bubble series can be configured in variable shapes, triangles, etc..
Gantt XE ‘TChartSeries:Gantt’
Use the Gantt chart as a planner or to track progress of a project or series of activities.
The Gantt series draws bars that have start and end values which may be of datetime format. You may define a Y axis value for the vertical position of the bar and you may define �next bar� to draw connection lines between the bars.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 2D Chart with a Gantt series.
How to add Gantt bars manually
Use the AddGantt or AddGanttColor methods.
Example:
GanttSeries1.AddGantt( EncodeDate( 1997, 1, 1 ),
EncodeDate( 1997, 1, 31 ),
0,
‘Programming’ );
Or
GanttSeries1.AddGanttColor(EncodeDate( 1997,1,1 ),
EncodeDate( 1997,1,31),
0, ‘Programming’,
clGreen );
Where ‘0’ is the desired vertical position for this bar.
Choose the vertical position you prefer.
To connect gantt bars:
1) Store the ‘AddGantt’ or ‘AddGanttColor’ function return longint:
Var tmp1, tmp2 : Longint;
tmp1:=GanttSeries1.AddGantt(EncodeDate(1997,1,1 ),
EncodeDate( 1997,1,31 ),
0,’Programming’ );
tmp2:=GanttSeries1.AddGantt( EncodeDate( 1997,4,1 ),
EncodeDate( 1997,4,30),
0, ‘Testing’ );
2) Then use the NextTask property:
GanttSeries1.NextTask[ tmp1 ] := tmp2 ;
This will draw a line from ‘Programming’ gantt bar to ‘Testing’ bar. The ‘ConnectingLinePen’ property is the pen used to draw lines.
Shape XE ‘TChartSeries:Shape’
Shape series are useful for defining or adding any additional information to your chart, perhaps in runtime as a result of receipt of exceptional data. You may add text to any shape you add to your chart and relate the shape to another series.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Shape series
Each shape has two co-ordinates associated with it, top left and bottom right of the invisible rectangle that encloses the shape. You may add text to the box. These co-ordinates and messages could be updated at runtime by your code to dynamically put the shapes anywhere on your chart.
Combining series
There is no practical limit to the number of series that you can add concurrently to your chart.
You may mix different series types, almost any series type with any other series type. For certain combinations it is not practical as axis definition between series may directly conflict. For those cases the series not available are greyed out in the series gallery so that you cannot mistakenly select them.
See the section on functions for more about combining series types. Functions work with other series to create and display algorithmic relationships.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Combining series
Example series combination
Combining seriestypes in one chart can add a great deal of information value. The following example shows the incomes by Division and puts the $ index in the same chart to measure the effect of that external influence on incomes (perhaps no influence at all in this example !!).
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 2D Combining series types
You may combine series in 3D Charts. The previous example is represented in 3D below. The chart looks attractive although a high degree of 3D perspective makes it more difficult to visualise the monthly $ index with Division incomes.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 3D combining series types (60% 3D)
You could minimise the effect by reducing the extent of �side� view (percentage 3D).
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 3D combining series types (6% 3D)
Or you could modify code so that at runtime the chart will put all series in the same Z-plane. 3D charts have a property called Z-Order (see figure) which controls the depth position of each series.
> >
It is possible to put all series on the same plane although we advise caution as the effect may be confusing depending on which series types you are combining.
The following line of code (name of chart here Chart1) will put all series in the same Z plane:
Chart1.ApplyZOrder:=False;
Extended series
Extended series XE ‘Extended series’ types are only available with TeeChart Pro XE ‘TeeChart Pro’ . For more information on how to obtain TeeChart Pro see the section About TeeChart or right-click on your chart at design time in Delphi 3 and select the �About TeeChart� menu option.
Candle XE ‘Extended series:Candle’
Fig. STYLEREF 1 n SEQ Fig. * ARABIC r 1 2D Candle with moving average and volume
The candle XE ‘candle’ series XE ‘candle series’ derives from TOHLCSeries XE ‘TOHLCSeries . Its properties include HighValues XE ‘HighValues LowValues XE ‘LowValues OpenValues XE ‘OpenValues and CloseValues XE ‘CloseValues and DateValues XE ‘DateValues . The candle is ideally suited to tracking financial market information.
Example
If you look at the figure of the zoomed candle you can see how the financial information is tracked. White bars reflect the market rising, high end of the white bar being the day close. The red bars identify a fall in the market. The thinner lines show the day�s high and lows.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Candle zoomed
The following code shows use of the AddOHLC method. This code fills the series, evenly divided across the screen, with random data. You could substitute the random clauses with sources of you own data or connect your candleseries directly to a dataset via the Chart editor.
Var
tmpopen,tmp:longint;
CandleSeries1.Clear;
tmpOpen:=1000+Random(100);
for t:=1 to (Screen.Width div 8) do
begin
tmp:=round(100*Random-50);
CandleSeries1.AddOHLC( Date+t,tmpOpen,tmpOpen+20,tmpOpen-20,tmpOpen+tmp);
tmpOpen:=tmpOpen+tmp;
end;
end;
Volume XE ‘Extended series:Volume’
The volume series XE ‘volume series’ is another series with origins in financial markets. It behaves very much like a bar series except that each bar is represented as a thin line and the bars cannot be stacked.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Volume series with moving average
Errorbar XE ‘Extended series:Error bar’
The height of the T on top of the bars of the Error Series XE ‘Error Series’ show the size of the error.
Error bar series may be applied to any data that has a real and estimated value, a success and failure level, etc.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 3D Error bar
Surface
Surface series use co-ordinates in 3 planes. TeeChart surface series support null values as �none� data points which appear as holes in the surface.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 3D Surface chart
Polar XE ‘Extended series:Polar’
The polar series XE ‘polar series’ plots XValues as angular rotation from 0s. The second variable, YValues are plotted as distance from the origin.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC 2D Polar series
Custom series
Detailed information on how to create custom series is available with TeeChart Pro. The documentation highlights the steps necessary at code level to add new series for permanent availability in the TeeChart gallery.
QuickReport Integration
Adding a Chart to QuickReport
TeeChart integrates seamlessly with Qusoft XE ‘Qusoft’ �s QuickReport XE ‘QuickReport’ . To add a TeeChart to a QuickReport follow these steps:
Drop a QuickReport on a form.
Using the QRChart XE ‘QRChart icon on the QuickReport palette
drop a TQRChart XE ‘TQRChart onto the QuickReport worksheet.
You may now double click on the TQRChart to bring up the Chart editor. From this point forward you may work with the chart as with any other TDBChart
Fig. STYLEREF 1 n SEQ Fig. * ARABIC r 1 TQRChart on a QReport at design time
Notes on working with QuickReport
Metafile
TeeChart uses Windows Metafile format for superior quality when outputting to a printer and for drawing onscreen. Also the quality of the printout is better if the Chart shape is maintained as nearly as possible to the default Chart rectangle form.
Clipping
TQRCharts do not support series clipping. The may result in slight overlay of the series onto the chart axis if data points are adjacent to the axis.
Functions
Functions are independent components that use series. When you add a new function, really what you are doing is adding a new series (as any other) then applying a function definition. Normally that function works upon one or more other series to give a dynamic result. For example if you define a line series �A� which has various values across one year and then you define a series �B� which contains the function Max(A) then you will be using series �A� as the input for the new series. The Max(A) function (datasource of series �B�) will scan the data from series A to find the maximum value then plot its own data as that value. The series type of the function is configurable, you may use any series type to represent your function data provided that the series type mix on the chart is allowed according to the general rules for combining series types – You may define a Function to use input series from another chart as its Datasource.
Note
When you add a function from the gallery of the Chart Editor, by default you will add a LineSeries. You may change the type of series afterwards to any other available series type using the Change button.
In general, all functions work to the same basic rules. The properties of the underlying series type (Line, Bar, etc.) apply to the function series. Thus a function added as a Bar series will have standard bar properties such as barwidth. There is one important property that distinguishes function series from non-function series, Period. Period applies to repetition of the function. For example, �I want the average of all points of Series1� will present one flat line across the chart which is the average. �I want the average of all points of Series1 by month� will draw an average for each month and will display as 12 different values across a chart of 1 year.
Important
Study the implications of period carefully before applying it to your chart series. When you have only 1 series in your function the function XE ‘Functions’ will, by default, not apply period and you must add it manually by code if you require period breakdown of the series data. When you have more than 1 series in your function the default applied is period = 1. If you wish to obtain any other period for the function you must add it manually by code. Period is based on number of points, we don�t recommend the implementation of functions composed of series with distinct point frequencies.
Standard functions
Add
The Add XE ‘Functions:Add’ XE ‘Add function adds data from one or more series. If we create a line series �Series1�, create a line series �Function Add� and define series �Function Add� as Add of Series1 and do nothing more we will obtain a chart with Series1 displayed and �Function Add� as one flat line which is the sum of all values of Series1. In the figure the total of 1 + 2 + 3 + 4 + 5 + 6 = 21.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC r 1 2D Add function with 1 series input
We can modify the series �Function Add� to represent Add of Series1 by 2 point groupings (1+2), (3+4), (5+6). We use the period XE ‘Functions:period’ XE ‘period property (Chart Editor in the Data source page). Coded it looks like this:
Series2.FunctionType.Period:=2;
Alternatively:
TeeFunction1.Period:=2;
Defining the period as 2, sets the Add function to add every 2 points. The period property adds enormous value to function series.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Add function with period = 2
Subtract
Subtract XE ‘Subtract’ XE ‘Functions:Subtract’ requires 2 input series. With more than one series in the function the default period sets to 1 axis point. the 2nd series will be subtracted from the 1st series in the list.
The following chart is defined with ApplyZOrder:=False which forces all series to draw in the same 3-Dimensional plane – The resulting series overlay (a sort of optical illusion) in the chart depends on the series paint order.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Subtract function
Multiply
The default period for the function �multiply� is 1. You may add as many series as you wish to the multiply XE ‘multiply’ XE ‘Functions:multiply’ function.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Multiply function
Divide
As divide XE ‘divide’ XE ‘Functions:divide’ requires at least 2 input series the default period for the divide function is 1. The 2nd series in the list is the denominator.
If you add more than 2 series then the 1st will be divided by the 2nd then that is divided by the third, etc.�
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Divide function
High
High XE ‘High’ XE ‘Functions:High’ accepts multiple input series and will always display the highest point between those series at each period point. (1 series default period 0, 2 or more series default period 1).
Fig. STYLEREF 1 n SEQ Fig. * ARABIC High function
Low
Low XE ‘Low’ XE ‘Functions:Low’ accepts multiple input series. It will always display the lowest point between those series at each period point. (1 series default period 0, 2 or more series default period 1).
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Low function
Average
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Average function
The default period for average XE ‘average’ XE ‘Functions:average’ with one series is 0 (all) which will give you the average for that series across the whole chart. If you have more than one series the period will be 1 axis point.
You may change the period to alter the frequency of the average curve.
Extended Functions
Extended functions are available only with TeeChart Pro.
Moving average
The moving average function permits you to track the current average as your data charts. You may define the period over which the moving average steps.
Fig. STYLEREF 1 n SEQ Fig. * ARABIC Moving average applied to track data in a candle series
R.S.I.
Relative Strength Index (RSI) is often used in financial applications
Fig. STYLEREF 1 n SEQ Fig._ * ARABIC 2D RSI curve calculating over the last 20 data points of a candle series
Exponential Average
The exponential average is similar to a moving average. It has a weight factor to add importance to more recent data.
The diagram shows an exponential average with weighting 0.2.
Fig. STYLEREF 1 n SEQ Fig._ * ARABIC 2D
Momentum
A momentum series is defined usng period. The curve takes the last value of the period and subtracts the first value.
Fig. STYLEREF 1 n SEQ Fig._ * ARABIC 2D Momentum series Period 10.
Fitted Curve
The CurveFitting Function performs a polynomical gaussian calculation on the underlying Series data to draw a smooth curve over the original points:
Fig. STYLEREF 1 n 2D Curve fit
Custom Functions
Detailed information on how to create custom functions is available with TeeChart Pro. TeeChart Pro�s Teeloper documentation highlights the steps necessary at code level to add new functions for permanent availability in the TeeChart gallery.
Working with charts and series
You have seen how to create a chart, add series and populate them. It would be useful to now be able to access the chart data at runtime. This chapter highlights some of the more common ways to program access to chart data.
Click events
Chart OnClickSeries
The TChart event, OnClickSeries XE ‘OnClickSeries’ , permits access to any active series in your chart. Put the following code into your project to get an idea of the possibilities. To access the event and add the procedure definition to your project, select your chart and open the Object Inspector. Select the events XE ‘events’ tab to find OnClickSeries. Double-click on OnClickSeries.
procedure TForm1.DBChart1ClickSeries XE ‘ClickSeries’ t ‘See OnClickSeries’ (Sender: TCustomChart;
Series: TChartSeries; ValueIndex: Longint; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
ShowMessage(‘ Clicked Series: ‘+Series.Name+’ at point: ‘+ inttostr(valueindex));
end;
The valueindex XE ‘valueindex’ t ‘See OnClickSeries’ refers to the index of the series data point (point, bar, etc.) within the chart. You may use it to access the X and Y value. For example:
begin
ShowMessage(‘ Clicked Series: ‘+Series.Name+’ at point: ‘+ Floattostr(Series.XValue[valueindex]) + ‘,’ + Floattostr(Series.YValue[valueindex]));
end;
Chart OnClick
You may use the OnClick XE ‘OnClick’ event of the Chart to get the same information.
procedure TForm1.DBChart1Click(Sender: TObject);
var t,tmp:Longint;
x,y:Double;
begin
Series1.GetCursorValues(x,y);
for t:=0 to DBChart1.SeriesCount-1 do
begin
tmp:=DBChart1.Series[t].GetCursorValueIndex XE ‘GetCursorValueIndex’
if tmp<>-1 then
ShowMessage(‘ Clicked Series: ‘+DBChart1.Series[t].Name+’ at point: ‘+inttostr(tmp));
end;
end;
Series OnClick and OnDblClick
The series OnClick XE ‘OnClick’ event catches click events at series level. Thus for multiple series charts you are able to restrict access to the data of a specific series. To access the OnClick event of the series you must select the series in the Object Inspector and go to the events tab.
procedure TForm1.Series1Click(Sender: TChartSeries; ValueIndex: Longint;
Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
ShowMessage(‘ hello: ‘+Sender.Name+’ at point: ‘+inttostr(valueindex));
end;
Custom drawing on the chart
If you require to add textboxes or other shapes XE ‘shapes’ relative to chart axis the Shape series may be the best choice. If the shape series doesn�t match your specific requirement you may draw XE ‘draw’ your own lines and/or shapes on the chart.
TeeChart offers access to the Chart area by axis or by screen pixel. The TeeChart demos, UDraw.pas XE ‘UDraw.pas’ and Uhighlo.pas XE ‘Uhighlo.pas’ , are useful references for custom drawing XE ‘custom drawing’ on a chart.
Calculating Co-ordinates
This chapter explains how to convert from Point XE ‘Point’ co-ordinates to pixels XE ‘pixels’ and vice-versa. Also how to determine the exact co-ordinates for each graphics element in Chart components.
Point Values are expressed in user custom scales. Chart Axis XE ‘Axis’ are responsible for converting point values into suitable X and Y screen pixel co-ordinates for displaying them.
Both Axis and Series components have several functions to convert from screen co-ordinates (in pixels) to Axis or points values (in user-defined units).
The difference between using Axis or Series conversion functions is that Axis will only interpret co-ordinates for the topmost position in 3D mode, while Series will adjust co-ordinates to their Z order XE ‘Z order’ position.
Note: Using conversion functions is only valid after a Chart component has been drawn, either to screen or to a private hidden Canvas.
Axis Methods
You can calculate the screen position for a given value using any
Axis:
Var MyPos : Longint ;
MyPos := Chart1.LeftAxis.CalcPosValue XE ‘CalcPosValue’
MyPos holds now the pixel co-ordinate for �100.0� on Chart1 Left Axis ( Vertical ), being �100.0� a floating value in Axis scales.
You can use this co-ordinate to custom draw or to calculate mouse clicks. See chapters below.
If you want to convert from pixel co-ordinates to Axis values, you can use the opposite function:
Var MyValue : Double ;
MyValue := Chart1.LeftAxis.CalcPosPoint XE ‘CalcPosPoint’
MyValue holds now the Axis value co-ordinate for �100� on Chart1. Left Axis ( Vertical ), being �100� a screen pixel co-ordinate.
Note: Pixel co-ordinates start from 0, being 0,0 the Chart origin point. This is valid for screen, but when drawing to metafiles, drawing to custom canvases or printing, Chart origin point can optionally be different than 0,0.
The Chart1.ChartBounds XE ‘ChartBounds’ property returns the origin and ending co-ordinates for the Chart bounding rectangle.
Axis have another function to calculate how much screen space represents a given Axis range:
Var Space : Longint ;
Space := Chart1.LeftAxis.CalcSizeValue( 1000 );
Remember Axis can be DateTime and you can for example convert a Date Range period in pixels:
Var Space : Longint ;
Space := Chart1.BottomAxis.CalcSizeValue XE ‘CalcSizeValue’
EncodeDate( 1997,12,31) – EncodeDate( 1997,1,1) );
You could use CalcYPos XE ‘CalcYPos’ and CalcXPos XE ‘CalcXPos’ . When drawing using the XPos and YPos co-ordinates remember that the co-ordinate 0,0 is Top,Left of the Chart rectangle, ChartRect. ChartRect XE ‘ChartRect’ is the area enclosed by the 4 axis of the chart.
The following example draws a line from an arbitary point from the Y-axis across the chart. Note the use of canvas properties.
procedure TForm1.Button1Click(Sender: TObject);
var
MyHalfwayPoint, YPosition:longint;
Begin
With Series1.YValues do
MyHalfwayPoint:=round(((MaxValue-MinValue)* 0.5) + MinValue);
YPosition:=DBChart1.LeftAxis.CalcYPosValue
(MyHalfwayPoint);
With DBChart1.Canvas do
begin
Pen.Width:=3;
Pen.Style:=psSolid;
Pen.Color:=clBlack;
with DBChart1 do
begin
MoveTo(ChartRect.Left,YPosition);
LineTo(ChartRect.Left+Width3D,YPosition-Height3D);
LineTo(ChartRect.Right+Width3D,YPosition-Height3D);
end;
end;
end;
Series Methods
Series have similar methods for converting co-ordinates to point values and vice-versa. The main difference is that by using the Series method you don�t need to know the exact Axis component for calculations.
This is a big advantage when having Series associated to Right or Top Axis, or multiple Series associated to each Axis.
This code calculates where in the screen the Series1 point with value 1000 is located:
Var MyPos : Longint ;
MyPos := Series1.CalcPosValue XE ‘CalcPosValue’
or
MyYPos := Series1.CalcPosValue( Series1.YValue[ 0 ] ) ;
You can calculate both X and Y co-ordinates for a specific point or for a specific point value:
MyXPos := Series1.CalcXPos XE ‘CalcXPos’ ( EncodeDate( 1997, 12, 31) ) ;
or
MyXPos := Series1.CalcXPos( Series1.XValues.Last );
To convert from screen pixels to point values, use:
Var MyValue : Double ;
MyValue := Series1.YScreenToValue XE ‘YScreenToValue’ ( Y ) ;
(and XScreenToValue for horizontal co-ordinates).
You can query the point under a given pair of XY screen co-ordinates using the Series.Clicked function. (See Mouse Clicks chapter).
Chart Canvas
Chart.Canvas XE ‘Canvas’ is a standard Delphi Canvas. You may control the appearance of your chart using Canvas properties. See TCanvas XE ‘TCanvas help in Delphi for a full list of properties.
The following example divides the area of the backdrop of the Chart rectangle into 5 equal segments and colours them according to the colour array.
procedure TDrawForm.LineSeries1BeforeDrawValues(Sender: TObject);
Const
MyColors:array[1..5] of TColor=
( clNavy,
clGreen,
clYellow,
clRed,
$00000080
);
var t,partial:Longint;
tmpRect:TRect;
With Chart1 do
Begin
tmpRect:=ChartRect;
tmpRect.Right:=tmpRect.Left;
partial:=ChartWidth div 5;
Canvas.Brush.Style:=bsDiagCross;
Canvas.Pen.Style:=psClear;
for t:=1 to 5 do
Begin
tmpRect.Right:=tmpRect.Right+partial+1 ;
Canvas.Brush.Color:=MyColors[t];
With tmpRect do
Canvas.Rectangle( Left+Width3D,Top- Height3D,Right+Width3D,Bottom-Height3D );
tmpRect.Left:=tmpRect.Right;
end;
end;
end;
Internal bitmap
TChart components have an internal bitmap object, which is used when drawing as a hidden �buffer�. When drawing is finished, this �buffer� is copied to the screen video memory to display it.
TChart Canvas property returns the internal bitmap Canvas object.
Note: BufferedDisplay property controls if the internal bitmap is used. Using this bitmap no flicker occurs when redrawing real-time charts. Also, some Charts with many points can take advantage of faster drawing speed on memory bitmaps instead of direct drawing to slower video card memory chips.
Drawing to a bitmap Canvas is exactly the same as drawing to another �real� Canvas in terms of source code transparency and results.
Note: When drawing to a metafile or printing, the Chart Canvas property refers to metafile or printer Canvas objects. No bitmap is used in these cases.
After a Chart has been drawn onto the internal bitmap, and its copied onto the screen canvas, Chart Canvas property refers to the original �real� Chart Canvas.
Repainting
You should call Chart1.Repaint or Series1.Repaint to force a Chart component to draw again.
Where to draw ?
Best place to custom draw over a Chart component is at
Chart1.OnAfterDraw XE ‘OnAfterDraw event, which is fired each time the Chart component is redrawn, just before copying the internal bitmap to screen.
The equivalent of drawing before the Chart is drawn is to use a Series BeforeDrawValues XE ‘BeforeDrawValues event, after Chart walls and background have been painted. (See UDRAW.PAS XE ‘UDRAW.PAS’ example unit).
Advanced: For more control you might want to create your own Chart class and override the several Draw virtual methods.
Chart Regions
The biggest rectangle around a Chart is at ChartBounds XE ‘ChartBounds property. ChartWidth XE ‘ChartWidth ChartHeight XE ‘ChartHeight ChartXCenter XE ‘ChartXCenter and ChartYCenter XE ‘ChartYCenter are pre-calculated co-ordinates based on ChartBounds property.
Axis are drawn inside this space. The ChartRect XE ‘ChartRect property returns the bounding rectangle for Axis ( same in 2D and 3D ).
Chart Legend has the RectLegend public property which defines the Legend rectangle bounds.
Chart Title and Foot have TitleRect public properties.
In 3D Charts, each Series is assigned a specific section among the �Z� ( depth ) axis.
The Chart Width3D and Height3D are the dimensions of the
3D depth, in pixels. SeriesWidth3D and SeriesHeight3D are the dimensions for each individual Series in a Chart.
Drawing
Lets start drawing XE ‘drawing’ with a basic example.
This code draws an horizontal line just at the middle of Chart1:
procedure TForm1.Chart1AfterDraw(Sender: TObject);
begin
With Chart1 do
begin
Canvas.Pen.Color:=clYellow;
Canvas.MoveTo( ChartBounds.Left,
ChartYCenter );
Canvas.LineTo( ChartBounds.Right, ChartYCenter );
end;
end;
Drawing inside Axis space:
procedure TForm1.Chart1AfterDraw(Sender: TObject);
begin
With Chart1 do
begin
Canvas.Pen.Color:=clYellow;
Canvas.MoveTo( ChartRect.Left, ChartYCenter );
Canvas.LineTo( ChartRect.Right, ChartYCenter );
end;
end;
Drawing a line at each point in Series1 :
procedure TForm1.Series1AfterDrawValues(Sender: TObject);
var t ,x,y : Longint ;
begin
for t := 0 to Series1.Count – 1 do
begin
x:=Series1.CalcXPos( t );
y:=Series1.CalcYPos( t );
Chart1.Canvas.MoveTo( x-8, y-8 );
Chart1.Canvas.LineTo( x+8, y+8 );
end;
end;
Note: Drawing Text
Always set Chart1.Canvas.Font.Height to a negative value
instead of using Font.Size if want same font sizes on screen
and on printer or metafiles.
See UHIGHLO.PAS and UDRAW.PAS units for example of custom drawing text.
Setting Axis scales
Chart components have four axis: LeftAxis XE ‘LeftAxis RightAxis XE ‘RightAxis TopAxis XE ‘TopAxis and BottomAxis XE ‘BottomAxis . Each axis is an instance of TChartAxis XE ‘TChartAxis’ component class.
Axis are responsible of calculating pixel co-ordinates for Series points and to allow any valid range so scroll and zoom can be always performed. As new Series are inserted, or new points are added to the Series, Axis recalculate, by default, their Minimum and Maximum values.
You can turn off automatic recalculation of Axis XE ‘Axis’ scales by setting the Automatic property to false:
Chart1.LeftAxis.Automatic := False ;
Also, both the Axis Minimum and Axis Maximum values can optionally be independently automatic or not.
Chart1.LeftAxis.AutomaticMaximum := False ;
Chart1.LeftAxis.AutomaticMinimum := True ;
You can change Axis scales using the Minimum and Maximum properties:
With Chart1.LeftAxis do
begin
Automatic := False ;
Minimum:= 0 ;
Maximum:= 10000 ;
end;
or using the Axis SetMinMax method:
Chart1.LeftAxis.SetMinMax( 0, 10000 );
DateTime Axis
Note:
An Axis contains DateTime XE ‘DateTime’ scales when the associated Series components have XValues.DateTime or YValues.DateTime properties True. There is no DateTime property for Axis.
Changing scales in DateTime Axis is the same as for non-datetime values:
With Chart1.LeftAxis do
begin
Automatic := False ;
Minimum:= EncodeDate( 1990, 3,16 ) ;
Maximum:= EncodeDate( 1996, 5, 24 );
end;
Logarithmic Axis
An Axis can be to Logarithmic XE ‘Logarithmic’ only if Axis Minimum and Maximum are greater than or equal to zero. This is the only difference between setting linear and logarithmic scales.
Note:
Axis Labels are not displayed in logarithmic increments. You can generate custom Axis Labels (see chapter below).
Inverted Axis
An Axis can be Inverted so Axis Minimum and Maximum are swapped. We suggest you use Inverted XE ‘Inverted’ :=True as little as possible as it can give misleading results due to its (normally) rarity of use.
Axis Styles & Increment
Axis can be displayed in several ways, with tick lines or without,
with grids or without, with Labels or without, and you can customise all formatting properties such as colours, fonts and pen styles. The Axis Increment property controls the number of grid lines and labels and the distance between them.
By default it�s zero, meaning Axis will automatically calculate the Labels increment. Setting the Axis Increment property is independent of setting Axis scales. You can have automatic Axis Maximum and Minimum and a fixed Increment.
The Increment property grows automatically until all Axis Labels can be displayed. If you don�t want this automatic feature, set the Axis LabelsSeparation XE ‘LabelsSeparation’ to zero:
Chart1.LeftAxis.LabelsSeparation := 0 ;
Warning:
When LabelsSeparation is zero, no checking is performed against
labels size, so you must take care labels will not overlap each other.
The following code sets the vertical Axis Increment to 30:
Series1.Clear;
Series1.AddArray( [ 20, 50, 120 ] );
Chart1.LeftAxis.Increment:= 30;
By default, the first Axis label starts at nearest Increment. Setting RoundFirstLabel to False makes labels to start at Axis Maximum:
Chart1.LeftAxis.RoundFirstLabel := False ;
DateTime Increment
Use the predefined DateTimeStep array of constants to determine the Axis Increment on DateTime axis:
Chart1.BottomAxis.Increment := DateTimeStep[ dtOneMonth ] ;
And set the ExactDateTime property to True if you want Axis Labels to be at exact datetime boundaries, for example at 1st day of month.
Chart1.BottomAxis.ExactDateTime := True;
Note:
Logarithmic axis use the Increment property as linear.
Grid lines
Axis Grid lines XE ‘Grid lines’ are displayed at each Increment position, or at each Axis Label position. The Axis TickOnLabelsOnly property controls this feature:
Chart1.BottomAxis.TickOnLabelsOnly := False ;
Axis Labels
There are several Axis labelling styles. The Axis LabelStyle XE ‘LabelStyle property control axis labelling modes:
Chart1.BottomAxis.LabelStyle := talValue ;
Possible values are:
talValue Labels display Axis scales talMark Labels display Series Point Marks talText Labels display Series XLabels talNone No labels displayed talAuto Style is automatically calculated
When LabelStyle is talText, TeeChart will set it automatically to talValue if Series have no XLabels.
For talMark and talText styles, axis labels are displayed exactly at Series point positions, thus not using the axis Increment property.
You can customise labels text by using the OnGetAxisLabel event:
procedure TForm1.Chart1GetAxisLabel(Sender: TChartAxis;
Series: TChartSeries; ValueIndex: Integer; var LabelText: String);
begin
if Sender=Chart1.LeftAxis then
if ValueIndex < 2 then LabelText :=�� ;
end;
Advanced: The UAXISLAB.PAS example unit shows how to customise both Axis Labels text and position, using the OnGetNextAxisLabel XE 'OnGetNextAxisLabel event.
CustomDraw (Axis)
CustomDraw XE 'CustomDraw' adds more axis to your chart - As many as you wish. CustomDraw adds an axis as a �copy� of an existing axis at a new location.
The MULAXIS.PAS example unit draws two custom XE 'custom' t 'See Axis' XE 'Axis:custom' Axis inside a Chart. Available Axis methods for custom drawing are: CustomDraw and CustomDrawMinMax
The following example populates a line series with random data. And creates 2 additional axis. There are 3 configurable locations PosLabels XE 'PosLabels' t 'See CustomDraw' PosTitle XE 'PosTitle' t 'See CustomDraw' and PosAxis XE 'PosAxis' t 'See CustomDraw' to place, respectively, the labels, title and the axis. The last parameter, GridVisible XE 'GridVisible' t 'See CustomDraw' , which is boolean, defines whether to extend the axis grid to the new axis.
procedure TForm1.FormCreate(Sender: TObject);
var
t:integer;
begin
Series1.XValues.DateTime := False;
Chart1.BottomAxis.Increment:=0;
For t:= -10 to 10 do
Series1.addXY(t,Random(100),'', clTeeColor);
end;
procedure TForm1.Series1AfterDrawValues(Sender: TObject);
var posaxis,percent:longint;
begin
percent:=50;
With DBChart1 do
begin
PosAxis XE 'PosAxis' :=ChartRect.Left+Trunc(ChartWidth*Percent/100.0);
LeftAxis.CustomDraw(posaxis-10,posaxis-40,posaxis,True);
PosAxis:=ChartRect.Top+Trunc(ChartHeight*Percent/100.0);
BottomAxis.CustomDraw(posaxis+10,posaxis+40,posaxis,True);
end;
end;
Series manipulation
This chapter documents how to manipulate Series and how to
manipulate Series points and other Series internal data.
Note: Advanced. Series and values code is mainly located at TEENGINE.PAS XE 'TEENGINE.PAS' unit.
Creating XE 'Series:Creating' XE 'Creating' t 'See series' Series at runtime.
Series can be created at runtime just as like any other Delphi component:
First you need a Series variable:
Var MySeries : TBarSeries ;
MySeries := TBarSeries.Create( Self );
MySeries.ParentChart := Chart1 ;
Shortcut:
Chart1.AddSeries XE 'AddSeries' ( TBarSeries.Create( Self ) );
Var MyClass : TChartSeriesClass;
MyClass := TBarSeries ;
Chart1.AddSeries( MyClass.Create( Self ) );
Series array property
Chart components store all Series in SeriesList property, a Delphi TList object.
You have read-only access to this list in three ways:
A) Using the SeriesList property:
MySeries := Chart1.SeriesList [ 0 ]
B) Using the Series array property:
MySeries := Chart1.Series [ 0 ]
C) Or using the Chart1 default property:
MySeries := Chart1 [ 0 ]
Either way does the same.
SeriesCount property
The Chart1.SeriesCount property returns the number of Series in SeriesList.
You can use SeriesCount to traverse all Chart Series:
for t := 0 to Chart1.SeriesCount - 1 do
With Chart1.Series [ t ] do
begin
SeriesColor := clBlue ;
end;
Deleting Series
Series can be hidden in three ways:
A) Setting the Series Active property:
Series1.Active XE 'Series:Active' XE 'Active' := False ;
B) Removing the Series from their parent Chart:
Series1.ParentChart := nil;
C) Destroying the Series completely:
Series1.Free ;
Changing the Series Z order at runtime.
In 3D mode (when Chart1.View3D is True ), all Series are assigned a Z order XE 'Z order' position. That is, the order where Series will be drawn, starting with the far most Series on the Chart 3D space.
You can control the order Series will be drawn, using these methods:
Chart1.ExchangeSeries( 0, 1 );
or
Chart1.SeriesUp( Series1 );
Chart1.SeriesDown( Series1 );
The Series.ZOrder integer property returns the corresponding Z position for the Series.
Some Series in certain modes share the same ZOrder, like Stacked BarSeries. You can check if more than one Series has the same Z order using these functions:
if Series1.FirstInZOrder then ..
if Series1.MoreSameZOrder then ..
Adding Points
Every Series type has, at least, 2 values for each point. These values are designed as X and Y point co-ordinates.
Note: Values are defined as �Double� floating point variables.
Extended Series types have more than 2 values, like BubbleSeries has X, Y and Radius values for each point.
So, each Series type has its appropriate method to add points, although the most common Series types like Line, Bar, Point and Area share the generic AddY method to add points.
The following code empties a TPieSeries and adds some sample values to it:
Series1.Clear ;
Series1.Add( 1234, �> USA >�, clBlue );
Series1.Add( 2001, � Europe �, clRed );
For extended Series types, please refer to each specific Series reference to know which method should be used to add points.
The Series AddArray method can be used in some situations:
Series3.Clear;
Series3.AddArray XE ‘AddArray’
AddArray does not Clear the Series before adding points.
You can express points as constants or variables:
Series3.AddArray([ Table1Sales.AsFloat, 123, MyTotal ] );
Null Values XE ‘Null Values’
In some circumstances you might have no values for specific points. You should then add these points as �zero� or add them as �null XE ‘null’ � values.
Null values will not be displayed, while �zero� values will be displayed as usual.
The following code adds several points and a null point:
With Series1 do
begin
Clear ;
AddY( 10, �John�, clGreen );
AddY( 20, �Anne�, clYellow );
AddY( 15, �Thomas�, clRed );
AddNull( �Peter� );
AddY( 25, �Tony�, clBlue );
AddY( 20, �Mike�, clLime );
end;
Each Series type will handle null values in different ways.
Bar, HorizBar, Line, Area and Point do not display null points.
PieSeries use null values as �zero�.
Controlling Points Order
Points can be optionally sorted either by their X values or Y values. The Series.XValues and Series.YValues Order property controls the points Order:
Series1.XValues.Order := loAscending ;
Possible values are: loNone XE ‘loNone loAscending XE ‘loAscending or loDescending XE ‘loDescending
By default, XValues Order is set to loAscending, and YValues Order to loNone, which means new added points are ordered by their X co-ordinate. For non XY charts, the X co-ordinate is always the point position, starting from zero.
The point Order is used by Series components to draw their points.
Note: Order must be set before points are added to the Series.
You can change the Order property at run-time, followed by a call to Sort method:
Example:
Drop a TChart onto a Form, add a Line Series.
Drop a TButton and assign this code to Button1Click:
Series1.AddArray([ 5, 2, 3, 9]);
Now drop another TButton and add this code to Button2Click:
With Series1 do
begin
YValues.Order:=loAscending;
YValues.Sort;
Repaint;
end;
Now execute and press Button1 to fill Series1, and press Button2 to see Series1 points drawn on Series1 YValues Ascending order, but having the original X co-ordinates.
Note: If you aren�t using X co-ordinates, one more line of code is required.
Drop a new TButton (Button3) and add this code to Button3Click:
Series1.XValues.FillSequence;
Series1.Repaint;
Now points will be �re-numbered�, starting from zero among Series1 XValues axis. This will re-order points so now they will be drawn as if they were originally added to the Series in their new order.
This �two-step� point sorting allows Line Series to draw with vertical orientation.
XY Points
Adding X co-ordinates to points makes Series components calculate user specific horizontal point positions.
Note: Bar charts can be difficult to interpret with X co-ordinates.
Pie Series do not allow X co-ordinates.
To add X co-ordinates, simply use the AddXY XE ‘AddXY method:
Drop a TChart, add a Point Series:
With Series1 do
begin
Clear ;
AddXY( 10, 10, � Barcelona �, clBlue );
AddXY( 1, 10, � San Francisco �, clRed );
end;
Note: If you use a Bubble Series, use the TBubbleSeries AddBubble method.
Remember to set XValues.Order to loNone if don�t want points to be sorted on their X co-ordinate.
Point Limits
16bits Delphi 1.0
Maximum 16380 Series per Chart, and 16380 points per Series.
32bits Delphi 2.0
Maximum 134217727 points per Series and same for Series per Chart.
Deleting Points
Simply call the Series.Delete XE ‘Series:Delete’ method, passing the point index as the argument. Point index starts at zero.
Series1.Delete XE ‘Delete’ ( 0 );
Series1.Delete( Series1.Count – 1 ) ;
An exception �List out of bounds� will be raised when attempting to Delete a non-existing point, so always check there are enough points in the Series prior to delete them:
if Series1.Count > MyIndex then Series1.Delete( MyIndex );
Calling Delete forces re-calculation of Functions and repainting of the Chart.
Retrieving and modifying Points
Once points have been added, you can retrieve their co-ordinates or change them.
The XValues and YValues array properties can be used:
Var MyValue : Double ;
MyValue := Series1.YValues[ 0 ] ;
You can traverse these arrays to perform calculations:
Var MyTotal : Double ;
t : Integer ;
MyTotal := 0 ;
for t:= 0 to Series1.Count – 1 do
MyTotal := MyTotal + Series1.YValues[ t ] ;
ShowMessage( FloatToStr( MyTotal ) );
Extended Series types have additional array properties, such as
BubbleSeries RadiusValues. You can access these properties in
the same way as with XValues or YValues arrays:
if BubbleSeries1.RadiusValues XE ‘RadiusValues’ [ Index ] > 100 then ..
Modifying point values can be performed using the above properties:
Series1.YValues[ 0 ] := Series1.YValues[ 0 ] + 1 ;
Series1.RefreshSeries ;
Locating Points
The XValues and YValues Locate function searches a specific
value in the List and, if found, returns the value Index, starting
from zero.
Var MyIndex : Integer ;
MyIndex := Series1.YValues.Locate( 123 );
if MyIndex = -1 then
ShowMessage(� 123 not found in Series1 !! � )
else
ShowMessage(� 123 is the �+IntToStr( MyIndex+1 )+� th point in Series1 !! � );
Point Statistics
XValues and YValues properties maintain the following statistical figures:
Total The sum of all values in the list.
TotalABS The sum of all values as absolute (positive).
MaxValue The maximum value in the list.
MinValue The minimum value in the list.
You can call manually to RecalcMinMax XE ‘RecalcMinMax method to recalculate MinValue XE ‘MinValue’ and MaxValue XE ‘MaxValue’ Total and TotalABS are maintained automatically.
These values are used to speed up several Axis scaling calculations and are used as helpers for percent calculations.
TChartValueList object has several other methods and properties to manipulate point values. Please refer to online help documentation.
Notifications
Whenever points are added, deleted or modified, the Series generates internal notification events. These events are used to recalculate Series that depend on other Series points.
Advanced: You can use RecalcOptions XE ‘RecalcOptions property to control when recalculations are performed.
Point Colours
All Series maintain an internal List of colour XE ‘colour’ s. One for each point in the Series.
You can access this list with ValueColor XE ‘ValueColor array property, to retrieve or change point colours:
Var MyColor : TColor ;
MyColor := Series1.ValueColor[ 0 ] ;
Series1.ValueColor[ 1 ] := clBlue ;
TeeChart defines a generic colour constant named: clTeeColor.
Points with clTeeColor colour will be drawn using the SeriesColor colour.
Delphi predefines constants for basic colours (clBlue, clRed, etc.). Colours can also be expressed in RGB format. Using a video colour depth of 16k colours or more results in better colour matching.
Point Labels
Each point has an associated text, called XLabel XE ‘XLabel , and declared as a Delphi string.
Point Labels are used in Axis Labels, Chart Legend and Point Marks.
Labels are stored at Series XLabel array property.
You can access and modify XLabel point texts:
Series1.XLabel [ 0 ] := �Sales� ;
Changing the Series type at runtime – Advanced
Every chart type corresponds to a different Delphi Component.
Changing a Series type involves changing the Series component class.
That means a new Series of the new class must be created, old Series properties should be assigned to the new instance, and finally the old Series must be destroyed.
All this happens automatically when you manually change a Series type at design-time using the Chart Editor Dialog and the Gallery.
You can change a Series type at run-time calling:
ChangeSeries XE ‘ChangeSeries’ TypeGallery(Self, MySeries );
Warning:
You should change your private Series components.
You can change also Series components owned by the Form,
but only if not using them after.
Var MySeries : TChartSeries ;
MySeries := Series1 ;
ChangeSeriesTypeGallery(Self, MySeries );
Printing Charts
This chapter explains how Charts are printed and which properties and methods are used to control the printing process.
Note
Advanced. Printing methods are located in the CHART.PAS unit.
Margins
When printing XE ‘printing’ , you can specify which margins XE ‘margins’ t ‘See printing’ on the paper page should be left blank.
The public PrintMargins:TRect property stores the desired paper margins expressed as percents of total page dimensions.
PrintMargins:=Rect(15,15,15,15);
The TChart.ChartPrintRect:TRect function returns, after applying the printing margins, the space where the Chart component will be drawn expressed as logical canvas units (pixels or dots).
With PrintMargins you can define any area of any size inside the page.
Note
When changing paper orientation, margins are recalculated.
Resolution
Charts are printed in metafile XE ‘metafile’ (WMF XE ‘WMF’ t ‘See metafile’ in 16bit, EMF XE ‘EMF’ t ‘See metafile’ in 32bit) format.
Metafiles are scaleable vector formats, so a �wysiwyg XE ‘wysiwyg’ t ‘See printing’ � effect can be achieved if sending to the printer how a Chart looks on screen. However, you might want to exploit the printer�s bigger res