| 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 grouped into these categories:
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 dedicated to the specialist role of these features.
The Visual Basic demo that accompanies this tutorial is called DisplayProject.vbp and can be found in the "Examples\Visual Basic\Visual Basic 5 & 6\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 'ActiveX -Edit Chart...' from the menu to access the Chart Editor. The first page is the Series page which is empty and doesn't interest us for this tutorial. Select the second Chart tab 'General' to access the General Chart properties page.
General Chart properties
General options include Mouse, Zoom, Scroll , Cursor, Fonts and Palette.
Moving the cursor over these tabs in the figure above will reveal the corresponding screenshot for each tab in the General group. Here we will only deal with Mouse, Cursor, Fonts and Palette.
Zoom, and Scroll are dealt with in a later tutorial
Here you can choose which action (Zoom, Scroll axis or Nothing) you would like to associate to the different mouse buttons and the scroll axis direction if scrolling is set for the mouse wheel. '
You can select the cursor of your choice from the drop-down list or leave it as the default. '
Any Text displayed on the Chart can be easily modified by altering the Font properties found under the Fonts tab. '
You can change the colour scheme of the chart by selecting from the many palettes available in the colour palette list.
Control of the axes is quite a specialised 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 Axis pages of the editor hold the properties for defining axis and frame characteristics. When opening the Axis tab, the editor shows the Scales options available as seen in the sceenshot below. Moving the cursor over the Minimum, Maximum and Increment tabs reveals the corresponding properties for each.
There are 6 axes in the Chart. Left, Top, Right, Bottom and Depth Right and Depth Top. The Chart Frame displays as a surround to the Chart's plottable area and has no data corresponding features (See BackWall). The Depth axes initialise 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:
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'.
TChart1.Axis.Visible = True
Axis: Left, Right, Top, Bottom and Depth Right and Depth Top 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.
TChart1.Axis.Bottom.Visible = False
The Titles page of the Chart Editor controls the characteristics of the Chart Titles, Header and Footer.
Use the dropdown Combobox to select either Title (Header), SubTitle, Foot or SubFoot. Enter the required text in the Textbox. You may type multiline titles.
The Text property of ITitles is an OLE Strings component. You may add several lines to the Header:
With TChart.Header.Text .Add("My First Line") .Add("My Second Line") End with
You may then modify lines of text:
With TChart1.Header .Text(0) = "my1stline revised" End With
Alignment refers to the Header (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 Axis Labels and Legend.
TChart1.Header.Alignment = taCenter
Use Position to override the Title or Footer default position and set a custom position (pixels relation to Chart Top, Left).
TChart1.Header.CustomPosition = True TChart1.Header.Top = TChart1.Header.Top 30
Contains the settings for the Title box, e.g. Frame, Background colour, etc.
Pattern refers to the background pattern of the Title or Footer box.
The default is Clear. The selected Pattern will sit behind the Text.
TChart1.Header.Transparent = False TChart1.Header.Brush.Style = bsFDiagonal
Contains the Title Text appearance formatting characteristics.
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.
TChart1.Footer.Font.Name = "Verdana" TChart1.Footer.Font.Bold = True
Outline refers to the Frame for text of the Header or Footer. By default it is set to Visible off. The Outline options derive from IPen.
Enable/disable a Background Gradient in the Title box and select its direction and colours.
Properties for display of the Header or Footer box Shadow. You may define colour and size.
TChart1.Header.Transparent = False TChart1.Header.ShadowColor = vbCyan
Legend contents are a specialist subject that will be 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 control Legend alignment and visible properties, colour, font, frame, shadow, etc..
Toggle On/Off Legend display and set Legend display content characteristics (inclusion of Checkboxes, etc).
Example using Checkbox to control Legend display.
With TChart1.Legend If Check11.Value = 1 Then .Visible = True Else .Visible = False End If End With
Used to draw lines within the Legend box between the Legend entries. IPen properties apply.
TChart1.Legend.DividingLines.Visible = True TChart1.Legend.DividingLines.Color = vbBlue
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.
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.
TChart1.Legend.ResizeChart = True
Defines the Legend box displacement from the top of the Chart Panel.
TChart1.Legend.TopPos = 20
Size and formatting of the Legend symbols.
Defines the width of the colour boxes within the Legend.
TChart1.Legend.ColorWidth = 50
Contains the settings for the Legend box, e.g. Fill Colour, Frame colour, style and width, Pattern style, colour and image, bevel style and size and checkboxes for Round Frame and Transparent.
Text characteristics for the Legend text contents.
With TChart1.Legend .Color = vbBlue .Font.Name = "Times New Roman" .Font.Color = vbYellow End With
Enable/disable a Background Gradient in the Legend box and select its direction and colours.
Properties for display of the Legend box Shadow. You may define colour and size.
TChart1.Legend.ShadowColor = vbCyan TChart1.Legend.ShadowSize = 4
The TeeChart Panel page allows you to set parameters which radically 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 Panel interface:
Select TChart1.Panel to see a list and example of all the properties. The Visual Basic demo that accompanies this tutorial has comprehensive examples of panel properties.
Key areas are:
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. '
E.g. Panel Color
Panel colour will paint the whole Chart background with the chosen colour. However, if you select to view a background Gradient or BackImage they will hide the Panel colour. If you set a Back colour it will replace the Panel colour within the Chart Frame only.
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.
Margins are defined as the distance between the Chart Border and the Chart Frame and can be expressed as either a percentage of the overall dimensions of the Chart Panel or as absolute pixel values.
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:
TChart1.Panel.MarginTop TChart1.Panel.MarginLeft TChart1.Panel.MarginRight TChart1.Panel.MarginBottom
The example applied in the demo project uses a Horizontal Scrollbar:
Private Sub Hscroll3_Change() TChart1.Panel.MarginLeft = Hscroll3.Value End Sub
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.
With TChart1.Panel .Gradient.Visible = True .Gradient.StartColor = vbRed .Gradient.MidColor = vbWhite .Gradient.EndColor = vbBlue .Gradient.Direction = gdFromTopLeft End With
You may select any bitmap (.bmp) file as BackImage. The BackImage may be centered, tiled or stretched on the Chart Panel, or may be restricted to the Chart Frame boundaries.
Use Panel.BackImageLoad to add a BackImage to a Chart at runtime.
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.
This page in the Chart section of the Chart Editor applies properties to the Chart Walls. There are 4 Walls: Left, Right, Bottom and Back, that may be represented in 2D or 3D.
Wall properties are accessible via the TChart1.Walls property.
The Border button takes you to the Pen definition for the IWalls interface. This is the same Pen available for many other TeeChart objects.
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 changing the colour of Wall Border i.e. TChart1.Walls.Back.Pen.Color = vbCyan).
See ChartPen for other characteristics of the Border Pen. You can change these properties at design time.
3D is extremely flexible in TeeChart Pro version 5. You now 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 180ï¿½ Chart rotation|
|3D Open GL||3D using Open GL Canvas with 360ï¿½ Chart rotation|
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.
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 equivalent properties are:
An applied example of these properties uses a CheckBox and Horizontal ScrollBar:
Private Sub Check5_Click() With TChart1 If Check5.Value = 1 Then .View3D = True HScroll1.Enabled = True Else .View3D = False HScroll1.Enabled = False End If End With End Sub Private Sub HScroll1_Change() TChart1.Chart3DPercent = HScroll1.Value Label8.Caption = Str$(HScroll1.Value) End Sub
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. Zoom internally in the Chart on Data Series is still available at runtime.
The Perspective property allows you to set a distance perspective as if looking into a room. Perpsective offers a visual enhancement for Charts used for presentation purposes.
For a further reference on 3D options take a look at Tutorial 16, Chart 3D and OpenGL.
© 1998-2019 Steema Software SL. All rights reserved.