AXTutorial1

From Steema Software Reference Wiki
Jump to: navigation, search

Ax.png

Contents page
Next

Tutorial 1 - Getting started

Getting Started - building Charts and populating Data Series


Introduction

Basic Charts can be built and implemented using the Chart Editor with little or no use of code. The Chart Editor is two Editors in one, the Chart may be thought of as being distinct from its data Series contents. You may define the Chart appearance, titles, Legend characteristics and 3D aspect without having to include a data Series. That gives you the freedom to add and remove different data Series types at runtime without having to redefine the whole Chart look and feel.

Pieces.png
These components work together, with Chart axes being the interface between Chart and Series. A Series has data and its values will influence the label characteristics of the Chart axes. The axes appearance, colours, grid frequency and label fonts may all be defined for the Chart before adding data Series. TeeChart will make a best estimate of most values to minimise the need for you to predefine Chart and Series properties.

Add multiple series types with the Chart editor The "Chart distinct from Series" design paradigm of TeeChart allows you to mix a variety of Series types without being limited to a choice of predefined Chart formats.

Mixchart.png

Intro3.png

And Internet ! For this area of growing demand for applications, feature include JPEG, PNG, GIF and PCX Chart save to file or stream and TeeChart "tee" templates for low bandwidth charting. TeeChart fully supports Internet Information Server's Active Server Pages (ASP) and tee template technology allows for the distribution of Live OLE/ODBC database Charting applications without the need for OLE/ODBC at the client. See the [tutorial9.htm Internet applications tutorial] for more information.


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


Building a Chart

Including TeeChart on a Form

By using TeeChart's installer application you will have succeeded in adding the TeeChart icons to the Toolbox of our programming environment. The TeeChart Chart icon is a representation of a circled (Pie) Chart.

Button1.png

Select the icon in the Toolbar and click and drag out to size TChart on a Form. You will see TChart as a panel with some basic Chart features such as Axis and Title. TeeChart is derived from a panel, you could use the Chart Editor to delete the existing visual features and you would be left with a perfectly servicable 3D panel complete with Border and Bevel properties ! TeeChart is much more than a panel of course, right click on the new TChart and you will see a menu displayed. Select the ActiveX -Edit Chart... option to access the Chart Editor.

Tut1menu.png


For an introduction to TeeChart's other palette components, follow this link to Tutorial 17


The Chart Editor

The Chart Editor contains access to most commonly used, Chart properties.

Editchr1.png

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


The Chart Series Gallery

Gallery.png

The Series Gallery now consists of six tabbed pages:

Blbullet.png Standard

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

Blbullet.png 3D

3D Series types, those that represent 3 dimensional (X, Y, Z) data.

Blbullet.png Other

Miscellaneous Series types.

Blbullet.png Extended

We have included some example custom Series types.

Blbullet.png Financial

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

Blbullet.png Stats

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


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



Populate the new data Series

Select the Series tab in the Chart Editor to display the Series configuration properties. The fifth tab on the Series page is the the data source tab.

ADO

If your data source is OLE DB or ODBC compliant then you may map your data directly in the Chart editor.

Odbc1.png

Select Dataset from the dropdown listbox on the Data Source page and then select the New... button to define the connection source.

Odbc2.png

Building a new connection string using the default Microsoft OLE DB Provider for ODBC Drivers Provider enables you to select from any of your ODBC data sources with a valid User DSN, including the TeeChart Pro Database.

Odbc3.png

You may select a table from the available list of tables or write your own SQL query for the data source. SQL queries can be saved as TXT files and brought in as such.

Odbc4.png

Selecting OK will create a record of the entire connection operation, in this case called DataSet1, and returns you to the to the prior Datasource screen where you may select the columns to add to your Series. To populate our new Bar Series we only require to have Labels and Bar values, where Labels will read on the horizontal (bottom by default) axis and where Bar is the value of the vertical height of the Bar. You may select Close or Apply when you have finished with these fields and you should see the chart already populated with the data from your data source.

Odbc5.png

Coded data input

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

The Series that you previously added with the Chart Editor shows random data at design time. At runtime however, the Series will be empty of data unless you manually populate it. Select a Command button from the Toolbox and place it on your Form. In Visual Basic Double-click on the button to access the code editor (the approach may vary in different programming environments). In the code Editor type these lines:

(Visual Basic)


With TChart1.Series(0)
    .Add 3, "Pears", vbRed
    .Add 4, "Apples", vbBlue
    .Add 2, "Oranges", vbGreen
End With


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

The first Series in your Chart has a (0) index, the second (1), etc.. so with multiple series in your Chart you may use the index to select the Series you wish to modify.

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

