Difference between revisions of "VCLTutorial2"

From Steema Software Reference Wiki
Jump to: navigation, search
(3D)
 
(31 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
|- valign="TOP"
 
|- valign="TOP"
 
|
 
|
[[Image:tchvcl.jpg]]
+
[[Image:vcl.png |200px]]
| align="RIGHT" | <font size="2">  [[VCLTutorials|Contents page]]<br />[[VCLTutorial1|Previous]] | [[VCLTutorial3|Next]]
+
| align="RIGHT" | <font size="2">  [[TeeChart for VCL|Contents page]]<br />[[VCLTutorial1|Previous]] | [[VCLTutorial3|Next]]
  
 
</font>
 
</font>
 
| width="20" |
 
| width="20" |
 
|}
 
|}
 
+
{{DISPLAYTITLE:<span style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);">{{FULLPAGENAME}}</span>}}
 +
= Tutorial 2 - Chart display properties =
 
__TOC__
 
__TOC__
<br>
 
 
== Tutorial 2 - Chart display properties ==
 
 
<br />
 
  
 
Chart display features are those which affect the overall appearance of the Chart. They include those properties and methods that define the colour of the Chart background, Titles and their position, margins, borders and bevels, background images, frame and axis visible, pen colours and widths, 3D, walls, etc.
 
Chart display features are those which affect the overall appearance of the Chart. They include those properties and methods that define the colour of the Chart background, Titles and their position, margins, borders and bevels, background images, frame and axis visible, pen colours and widths, 3D, walls, etc.
Line 23: Line 19:
 
The overall Chart appearance characteristics are a grouped into these categories:
 
The overall Chart appearance characteristics are a grouped into these categories:
  
[[General | General]]<br /><font size="2"></font>[#Axis <font size="2">Axis</font>]<br /><font size="2"></font>[#Title <font size="2">Titles</font>]<br /><font size="2"></font>[#Legend <font size="2">Legend</font>]<br /><font size="2"></font>[#Panel <font size="2">Panel</font>]<br /><font size="2"></font>[#Paging <font size="2">Paging</font>]<br /><font size="2"></font>[#Walls <font size="2">Walls</font>]<br /><font size="2"></font>[#ThreeD <font size="2">3D</font>]
+
[[#General | General]]<br /><font size="2"></font>[[#Axis | Axis]]<br />[[#Title | Titles]]<br />[[#Legend | Legend]]<br />[[#Panel | Panel]]<br />[[#Paging | Paging]]<br />[[#Walls | Walls]]<br />[[#ThreeD | 3D]]
  
<font size="2"> </font>
 
  
 
These are the groupings you will find if you open the Chart Editor and browse the Chart pages. Other properties affect the 'look' of your Chart. These include Series colours and mark characteristics, individual Axis and Grid display properties and labelling. These will be dealt with in later tutorials.
 
These are the groupings you will find if you open the Chart Editor and browse the Chart pages. Other properties affect the 'look' of your Chart. These include Series colours and mark characteristics, individual Axis and Grid display properties and labelling. These will be dealt with in later tutorials.
Line 35: Line 30:
 
----
 
----
  
=== Getting started with Chart display properties ===
+
== Getting started with Chart display properties ==
 
+
<font size="2"> </font>
+
  
 
Add a new Chart to a Form and you will see it displays in 3D with a grey panel background, 2 walls (Bottom and Left), Frame (which defines the Frame of the Chart's plottable area) and a default Chart Title Header "TeeChart".
 
Add a new Chart to a Form and you will see it displays in 3D with a grey panel background, 2 walls (Bottom and Left), Frame (which defines the Frame of the Chart's plottable area) and a default Chart Title Header "TeeChart".
Line 43: Line 36:
 
Right click on the chart and select ''''Edit Chart...'''' from the menu to access the Chart Editor. The first page is the Series page which is empty of Series at the moment and which we'll look at in another tutorial. Select the second Chart tab 'General' to access the General Chart properties page.
 
Right click on the chart and select ''''Edit Chart...'''' from the menu to access the Chart Editor. The first page is the Series page which is empty of Series at the moment and which we'll look at in another tutorial. Select the second Chart tab 'General' to access the General Chart properties page.
  
 
+
<div id="General">''' '''</div>
<div id="General">''' '''</div>=== General Chart properties ===
+
== General Chart properties ==
 
+
<font size="2"> </font>
+
  
 
[[Image:TeeImage59.png]]
 
[[Image:TeeImage59.png]]
Line 58: Line 49:
 
Any Text displayed on the Chart can be easily modified by altering the Font properties found under the Fonts tab.
 
Any Text displayed on the Chart can be easily modified by altering the Font properties found under the Fonts tab.
  
Series' [Javascript:CallHelp('TChartSeries.Add','Tc2013') Add method]<br />
+
Series Add method<br />
  
====  ====
+
<div id="Axis">''' '''</div>
  
==== Axis Properties ====
+
== Axis Properties ==
 
+
<font size="2"> </font>
+
  
 
Control of the axes is quite an involved area at its greatest level of intricacy and is dealt with in greater depth in a later tutorial. Here we will cover the fundamentals of Axis and Frame display.
 
Control of the axes is quite an involved area at its greatest level of intricacy and is dealt with in greater depth in a later tutorial. Here we will cover the fundamentals of Axis and Frame display.
Line 70: Line 59:
 
The second Chart page holds the properties for defining axis and frame characteristics.
 
The second Chart page holds the properties for defining axis and frame characteristics.
  
<font size="2"><font size="2"><font size="2">[[Image:TeeImage60.png]]</font></font></font>
+
[[Image:TeeImage60.png]]
  
 
There are 5 axes in the Chart. Left, Top, Right, Bottom and Depth. The Chart Frame displays as a surround to the Chart's plottable area and has no data corresponding features (See BackWall). The Depth initialises by default as not Visible. All other Axes are visible from the moment that a Series is added to the Chart and associated with those Axes (Left and Bottom as default). Custom Axes may be added/removed by using the and - keys on the dialogue. For a Custom Axis to be visible (as for any other Axis) a Series must be associated with the Axis. See the Axis tutorial for more about Custom axes.
 
There are 5 axes in the Chart. Left, Top, Right, Bottom and Depth. The Chart Frame displays as a surround to the Chart's plottable area and has no data corresponding features (See BackWall). The Depth initialises by default as not Visible. All other Axes are visible from the moment that a Series is added to the Chart and associated with those Axes (Left and Bottom as default). Custom Axes may be added/removed by using the and - keys on the dialogue. For a Custom Axis to be visible (as for any other Axis) a Series must be associated with the Axis. See the Axis tutorial for more about Custom axes.
Line 76: Line 65:
 
The key properties to enable display of axes and frame are:
 
The key properties to enable display of axes and frame are:
  
''' '''
 
  
 
Visible <br />This checkbox enables or disables display of all axes. If the Back wall Frame is visible then the Chart surround is still visible when the axes are hidden. The result will be the appearance of a larger Chart as no area is reserved for the axis labels. The Visible property for each Axis (Scales tab) overrides the visible characteristic for each Axis. If you select the Depth Axis in the List then you will note that Depth Axis Scales::Visible is by default 'not visible'.
 
Visible <br />This checkbox enables or disables display of all axes. If the Back wall Frame is visible then the Chart surround is still visible when the axes are hidden. The result will be the appearance of a larger Chart as no area is reserved for the axis labels. The Visible property for each Axis (Scales tab) overrides the visible characteristic for each Axis. If you select the Depth Axis in the List then you will note that Depth Axis Scales::Visible is by default 'not visible'.
Line 85: Line 73:
 
  [Javascript:CallHelp('TCustomAxisPanel.AxisVisible','Tc2013') Chart1.Axes.Visible := True;]
 
  [Javascript:CallHelp('TCustomAxisPanel.AxisVisible','Tc2013') Chart1.Axes.Visible := True;]
  
<br />'''<font size="2"> </font>'''
+
<br />
  
 
Axis: Left, Right, Top, Bottom and Depth Visible<br /> Select the Axis that you wish to display or hide in the Listbox and toggle the Visible checkbox on the Scales tab to control the display for that specific axis.
 
Axis: Left, Right, Top, Bottom and Depth Visible<br /> Select the Axis that you wish to display or hide in the Listbox and toggle the Visible checkbox on the Scales tab to control the display for that specific axis.
Line 97: Line 85:
 
<br />
 
<br />
  
====  ====
+
<div id="Title">''' '''</div>
 
+
== Titles Properties ==
==== Titles Properties ====
+
  
 
<font size="2"> </font>
 
<font size="2"> </font>
Line 107: Line 94:
 
[[Image:TeeEditTitle.png]]
 
[[Image:TeeEditTitle.png]]
  
Use the dropdown Combobox to select either [Javascript:CallHelp('TCustomChart.Title','Tc2013') Title], [Javascript:CallHelp('TCustomChart.Foot','Tc2013') Foot], [Javascript:CallHelp('TCustomChart.SubTitle','Tc2013') SubTitle] or [Javascript:CallHelp('TCustomChart.SubFoot','Tc2013') SubFoot]. Enter the required text in the Textbox. You may type multiline titles.
+
Use the dropdown Combobox to select either Title, Foot, SubTitle or SubFoot. Enter the required text in the Textbox. You may type multiline titles.
  
 
Runtime:
 
Runtime:
Line 121: Line 108:
 
  end;
 
  end;
  
<font size="2"> </font>
 
  
 
You may then modify lines of text:
 
You may then modify lines of text:
Line 134: Line 120:
 
<br /><font size="2"></font>
 
<br /><font size="2"></font>
  
''''''
 
  
 
Style Alignment<br /> Alignment refers to the Title (or Footer) alignment with respect to the Chart area NOT the overall Chart Panel. The Chart area is the plottable area of the Chart plus the Axis Labels and Legend.
 
Style Alignment<br /> Alignment refers to the Title (or Footer) alignment with respect to the Chart area NOT the overall Chart Panel. The Chart area is the plottable area of the Chart plus the Axis Labels and Legend.
Line 143: Line 128:
 
  [Javascript:CallHelp('TChartTitle.Alignment','Tc2013') Chart1.Title.Alignment := taCenter;]
 
  [Javascript:CallHelp('TChartTitle.Alignment','Tc2013') Chart1.Title.Alignment := taCenter;]
  
<br />''''''
+
<br />
  
 
Position<br /> Use Position to override the Title or Footer default position and set a custom position (pixels relation to Chart Top, Left).
 
Position<br /> Use Position to override the Title or Footer default position and set a custom position (pixels relation to Chart Top, Left).
Line 153: Line 138:
 
   Chart1.Title.Top:=Chart1.Title.Top 30;
 
   Chart1.Title.Top:=Chart1.Title.Top 30;
  
<br />''''''
+
<br />
  
 
Format<br /> Contains the settings for the Title box, e.g. Frame, Background colour, etc.
 
Format<br /> Contains the settings for the Title box, e.g. Frame, Background colour, etc.
Line 176: Line 161:
 
  Chart1.Title.Brush.Style := bsFDiagonal;
 
  Chart1.Title.Brush.Style := bsFDiagonal;
  
<br />''''''
+
<br />
  
 
Border<br /> Adds a Border around the Titles (Title, Footer, Sub-Title and Sub-Footer) with the option of a Bevel effect and a Frame around it too.
 
Border<br /> Adds a Border around the Titles (Title, Footer, Sub-Title and Sub-Footer) with the option of a Bevel effect and a Frame around it too.
  
''''
+
 
  
 
E.g. Font<br /> The Font button will grant access to the Font Dialog window which allows selection of Windows Fonts and definition of style (italic, bold, etc.) and colour.
 
E.g. Font<br /> The Font button will grant access to the Font Dialog window which allows selection of Windows Fonts and definition of style (italic, bold, etc.) and colour.
Line 190: Line 175:
 
  ]
 
  ]
  
<br />''''''
+
<br />
  
 
Text<br /> Contains the Title Text appearance formatting characteristics.<br /><br /> e.g. Font The Font button will grant access to the Font Dialog window which allows selection of Windows Fonts and definition of style (italic, bold, etc.) and colour.
 
Text<br /> Contains the Title Text appearance formatting characteristics.<br /><br /> e.g. Font The Font button will grant access to the Font Dialog window which allows selection of Windows Fonts and definition of style (italic, bold, etc.) and colour.
  
<br />''''''
+
<br />
  
 
Gradient<br /> Enable/disable a Background Gradient in the Title box.
 
Gradient<br /> Enable/disable a Background Gradient in the Title box.
  
<br />''''''
+
<br />
  
 
Shadow<br /> Adds a shadow to the Border around the Title, Footer, Sub-Title and Sub-Footer. <font size="2">.</font>
 
Shadow<br /> Adds a shadow to the Border around the Title, Footer, Sub-Title and Sub-Footer. <font size="2">.</font>
  
<br />''''''
+
<br />
  
 
Picture<br /> An image can be used for the background to the Text box instead of a using colours. By applying Filters to the image, it can be modified so as to get the best result.<font size="2">.</font>
 
Picture<br /> An image can be used for the background to the Text box instead of a using colours. By applying Filters to the image, it can be modified so as to get the best result.<font size="2">.</font>
Line 208: Line 193:
 
<br /><br />
 
<br /><br />
  
====  ====
+
<div id="Legend">''' '''</div>
  
==== Legend Properties ====
+
== Legend Properties ==
  
<font size="2"> </font>
+
Legend contents are dealt with in a later tutorial. In the Legend page of the Chart Editor you may define appearance aspects of the Legend. Important initial steps are to know how to control Legend alignment and visible properties, colour, font, frame, shadow, etc..</font>
  
[Javascript:CallHelp('TChartLegend','Tc2013') <font size="2">Legend</font>]<font size="2"> contents are dealt with in a later tutorial. In the Legend page of the Chart Editor you may define appearance aspects of the Legend. Important initial steps are to know how to control Legend alignment and visible properties, colour, font, frame, shadow, etc..</font>
+
[[Image:TeeLegend.png]]
  
[[Image:TeeLegend.png]]
 
  
''' '''
 
  
 
Style<br /> Toggle On/Off Legend display and set Legend display content characteristics (inclusion of Checkboxes, etc).
 
Style<br /> Toggle On/Off Legend display and set Legend display content characteristics (inclusion of Checkboxes, etc).
Line 229: Line 212:
 
   Chart1.Legend.Visible := Checkbox1.Checked;
 
   Chart1.Legend.Visible := Checkbox1.Checked;
  
''''
 
  
Dividing Lines<br /> Used to draw lines within the Legend box between the Legend entries. [Javascript:CallHelp('TChartPen','Tc2013') <font size="2">TChartPen</font>] properties apply.
+
 
 +
Dividing Lines<br /> Used to draw lines within the Legend box between the Legend entries. TChartPen properties apply.
  
 
Runtime:
 
Runtime:
Line 237: Line 220:
 
e.g.
 
e.g.
  
  [Javascript:CallHelp('TCustomChartLegend.DividingLines','Tc2013') Chart1.Legend.DividingLines.Visible := True;
+
  Chart1.Legend.DividingLines.Visible := True;
 
  Chart1.Legend.DividingLines.Color := clBlue;]
 
  Chart1.Legend.DividingLines.Color := clBlue;]
  
''' '''
 
  
 
Position<br /> Sets the default display position or enables custom positioning of the Legend. TChart will change the shape of the Legend to fit the location. If the Legend is set to the side (left or right) of the Chart the contents of the Legend, by default, sit as a list from top to bottom. If the Legend sits below or above the Chart then the Legend contents are placed side by side. The default behaviour may be overridden by using the Resize Chart option and/or by using Custom positioning. See the Legend tutorial for more about custom positioning of the Legend.
 
Position<br /> Sets the default display position or enables custom positioning of the Legend. TChart will change the shape of the Legend to fit the location. If the Legend is set to the side (left or right) of the Chart the contents of the Legend, by default, sit as a list from top to bottom. If the Legend sits below or above the Chart then the Legend contents are placed side by side. The default behaviour may be overridden by using the Resize Chart option and/or by using Custom positioning. See the Legend tutorial for more about custom positioning of the Legend.
Line 250: Line 232:
 
e.g.
 
e.g.
  
  [Javascript:CallHelp('TCustomChartLegend.ResizeChart','Tc2013') Chart1.Legend.ResizeChart := True;]
+
  Chart1.Legend.ResizeChart := True;]
  
<br />''''
+
<br />
  
 
%Top position<br /> Defines the Legend box displacement from the top of the Chart Panel.
 
%Top position<br /> Defines the Legend box displacement from the top of the Chart Panel.
Line 266: Line 248:
 
'''Symbols'''<br /> Size and formatting of the Legend symbols.
 
'''Symbols'''<br /> Size and formatting of the Legend symbols.
  
<br />''''
+
<br />
  
 
%Color width<br /> Defines the width of the colour boxes within the Legend.
 
%Color width<br /> Defines the width of the colour boxes within the Legend.
Line 274: Line 256:
 
e.g.
 
e.g.
  
  [Javascript:CallHelp('TCustomChartLegend.Colorwidth','Tc2013') Chart1.Legend.ColorWidth:=20;]
+
  Chart1.Legend.ColorWidth:=20;]
  
 
<br />
 
<br />
Line 297: Line 279:
 
'''Format'''<br /> Contains the settings for the Legend box, e.g. Frame, Background colour, etc.
 
'''Format'''<br /> Contains the settings for the Legend box, e.g. Frame, Background colour, etc.
  
<br />''''
+
<br />
  
 
E.g. Shadow<br /> Properties for the display of the Legend box Shadow. You may define the colour and size.
 
E.g. Shadow<br /> Properties for the display of the Legend box Shadow. You may define the colour and size.
Line 323: Line 305:
 
   end;
 
   end;
  
<br />''''''
+
<br />
  
 
Gradient<br />
 
Gradient<br />
Line 329: Line 311:
 
Enable/disable a Background Gradient in the Legend box.
 
Enable/disable a Background Gradient in the Legend box.
  
<br />''''''
+
<br />
  
 
Shadow<br /> Adds a shadow to the Legend Border.
 
Shadow<br /> Adds a shadow to the Legend Border.
  
<br />''''''
+
<br />
  
 
Emboss<br /> Adds a embossed effect to the Legend Border.
 
Emboss<br /> Adds a embossed effect to the Legend Border.
  
<br />''''''
+
<br />
  
 
Picture<br /> An image can be used for the background to the Legend box instead of a using colours. By applying Filters to the image, it can be modified so as to get the best result.<font size="2">.</font>
 
Picture<br /> An image can be used for the background to the Legend box instead of a using colours. By applying Filters to the image, it can be modified so as to get the best result.<font size="2">.</font>
  
<br /><font size="2"> </font>
+
<br />
 
+
====  ====
+
  
==== Panel Properties ====
+
<div id="Panel">''' '''</div>
  
<font size="2"></font>
+
== Panel Properties ==
  
 
The TeeChart Panel page allows you to set parameters which can greatly enhance the appearance of the Chart. Panel Gradient effects are best seen by monitors that support true colour but some colour combinations on 255 colour screens are very acceptable.
 
The TeeChart Panel page allows you to set parameters which can greatly enhance the appearance of the Chart. Panel Gradient effects are best seen by monitors that support true colour but some colour combinations on 255 colour screens are very acceptable.
  
By now you are familiar with TeeChart properties so we won't run through all the properties here. Panel properties and methods may be accessed via the [Javascript:CallHelp('TChart','Tc2013') <font size="2" face="Courier New">TChart component.</font>]
+
By now you are familiar with TeeChart properties so we won't run through all the properties here. Panel properties and methods may be accessed via the TChart component.
  
 
[[Image:panelEditor.png]]
 
[[Image:panelEditor.png]]
Line 357: Line 337:
 
Key areas are:
 
Key areas are:
  
''''''
+
 
  
 
Color<br />''E.g. Panel Color''<br /> Color will paint the whole Chart background with the chosen color. If you select to view a background Gradient or Image, they will hide the Panel Color. If you set a Back colour it will replace the Panel colour within the Chart Frame only.
 
Color<br />''E.g. Panel Color''<br /> Color will paint the whole Chart background with the chosen color. If you select to view a background Gradient or Image, they will hide the Panel Color. If you set a Back colour it will replace the Panel colour within the Chart Frame only.
  
''''''
+
 
  
 
Border<br /> You may define Border independently or in conjunction with the Bevel properties. With Border set to Visible True you will obtain a 'sunken' border effect on the outside of the Chart Panel. Mixing Bevel and Border and manipulating Width gives almost any combination of 3D effects.
 
Border<br /> You may define Border independently or in conjunction with the Bevel properties. With Border set to Visible True you will obtain a 'sunken' border effect on the outside of the Chart Panel. Mixing Bevel and Border and manipulating Width gives almost any combination of 3D effects.
Line 367: Line 347:
 
E.g. Bevel Inner/Bevel Outer/Width<br /> These properties will produce a variety of 3D effects on the Border of the Chart panel. Modify them at design time to see how they affect the Chart border bevels.
 
E.g. Bevel Inner/Bevel Outer/Width<br /> These properties will produce a variety of 3D effects on the Border of the Chart panel. Modify them at design time to see how they affect the Chart border bevels.
  
''''''
+
 
  
 
Margin<br /> You can determine the Margin size around the Panel. Each Chart component has four margin properties: MarginLeft, MarginRight, MarginTop and MarginBottom.<br /> Margins are defined as the distance between the Chart Border and the Chart Frame and are expressed as a percentage of the overall dimensions of the Chart Panel.<br /> Default values are 4% for top and bottom margins and 3% for left and right margins.<br />
 
Margin<br /> You can determine the Margin size around the Panel. Each Chart component has four margin properties: MarginLeft, MarginRight, MarginTop and MarginBottom.<br /> Margins are defined as the distance between the Chart Border and the Chart Frame and are expressed as a percentage of the overall dimensions of the Chart Panel.<br /> Default values are 4% for top and bottom margins and 3% for left and right margins.<br />
Line 375: Line 355:
 
Runtime properties are:
 
Runtime properties are:
  
  [Javascript:CallHelp('TCustomTeePanel.MarginTop','Tc2013') Chart1.MarginTop]
+
  Chart1.MarginTop
  [Javascript:CallHelp('TCustomTeePanel.MarginLeft','Tc2013') Chart1.MarginLeft][Javascript:CallHelp('TCustomTeePanel.MarginRight','Tc2013')
+
  Chart1.MarginLeft
  Chart1.MarginRight][Javascript:CallHelp('TCustomTeePanel.MarginBottom','Tc2013')
+
  Chart1.MarginRight
 
  Chart1.MarginBottom
 
  Chart1.MarginBottom
  ]
+
   
 
+
<font size="2"></font>
+
 
+
 
The example applied in the demo project uses an UpDown button:
 
The example applied in the demo project uses an UpDown button:
  
Line 391: Line 368:
 
  end;
 
  end;
  
<br />''''''
+
<br />
  
 
Gradient<br /> To define a Gradient you must select a StartColor and EndColor (plus, optionally MidColor) and enable as Visible the Gradient. The Gradient will cover the whole Chart panel. Gradient direction defines the direction of colour change between Start, Mid and EndColor.
 
Gradient<br /> To define a Gradient you must select a StartColor and EndColor (plus, optionally MidColor) and enable as Visible the Gradient. The Gradient will cover the whole Chart panel. Gradient direction defines the direction of colour change between Start, Mid and EndColor.
Line 407: Line 384:
 
   end;
 
   end;
  
''''''
+
 
  
 
Shadow<br />
 
Shadow<br />
Line 413: Line 390:
 
You may also add a shadow to the outside of the Chart Panel when Shadow Visible is enabled. By adjusting the Colour, Size and Transparency, and in conjunction with Bevel and Border properties impressive 3D effects can be obtained.<br /> Use negative values for the Vertical and Horizontal Sizes if you require shadows at the top or left of the Chart Panel respectively.
 
You may also add a shadow to the outside of the Chart Panel when Shadow Visible is enabled. By adjusting the Colour, Size and Transparency, and in conjunction with Bevel and Border properties impressive 3D effects can be obtained.<br /> Use negative values for the Vertical and Horizontal Sizes if you require shadows at the top or left of the Chart Panel respectively.
  
''''''
+
 
  
 
Image<br /> You may select any bitmap (.bmp) file as a background Image. The Image may be centred, tiled or stretched on the Chart Panel, or may be restricted to the Chart Frame boundaries.
 
Image<br /> You may select any bitmap (.bmp) file as a background Image. The Image may be centred, tiled or stretched on the Chart Panel, or may be restricted to the Chart Frame boundaries.
Line 428: Line 405:
 
<br />
 
<br />
  
==== Paging Properties ====
+
<div id="Paging">''' '''</div>
 +
 
 +
== Paging Properties ==
  
 
TeeChart paging allows a Chart to be divided into a set number of points per page and for the Chart to be leafed through. See the Paging tutorial for more information.
 
TeeChart paging allows a Chart to be divided into a set number of points per page and for the Chart to be leafed through. See the Paging tutorial for more information.
Line 436: Line 415:
 
<br />
 
<br />
  
==== Walls Properties ====
+
<div id="Walls">''' '''</div>
 +
== Walls Properties ==
  
 
There are 4 Walls: Left, Right, Bottom and Back, that may be represented in 2D or 3D.
 
There are 4 Walls: Left, Right, Bottom and Back, that may be represented in 2D or 3D.
Line 442: Line 422:
 
Wall properties are accessible via:
 
Wall properties are accessible via:
  
[Javascript:CallHelp('TCustomAxisPanel.View3DWalls','Tc2013') TChart1.View3DWalls]<br />[Javascript:CallHelp('TCustomChart.LeftWall','Tc2013') TChart1.LeftWall]<br />[Javascript:CallHelp('TCustomChart.RightWall','Tc2013') TChart1.RightWall]<br />[Javascript:CallHelp('TCustomChart.BottomWall','Tc2013') TChart1.BottomWall]<br />[Javascript:CallHelp('TCustomChart.BackWall','Tc2013') TChart1.BackWall]
+
  TChart1.View3DWalls<br /> TChart1.LeftWall<br /> TChart1.RightWall<br /> TChart1.BottomWall<br /> TChart1.BackWall
  
 
[[Image:TeeWalls.png]]
 
[[Image:TeeWalls.png]]
  
'''<font size="2"></font>'''
+
Wall Border<br /> The Border button takes you to the Pen definition for the TChartWall component. This is the same Pen as that available for many other TeeChart objects.</font>
 
+
Wall Border<br /> The Border button takes you to the Pen definition for the [Javascript:CallHelp('TChartWall','Tc2013') <font size="2">TChartWall component</font>]<font size="2">. This is the same Pen as that available for many other TeeChart objects.</font>
+
  
 
[[Image:Border.png]]
 
[[Image:Border.png]]
Line 454: Line 432:
 
The visible property enables/disables display of the Border. In the case of the BackWall, where axes are Visible, the Wall Border will be hidden behind those axes so you will only see the result of enabling/disabling the Border if you hide some or all axes (e.g. Make axes Top and Right invisible to see the result of toggling the Wall Border visible property e.g. Chart1.BackWall.Pen.Visible := True;).
 
The visible property enables/disables display of the Border. In the case of the BackWall, where axes are Visible, the Wall Border will be hidden behind those axes so you will only see the result of enabling/disabling the Border if you hide some or all axes (e.g. Make axes Top and Right invisible to see the result of toggling the Wall Border visible property e.g. Chart1.BackWall.Pen.Visible := True;).
  
See [Javascript:CallHelp('TChartPen','Tc2013') <font size="2">Pen</font>]<font size="2"> for other characteristics of the Border Pen. You can change these properties to see the result at design time.</font>
+
See Pen for other characteristics of the Border Pen. You can change these properties to see the result at design time.</font>
  
 
<br />
 
<br />
  
==== 3D ====
+
<div id="ThreeD">''' '''</div>
  
<font size="2"></font>
+
== 3D ==
  
 
3D is extremely flexible in TeeChart Pro. You have the option to display the Chart as:
 
3D is extremely flexible in TeeChart Pro. You have the option to display the Chart as:
Line 480: Line 458:
 
[[Image:TeeThreeD.png]]
 
[[Image:TeeThreeD.png]]
  
''''''
 
  
 
Editor options:
 
Editor options:
Line 486: Line 463:
 
3 Dimensions<br /> Selecting this property (toggling) will change the Chart from a 3D to a 2D Chart in design time and the setting will take effect for runtime.
 
3 Dimensions<br /> Selecting this property (toggling) will change the Chart from a 3D to a 2D Chart in design time and the setting will take effect for runtime.
  
''''''
 
  
 
3D %<br /> Controls the depth of the 3D effect. Changing the value of this property will show you at design time the effect of changing the 3D percentage.
 
3D %<br /> Controls the depth of the 3D effect. Changing the value of this property will show you at design time the effect of changing the 3D percentage.
Line 494: Line 470:
 
3D visible
 
3D visible
  
[Javascript:CallHelp('TCustomTeePanel.View3D','Tc2013') <font size="2">Chart1.View3D</font>]
+
Chart1.View3D
  
<font size="2"></font>
 
  
 
3D%
 
3D%
  
[Javascript:CallHelp('TCustomAxisPanel.Chart3DPercent ','Tc2013') <font size="2">Chart1.Chart3DPercent</font>]
+
Chart1.Chart3DPercent
  
<font size="2"></font>
 
  
 
The Orthogonal Option, when disabled, enables Windows Native 3D mode allowing you to Rotate, Elevate and offset the Chart. The Zoom option allows you to bring forward or move away the whole Chart. Zooming internally in the Chart on Data Series is still available at runtime.
 
The Orthogonal Option, when disabled, enables Windows Native 3D mode allowing you to Rotate, Elevate and offset the Chart. The Zoom option allows you to bring forward or move away the whole Chart. Zooming internally in the Chart on Data Series is still available at runtime.
Line 524: Line 498:
 
</center>
 
</center>
 
----
 
----
© 1998-2013 Steema Software SL. All rights reserved.
+
© 1998-{{CURRENTYEAR}} Steema Software SL. All rights reserved.

Latest revision as of 15:06, 15 April 2016

Vcl.png

Contents page
Previous | Next

Tutorial 2 - Chart display properties

Chart display features are those which affect the overall appearance of the Chart. They include those properties and methods that define the colour of the Chart background, Titles and their position, margins, borders and bevels, background images, frame and axis visible, pen colours and widths, 3D, walls, etc.

Nearly all these properties are available via the Chart Editor at design or runtime and you may modify these properties programmatically at runtime.

The overall Chart appearance characteristics are a grouped into these categories:

General
Axis
Titles
Legend
Panel
Paging
Walls
3D


These are the groupings you will find if you open the Chart Editor and browse the Chart pages. Other properties affect the 'look' of your Chart. These include Series colours and mark characteristics, individual Axis and Grid display properties and labelling. These will be dealt with in later tutorials.

The demo that accompanies this tutorial is called DisplayProject and can be found in the "Examples\Chart display" folder below your TeeChart installation folder.



Getting started with Chart display properties

Add a new Chart to a Form and you will see it displays in 3D with a grey panel background, 2 walls (Bottom and Left), Frame (which defines the Frame of the Chart's plottable area) and a default Chart Title Header "TeeChart".

Right click on the chart and select 'Edit Chart...' from the menu to access the Chart Editor. The first page is the Series page which is empty of Series at the moment and which we'll look at in another tutorial. Select the second Chart tab 'General' to access the General Chart properties page.

General Chart properties

TeeImage59.png

General options include Zoom, Scroll, Cursor and Fonts.

See the Zoom and Scroll tutorial for more information about zooming and scrolling.

You may change the cursor type by selecting from the dropdown list available under the Cursor tab.

Any Text displayed on the Chart can be easily modified by altering the Font properties found under the Fonts tab.

Series Add method

Axis Properties

Control of the axes is quite an involved area at its greatest level of intricacy and is dealt with in greater depth in a later tutorial. Here we will cover the fundamentals of Axis and Frame display.

The second Chart page holds the properties for defining axis and frame characteristics.

TeeImage60.png

There are 5 axes in the Chart. Left, Top, Right, Bottom and Depth. The Chart Frame displays as a surround to the Chart's plottable area and has no data corresponding features (See BackWall). The Depth initialises by default as not Visible. All other Axes are visible from the moment that a Series is added to the Chart and associated with those Axes (Left and Bottom as default). Custom Axes may be added/removed by using the and - keys on the dialogue. For a Custom Axis to be visible (as for any other Axis) a Series must be associated with the Axis. See the Axis tutorial for more about Custom axes.

The key properties to enable display of axes and frame are:


Visible
This checkbox enables or disables display of all axes. If the Back wall Frame is visible then the Chart surround is still visible when the axes are hidden. The result will be the appearance of a larger Chart as no area is reserved for the axis labels. The Visible property for each Axis (Scales tab) overrides the visible characteristic for each Axis. If you select the Depth Axis in the List then you will note that Depth Axis Scales::Visible is by default 'not visible'.

Runtime


[Javascript:CallHelp('TCustomAxisPanel.AxisVisible','Tc2013') Chart1.Axes.Visible := True;]


Axis: Left, Right, Top, Bottom and Depth Visible
Select the Axis that you wish to display or hide in the Listbox and toggle the Visible checkbox on the Scales tab to control the display for that specific axis.

Runtime

e.g.

[Javascript:CallHelp('TChartAxis.Visible','Tc2013') Chart1.Axes.Bottom.Visible = False]


Titles Properties

The Titles page of the Chart Editor controls the characteristics of the Chart Titles, Header and Footer.

TeeEditTitle.png

Use the dropdown Combobox to select either Title, Foot, SubTitle or SubFoot. Enter the required text in the Textbox. You may type multiline titles.

Runtime:

The Text property of TChartTitle is a TStrings component. You may add several lines to the Header:

e.g.

With Chart1.Title.Text do
begin
  Add('My First Line');
  Add('My Second Line');
end;


You may then modify lines of text:

e.g.

With TChart1.Title do
begin
  Text[0]:= 'my1stline revised';
end;



Style Alignment
Alignment refers to the Title (or Footer) alignment with respect to the Chart area NOT the overall Chart Panel. The Chart area is the plottable area of the Chart plus the Axis Labels and Legend.

Runtime:


[Javascript:CallHelp('TChartTitle.Alignment','Tc2013') Chart1.Title.Alignment := taCenter;]


Position
Use Position to override the Title or Footer default position and set a custom position (pixels relation to Chart Top, Left).

Runtime:


  Chart1.Title.CustomPosition:=True;
  Chart1.Title.Top:=Chart1.Title.Top 30;


Format
Contains the settings for the Title box, e.g. Frame, Background colour, etc.

Set the Transparency to unchecked to see the Border.


E.g. Pattern
Patterns refers to the background pattern of the Title or Footer box.

EditPatt.png

PATTERN.gif

The default is Clear. The selected Pattern will sit behind the Text.

Runtime:

e.g.


Chart1.Title.Brush.Style := bsFDiagonal;


Border
Adds a Border around the Titles (Title, Footer, Sub-Title and Sub-Footer) with the option of a Bevel effect and a Frame around it too.


E.g. Font
The Font button will grant access to the Font Dialog window which allows selection of Windows Fonts and definition of style (italic, bold, etc.) and colour.

Runtime:

[Javascript:CallHelp('TTeeCustomShape.Font','Tc2013') Chart1.Foot.Font.Name := 'Times New Roman';
Chart1.Foot.Font.Style := [fsBold];
]


Text
Contains the Title Text appearance formatting characteristics.

e.g. Font The Font button will grant access to the Font Dialog window which allows selection of Windows Fonts and definition of style (italic, bold, etc.) and colour.


Gradient
Enable/disable a Background Gradient in the Title box.


Shadow
Adds a shadow to the Border around the Title, Footer, Sub-Title and Sub-Footer. .


Picture
An image can be used for the background to the Text box instead of a using colours. By applying Filters to the image, it can be modified so as to get the best result..



Legend Properties

Legend contents are dealt with in a later tutorial. In the Legend page of the Chart Editor you may define appearance aspects of the Legend. Important initial steps are to know how to control Legend alignment and visible properties, colour, font, frame, shadow, etc..</font>

TeeLegend.png


Style
Toggle On/Off Legend display and set Legend display content characteristics (inclusion of Checkboxes, etc).

Runtime:

Example using a Checkbox to control Legend display.


  Chart1.Legend.Visible := Checkbox1.Checked;


Dividing Lines
Used to draw lines within the Legend box between the Legend entries. TChartPen properties apply.

Runtime:

e.g.

Chart1.Legend.DividingLines.Visible := True;
Chart1.Legend.DividingLines.Color := clBlue;]


Position
Sets the default display position or enables custom positioning of the Legend. TChart will change the shape of the Legend to fit the location. If the Legend is set to the side (left or right) of the Chart the contents of the Legend, by default, sit as a list from top to bottom. If the Legend sits below or above the Chart then the Legend contents are placed side by side. The default behaviour may be overridden by using the Resize Chart option and/or by using Custom positioning. See the Legend tutorial for more about custom positioning of the Legend.

E.g. ResizeChart
Resize Chart defines whether or not the Chart will leave space for the Legend when it paints. This allows the Legend to be placed within the Chart area.

Runtime:

e.g.

Chart1.Legend.ResizeChart := True;]


%Top position
Defines the Legend box displacement from the top of the Chart Panel.

Runtime:

e.g.

Chart1.Legend.TopPos := 20;


Symbols
Size and formatting of the Legend symbols.


%Color width
Defines the width of the colour boxes within the Legend.

Runtime:

e.g.

Chart1.Legend.ColorWidth:=20;]


Title
Defines the characteristics for the Legend title and Legend title box.

Runtime:

e.g.


With Chart1.Legend.Title do
  begin
    Font.Height:=14;
    Font.Color:= clBlue;
    Color:= clYellow;
    Shadow.Smooth:=true;
    BevelWidth:=4;
    TextAlignment:=taCenter;
  end;

Format
Contains the settings for the Legend box, e.g. Frame, Background colour, etc.


E.g. Shadow
Properties for the display of the Legend box Shadow. You may define the colour and size.

Runtime:

e.g.

Chart1.Legend.ShadowColor := clYellow;


Border
You may define Border independently or in conjunction with the Bevel properties. Mixing Bevel and Border and manipulating Width gives almost any combination of 3D effects.

Text
Text characteristics for the Legend text contents.

Runtime


  With Chart1.Legend do
  begin
    Color := clBlue;
    Font.Name := 'Times New Roman';
    Font.Color:=clYellow;
  end;


Gradient

Enable/disable a Background Gradient in the Legend box.


Shadow
Adds a shadow to the Legend Border.


Emboss
Adds a embossed effect to the Legend Border.


Picture
An image can be used for the background to the Legend box instead of a using colours. By applying Filters to the image, it can be modified so as to get the best result..


Panel Properties

The TeeChart Panel page allows you to set parameters which can greatly enhance the appearance of the Chart. Panel Gradient effects are best seen by monitors that support true colour but some colour combinations on 255 colour screens are very acceptable.

By now you are familiar with TeeChart properties so we won't run through all the properties here. Panel properties and methods may be accessed via the TChart component.

PanelEditor.png

Key areas are:


Color
E.g. Panel Color
Color will paint the whole Chart background with the chosen color. If you select to view a background Gradient or Image, they will hide the Panel Color. If you set a Back colour it will replace the Panel colour within the Chart Frame only.


Border
You may define Border independently or in conjunction with the Bevel properties. With Border set to Visible True you will obtain a 'sunken' border effect on the outside of the Chart Panel. Mixing Bevel and Border and manipulating Width gives almost any combination of 3D effects.

E.g. Bevel Inner/Bevel Outer/Width
These properties will produce a variety of 3D effects on the Border of the Chart panel. Modify them at design time to see how they affect the Chart border bevels.


Margin
You can determine the Margin size around the Panel. Each Chart component has four margin properties: MarginLeft, MarginRight, MarginTop and MarginBottom.
Margins are defined as the distance between the Chart Border and the Chart Frame and are expressed as a percentage of the overall dimensions of the Chart Panel.
Default values are 4% for top and bottom margins and 3% for left and right margins.

Moving the spin boxes in the Chart Editor Margins box will show you at design time the effect of changing each Margin.

Runtime properties are:

Chart1.MarginTop
Chart1.MarginLeft
Chart1.MarginRight
Chart1.MarginBottom

The example applied in the demo project uses an UpDown button:


procedure TForm1.UpDown3Click(Sender: TObject; Button: TUDBtnType);
begin
  Chart1.MarginTop := 30 - UpDown3.Position;
end;


Gradient
To define a Gradient you must select a StartColor and EndColor (plus, optionally MidColor) and enable as Visible the Gradient. The Gradient will cover the whole Chart panel. Gradient direction defines the direction of colour change between Start, Mid and EndColor.

Runtime:

e.g.

  With Chart1.Gradient do
  begin
    StartColor := clBlue;
    EndColor := clWhite;
    Direction := gdTopBottom;
    Visible := true;
  end;


Shadow

You may also add a shadow to the outside of the Chart Panel when Shadow Visible is enabled. By adjusting the Colour, Size and Transparency, and in conjunction with Bevel and Border properties impressive 3D effects can be obtained.
Use negative values for the Vertical and Horizontal Sizes if you require shadows at the top or left of the Chart Panel respectively.


Image
You may select any bitmap (.bmp) file as a background Image. The Image may be centred, tiled or stretched on the Chart Panel, or may be restricted to the Chart Frame boundaries.

Runtime:

Use Image.LoadFromFile to add an Image to a Chart at runtime.

e.g.

if OpenPictureDialog1.Execute then
   Chart1.Image.LoadFromFile(OpenPictureDialog1.FileName);


Paging Properties

TeeChart paging allows a Chart to be divided into a set number of points per page and for the Chart to be leafed through. See the Paging tutorial for more information.

TeePaging.png


Walls Properties

There are 4 Walls: Left, Right, Bottom and Back, that may be represented in 2D or 3D.

Wall properties are accessible via:

 TChart1.View3DWalls
TChart1.LeftWall
TChart1.RightWall
TChart1.BottomWall
TChart1.BackWall

TeeWalls.png

Wall Border
The Border button takes you to the Pen definition for the TChartWall component. This is the same Pen as that available for many other TeeChart objects.</font>

Border.png

The visible property enables/disables display of the Border. In the case of the BackWall, where axes are Visible, the Wall Border will be hidden behind those axes so you will only see the result of enabling/disabling the Border if you hide some or all axes (e.g. Make axes Top and Right invisible to see the result of toggling the Wall Border visible property e.g. Chart1.BackWall.Pen.Visible := True;).

See Pen for other characteristics of the Border Pen. You can change these properties to see the result at design time.</font>


3D

3D is extremely flexible in TeeChart Pro. You have the option to display the Chart as:

2D Flat Chart, viewed from front
3D Orthogonal 3D represented by vectored Lines to indicate depth
3D Native Windows 3D using 3D Canvas with 360� Chart rotation
3D Open GL 3D using Open GL Canvas with 360� Chart rotation. When OpenGL is enabled for the Chart, the Editor adds a new page for OpenGL options.

TeeThreeD.png


Editor options:

3 Dimensions
Selecting this property (toggling) will change the Chart from a 3D to a 2D Chart in design time and the setting will take effect for runtime.


3D %
Controls the depth of the 3D effect. Changing the value of this property will show you at design time the effect of changing the 3D percentage.

Runtime properties are:

3D visible

Chart1.View3D


3D%

Chart1.Chart3DPercent


The Orthogonal Option, when disabled, enables Windows Native 3D mode allowing you to Rotate, Elevate and offset the Chart. The Zoom option allows you to bring forward or move away the whole Chart. Zooming internally in the Chart on Data Series is still available at runtime.



PREVIOUS

NEXT


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