Difference between revisions of "AXTutorial4"
|Line 276:||Line 276:|
Revision as of 12:27, 23 January 2013
| Contents page
Previous | Next
- 1 Tutorial 4 - Axis Control
Tutorial 4 - Axis Control
TeeChart Pro will automatically define all Axis labelling for you and offers plenty of flexibility to tailor any specific requirements you may have. TeeChart Pro offers true Multiple Axes. These are available at design or run time and offer countless possibilities and flexibility for Axis definition. See the section in this tutorial for more information.
[#AxesControl Axes control - Key areas]
[#AdditionalAxes Additional Axes]
[#CustomDraw Copying axes]
[#AxisEvents Axis events]
Axes control - Key areas
Axis scales are set automatically when you add Series data to your Chart. You may change from the defaults at design time or at runtime by using Axis properties.
| Non date-time data|
When adding a new Series, the Scales section of the Axis Page of the Chart Editor will show Automatic selected and other options greyed out. All values shown are numeric.
| Date-time data|
When a Series has datetime set to true (for that axis) on the Series, General page, the Scales section of the Axis Page of the Chart Editor will show Automatic selected and other options greyed out. Values are shown with Date-time values.
Automatic selects the best axis scale range to fit your data. If you turn Automatic off the scales section will ungrey options and you can change Axis values. Important, remember to select the Axis that you wish to configure from the list of Axes on the left of the page.
Add a Line Series to a Chart add a Command Button with the following code:
Dim t As Integer For t = 0 To 40 With TChart1.Series(0) .Add CInt((Rnd) * t), "", vbRed End With Next t
Running the code in the button will draw a Line Series with 40 random values. Go to the Chart Editor at design time. Turn Automatic 'off' in the Bottom Axis scales section of the Axis page. You may now configure Maximum and minimum values for the Axis scale. Running the code again will show values depending on the values you configured for the Axis. Using the right button of of the mouse you may scroll to see the remaining values.
Setting axis scales by code
You can change the Maximum and Minimum at runtime using this code:
With TChart1.Axis.Bottom .Automatic = False .Maximum = 36 .Minimum = 5 End With
You may set Axis scale Maximum and Minimum to automatic individually. e.g:
With TChart1.Axis.Bottom .AutomaticMaximum = True .AutomaticMinimum = False .Minimum = 5 End With
You may set Axes to have Offsets (in pixels) for both Minimum and Maximum scales.
TChart1.Axis.Left.MaximumOffset = 4 TChart1.Axis.Left.MinimumOffset = 4
You may tailor the intervals for the Axis. Select the Desired Increment combobox from the Scales section of the Axis page and add the increment you require. You may change this by code at runtime:
With TChart1.Axis.Bottom .Increment = 20 End With
If your data is datetime (You may set the data to datetime for your Series by going to the Series, General page), the Chart, Axis page, scales section will show datetime range. Select the increment from the range shown in the Desired Increment combobox.
add some sample data
For t = 1 To 25 With TChart1.Series(0) .AddXY DateValue("2012, 11, " & t), Rnd(t) * t, "", vbRed End With Next t
Change the Increment at runtime:
With TChart1.Axis.Bottom .Increment = TChart1.GetDateTimeStep(dtTwoDays) End With
See the Axis.ExactDateTime property for more information about date axis labelling
When changing axis label frequency, bear in mind that TeeChart will avoid label overlap according to the setting of the LabelsSeparation property. This means that if the label frequency is too high for the labels to fit, then TeeChart will allocate 'best fit'. Changing the label angle and label separation are 2 options that may help you fit the labels you require. See the Labels section and LabelsAngle property.
Titles are set in the Titles section of the Axis page. You may change the Title text for the Axis and its font. The angle may be selected from values 0, 90, 180, 270 degrees. For runtime see Axis Title Class.
See the AxisLabels Class (IAxislabels interface) for a resume of Labels properties.
When changing axis label frequency, bear in mind that TeeChart will avoid label overlap according to the setting of the Labels.separation property. This means that if the label frequency is too high for the labels to fit, then TeeChart will allocate 'best fit'. Changing the label angle and label separation are 2 options that may help you fit the labels you require. See the Labels.Angle property.
You may apply all standard number and date formats to Axis labels. The Axis page, Labels section contains the field "Values format". If your data is datetime the field name changes to "Date time format". In the Editor drag the help "?" icon onto the field to get a full listing of options. At runtime use:
With TChart1.Axis.Bottom .Labels.ValueFormat = "#,##0.00;(#,##0.00)" End With 'or for datetime data With TChart1.Axis.Bottom .Labels.DateTimeFormat = "dd/mmm/yy" 'Datetime End With
Axis labels can be displayed as multi-line text instead of a single line of text. Lines are separated using the carriage-return ascii character ( #13 ).
//Add the Series labels in this way and apply 'Marks' as Axis labelling style TChart1.Series(0).Add 1234, "New" chr$(13) "cars", vbRed TChart1.Series(0).Add 2000, "Old" chr$(13) "bicycles", vbBlue
Example for DateTime labels:
The following will show the Bottom Axis labels in two lines of text, one showing the month and day, and the second line showing the year:
Feb-28 Mar-1 .. 1999 1999 ..
TChart1.Series(0).AddXY DateValue("28,2,1999"), 100, "", clTeeColor TChart1.Series(0).AddXY DateValue("1,3,1999"), 200, "", clTeeColor TChart1.Series(0).AddXY DateValue("2,3,1999"), 150, "", clTeeColor TChart1.Series(0).XValues.DateTime = True TChart1.Axis.Bottom.Labels.DateTimeFormat = "mm/dd hh:mm" 'space
If you set the Labels.MultiLine property to True, the axis will automatically split labels in lines where it finds a space.
TChart1.Axis.Bottom.Labels.MultiLine = True
Dividing the Label into two:
'mm/dd' for the first line
'hh:mm' for the second line
At run-time you can always split the label into lines programatically, using the OnGetAxisLabel event:
Private Sub TChart1_OnAfterDraw() TChart1.Axis.Left.Labels.TeeSplitInLines LabelText, " " End Sub
The global "TeeSplitInLines" procedure converts all spaces in "LabelText" to line separators (returns).
The axis Labels.Angle property ( label rotation in degree angles 0, 90, 180 or 270 ), can also be used with multi-line axis labels.
Customising Axis labels
Further Label control may be obtained by using Axis events. The events permit you to activate/deactivate/change any individual Axis label. The following example modifies each Label, putting a textual phrase in front of the point index value.
'set LabelStyle to 'Mark' with the TChart editor or use:- TChart1.Axis.Bottom.Labels.Style = talMark 'OnGetaxisLabel event Private Sub TChart1_OnGetAxisLabel(ByVal aAxis As Long, ByVal SeriesIndex As Long, ByVal ValueIndex As Long, LabelText As String) If aAxis = atBottom Then LabelText = "Period " Str(ValueIndex) End If End Sub
See the section entitled [#AxisEvents Axis events] for more information about customising labels with Axis events.
Axes labels may be modified at specific positions with custom text and formatting without the need to use TeeChart events, making them much easier to modify serverside in ASP scenarios.
Private Sub Form_Load() Dim v As Variant v = Array(200, 0, 123, 300, 260, -100, 650, 400) TChart1.AddSeries scLine TChart1.Series(0).AddArray 8, v AddCustomLabels End Sub
Private Sub AddCustomLabels() TChart1.Axis.Left.Labels.Clear TChart1.Axis.Left.Labels.Add 123, "Hello" TChart1.Axis.Left.Labels.Item(0).Font.Size = 16 TChart1.Axis.Left.Labels.Add 466, "Good" & Chr(13) & "Bye" TChart1.Axis.Left.Labels.Item(1).Transparent = False TChart1.Axis.Left.Labels.Add 300, "" TChart1.Axis.Left.Labels.Add -100, "" With TChart1.Axis.Left.Labels.Item(3) .Transparent = False .Transparency = 50 .Color = vbBlue End With End Sub
Normal Logarithmic labelling may be set in the following way:
With TChart1.Axis.Left .Logarithmic = True .Increment = 0 ' the default .SetMinMax 0, 10000 .Labels.ValueFormat = "#e 0" ' exponential format End With
Labels will be set according to the Logarithmic base (default 10) thus, in this case giving labels at 1,10,100,1000,10000.
Ticks and Minor
There are 3 tick types and 2 types of Grid. You may change the length, width and colour of each tick and Grid type. Changes can be made to Ticks, their associated Grid and Inner Ticks via the ï¿½Ticksï¿½ tab; changes to Minor Ticks and their associated Grid can be made via the ï¿½Minorï¿½ tab.
With TChart1.Axis.Bottom .TickLength = 7 .Ticks.Color = vbGreen .MinorTickCount = 10 'change number of minorticks between (major) Ticks End With
Axes have a property to modify where each axis is to be located. In this example, the axis is moved 50% of the total Chart width, so it is shown at the chart center:
TChart1.Axis.Left.PositionPercent = 50
TeeChart offers 5 axes to be associated with data Series, Left, Top, Bottom, Right and Depth. When you add a new series to a Chart you may define to which of the axes the Series should be related (Go to the Series tab, General page). You may repeat anyone (or all) of the front 4 axes at any place on the Chart by using the Axis Customdraw method. Note that this method makes a copy of your Axis, it does not add a new Custom Axis. See the next section, Multiple Custom Axes, for more information.
'fill the Series for this example with random data Private Sub Command1_Click() Dim t As Integer For t = 0 To 20 TChart1.Series(0).AddXY t, ((100 * Rnd) 1) - ((Rnd * 70) 1), "", vbRed Next t End Sub 'Put this code in the TChart1_OnBeforeDrawSeries() event: Dim posaxis As Integer With TChart1 If .Axis.Left.Maximum > 0 Then 'When scrolling or on zoom always keep the gridlines enclosed in the Chart rectangle .Canvas.ClipRectangle .Canvas.Left, .Canvas.Top, (.Canvas.Left .Canvas.Width), _ (.Canvas.Top .Canvas.Height) 'Always draw the 2nd vertical Axis at the middle point of the Chart posaxis = (.Canvas.Left) (.Canvas.Width * 0.5) .Axis.Left.CustomDraw posaxis - 10, posaxis - 20, posaxis, True 'Draw the 2nd Horizontal axis at the level of "10" on the vertical axis posaxis = (.Axis.Left.CalcYPosValue(10)) .Axis.Bottom.CustomDraw posaxis 10, posaxis 40, posaxis, True .Canvas.UnClipRectangle End If End With