GAMBAS BOOK 3.19.5

If you want to present data graphically in an impressive way, then the chart component gb.chart is just the thing. Unfortunately, the component is not stable and not error-free. Nevertheless, simple but meaningful charts such as line charts can be created with just a few instructions. It may therefore be worth experimenting with this component. This is also true in view of the fact that the developer has announced that the component will be revised.

The Chart class can be used like an object by creating a hidden instance if required. This class behaves like a read-only array. The Chart class represents a chart object that can be drawn in a DrawingArea or on a picture of type Picture. You can also constantly update the data - unlike most other chart libraries.

You can create the class:

Dim hChart As Chart
hChart = New Chart()

You can then define the values of selected chart properties:

With hChart
  .Title = "Temperature time diagram (Berlin 2020)"
  ... 
End With

The Chart class has the following properties:

Table 23.8.0.2.1 : Properties of the Chart class

Here you can see an overview of the chart types, of which only a few provide usable () charts:

• CONST Columns As Integer = 0
• CONST ColumnsStacked As Integer = 1 - Only with corresponding data
• CONST ColumnsPercent As Integer = 2
• CONST ColumnsLineCombination As Integer = 3
• CONST Pie As Integer = 10
• CONST PieRings As Integer = 11
• CONST PieOffSet1 As Integer = 12
• CONST PieOffSet2 As Integer = 13
• CONST {Lines} As Integer = 20
• CONST LinesStacked As Integer = 21 - However, only with positive function values
• CONST LinesPercent As Integer = 22
• CONST LinesSymbols As Integer = 23
• CONST Areas As Integer = 30
• CONST AreasStacked As Integer = 31
• CONST AreasPercent As Integer = 32
• CONST AreasSymbols As Integer = 33
• CONST Bars As Integer = 40
• CONST BarsStacked As Integer = 41
• CONST BarsPercent As Integer = 42
• CONST Plots As Integer = 50

The colours for the individual parts, for example in a bar chart, pie chart or ring chart, are defined in an integer array. The _Colors virtual class has these properties:

Table 23.8.0.3.1 : Properties of the _Colors class

The _Colors class has an Add() method with which you can specify individual colours. If a data set consists of 3 values, then you also need 3 colours:

With Chart.Colors.Values
    .Add(Color.Red)
    .Add(Color.Blue)
    .Add(Color.Green)
  End With

Example:

Public Sub btnColors_Click()
  If btnColors.Text = ("Custom colors") Then
'--  The colours are read from a self-defined colour array
     Chart.Colors.Style = Chart.Colors.Custom 
     btnColors.Text = ("Default colors")
  Else
     Chart.Colors.Style = Chart.Colors.Auto '-- The colours are generated automatically
     btnColors.Text = ("Custom colors")
  Endif  
  DrawingArea1.Refresh()
End

Use the class to define the names of the values on the x-axis in a string array. The _CHeaders virtual class has the following properties:

Table 23.8.0.4.1 : Properties of the _CHeaders class

The class has an Add() method with which you can specify individual identifiers. For example, if 4 values are to be displayed on the x-axis, then you also need 4 identifiers:

  With Chart.Headers.Values
    .Add("Frühjahr")
    .Add("Sommer")
    .Add("Herbst")
    .Add("Winter")
  End With
 
  Chart.Headers.Values = ["Frühjahr", "Sommer", "Herbst", "Winter"] '-- Alternative

The properties for the diagram legend are set in this class. The virtual class _CLegend has these properties:

Table 23.8.0.5.1 : Properties of the _CLegend class

Example:

'-- Defines the legend of the diagram.
    Chart.Legend.Title = "Information"
    Chart.Legend.Font = Font["Arial,+5"]   '-- Font for the legend - relative
    Chart.Legend.Position = Align.Bottom   '-- Alternative: Align.Right
    Chart.Legend.Visible = True

The _CTitle virtual class has three properties that you can use to describe the font, the text and the visibility for the diagram title:

Table 23.8.0.6.1 : Properties of the _CTitle class

Example:

'-- Visibility, title and font of the diagram
    Chart.Title.Visible = True
    Chart.Title.Text = "Spannung-Zeit-Diagramm"
    Chart.Title.Font = Font["Arial,24"] '-- Font for the title - absolute in px

The properties of the x-axis (abscissa) of the diagram are set via its properties. The virtual class _CXAxe has these properties:

Table 23.8.0.7.1 : Properties of the _CXAxe class

The properties of the y-axis (ordinate) of the diagram are set via the class properties. The virtual class _CYAxe has these properties:

Table 23.8.0.8.1 : Properties of the _CYAxe class

Example:

Chart.YAxe.AutoScale = False
Chart.YAxe.MinValue = 0
Chart.YAxe.MaxValue = 5
Chart.YAxe.Step = 1
Chart.YAxe.ShowIntervalLines = False
Chart.YAxe.Visible = True

Note:

A complete project for a line-symbol chart that uses selected classes of the gb.chart component can be found in the next chapter. The special feature is that the data to be displayed is read from an SQLite database table in three series!