(Visual Basic)


  With TChart1.Series(0)
    If .Count > 0 Then
      'Increment X Axis value and add a new random point
      .AddXY .XValues.Last (Rnd(100)), (.YValues.Last/.YValues.Last-1) (Rnd(100)), "", vbBlue
    Else
      'Add a new random point
      .AddXY 1, (Rnd(100)), "", vbBlue
    End If
  End With



Selecting a Series type to suit your needs

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

Series Type

No. of variables

Datasource Properties

Standard

Gantt

3

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

Line

2

XValues, YValues, XLabel

Bar

2

XValues, YValues (called Bar), XLabel

HorizBar

2

XValues, YValues (called Bar), XLabel

Area

2

XValues, YValues, XLabel

Point

2

Xvalues, YValues, XLabel

Pie

1

PieValues, XLabel

Fast Line

2

XValues, YValues, XLabel

HorizLine

2

XValues, YValues, YLabel

HorizArea

2

XValues, YValues, YLabel

Shape

4

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

Bubble

3

XValues, YValues, XLabel, RadiusValues

3D

Surface

3

XValues, YValues, XLabel, ZValues

Contour

3

XValues, YValues, XLabel, ZValues

Waterfall

3

XValues, YValues, XLabel, ZValues

Color Grid

3

XValues, YValues, XLabel, ZValues

Vector 3D

3

XValues, YValues, XLabel, ZValues

Tower

3

XValues, YValues, XLabel, ZValues

Iso-Surface

3

XValues, YValues, XLabel, ZValues

Point3D

3

XValues, YValues, XLabel, ZValues

Bubble

5

XValues, YValues, XLabel, RadiusValues, ZValues

Triangle Surf.

3

XValues, YValues, XLabel, ZValues

Polar Grid

3

XValues, YValues, XLabel, (Polar Grid has Sectors, Tracks and Values)

Extended

Arrow

4

StartXValues, StartYValues, XLabel, EndXValues, EndYValues

Polar

2

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

Radar

2

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

Polar Bar

3

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

Bezier

2

XValues, YValues, XLabel

Donut

2

Angle, YValues, Labels

Smith

2

Resistance, Reactance, Labels

Pyramid

2

XValues, YValues, XLabels

Map

3

XValues, YValues, Polygons, Labels

Org Chart

2

XValues, YValues, Labels

Tree Map

2

XValues, YValues, Labels

Financial

Point & Figure

5

OpenValues, CloseValues, HighValues, LowValues, DateValues

Candle

5

OpenValues, CloseValues, HighValues, LowValues, DateValues

Volume

2

XValues, YValues (VolumeValues), XLabel

Darvas

5

OpenValues, CloseValues, HighValues, LowValues, DateValues

Renko

2

XValues, YValues, Labels

Kagi

2

XValues, YValues, Labels

Stats

Histogram

2

XValues, YValues, XLabel

Horizontal Histogram

2

XValues, YValues, XLabel

Error Bar

3

XValues, YValues, XLabel, ErrorValues

Error

3

XValues, YValues, XLabel, StdErrorValues

High-Low

3

XValues, YValues, LowValues, XLabel

BoxPlot

2

XValues, SamplesValues, Label

Horizontal BoxPlot

2

XValues, SamplesValues, Label

Volume Pipe

3

XValues, YValues, Labels

Funnel

3

XValues, QuoteValues, OpportunityValues, XLabel

HighLow Line

3

XValues, HighValues, LowValues, Labels

Ternary

5

XValues, YValues, ZValues, RadiusValues, WeightingValues, Labels

Error Point

6

XValues, YValues, LeftError, RightError, TopError, BottomError, Labels

Error Point 3D

9

XValues, YValues, ZValues, LeftError, RightError, TopError, BottomError, FrontError, BackError, Labels

Other

Line Point

2

XValues, YValues, XLabel

Bar Join

2

XValues, YValues, XLabel

Bar 3D

3

XValues, YValues, YStartPoint, XLabel

Big Candle

5

OpenValues, CloseValues, HighValues, LowValues, DateValues

Image Bar

2

XValues, YValues, XLabel

ImagePoint

2

XValues, YValues, XLabel

DeltaPoint

2

XValues, YValues, XLabel

Wind Rose

2

Angle, YValues, Labels

Clock

2

Angle, YValues, Labels

Rose

3

Angle, YValues, Angle Values, Labels

Calender

2

XValues, YValues, Labels

Tag Cloud

2

YValues, ZValues, Labels

Gauges

Gauge

1

YValue

Numerical Gauge

1

YValue

Linear Gauge

1

YValue

Vertical

1

YValue

Circular gauge

1

YValue

Knob Gauge

1

YValue





NEXT


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