How To make a chart with the gb.chart component

First, activate the gb.chart component in your project.

Chart Data structure

The structure of the chart component is simple.

A gb.chart has :
  • A datasets array (you can imagine that is the data array rows).

  • Each dataset has a column name array for the row header.

Note, an initial dataset is created automatically.

  • A Headers array (array column headers). This set the numbers of value the chart contain by series.

A dataset is an array that contains float items.


'Set the column headers

Chart.Headers.Values = ["Tic", "Tac", "Toes"]

'I've only one set, so no need to add one more.
'Set the values :

Chart[0].Values = [1.0, 3.0, 2.5]  ' the .0 forces to return a float[] array

'but you can use this way too : Chart[0].Add(1.0)

'Auto size the fonts, proportionally.
'Normal font size for a chart at 2/3 of the Screen size.
Chart.Proportionnal = true

'Set the title
Chart.Title.Text = "My Chart"

'Set the legend visible
Chart.Legend.Visible = true
Chart.Legend.Title = "My Legend"

Chart.YAxe.ShowIntervalLines = True

Chart.Type = ChartType.Lines

Chart.Style = ChartStyle.Custom

Then to draw the chart. For example in a DrawingArea :

PUBLIC SUB DrawingArea1_Draw()

  Chart.Width = DrawingArea1.ClientWidth
  Chart.Height = DrawingArea1.ClientHeight