TWebGoogleChart

Description

Below is a list of the most important properties methods and events for TWebGoogleChart.

Note: To use Google Charts, it is important to activate the needed Google Charts JavaScript library for this. Do this from the “Manage JavaScript Libraries” item from the project context menu in the IDE project manager.

Designtime	Runtime

Properties for TWebGoogleChart

Property	Description
Appearance
Chart	Sets a custom Min value for the VAxis
Data	Returns the chart as a TJSObject. Allows customizing the chart via JavaScript calls after the initial rendering. (See Example 3)
Series
Title	Sets the title of the Series

Methods for TWebGoogleChart

Property	Description
SetOption(AOption: string; AValue: Boolean); SetOption(AOption: string; AValue: TJSObject); SetOption(AOption: string; AValue: string);	Changes a chart option after the chart is rendered. (See Example 4)
Series[].Values.AddSinglePoint(AValue: Double; ALabel: string = ‘’);	Adds a point to a chart of type Bar, Column.
Series[].Values.AddPiePoint(AValue: Double; ALabel: string = ‘’; Offset: Double = 0; Color: TColor = clNone);	Adds a point to a chart of type Pie. The Offset parameter sets the distance of the pie slice from the main pie. The Color sets the backgroundcolor of the slice, set to clNone to use default colors.
Series[].Values.AddXYPoint(X, Y: Double);	Adds a point to a chart of type Scatter.
Series[].Values.AddCandlestickPoint(X, Y, Minimum, Maximum: Double; ALabel: string = ‘’);	Adds a point to a chart of type Candlestick.
Series[].Values.AddTimelinePoint(StartTime, EndTime: TDateTime: ALabel: string = ‘’);	Adds a point to a chart of type Timeline.
Series[].Values.AddBubblePoint(X, Y: Double; Serie: string; Size: Double; ALabel: string = ‘’);	Adds a point to a chart of type Bubble.
Series[].Values.AddBubbleColorPoint(X, Y: Double; Value: Double; ALabel: string = ‘’);	Adds a point to a chart of type BubbleColor. The Value parameter determines the color of the bubble.

Events for TWebGoogleChart

Events	Description
OnLoaded(Sender: TObject):	Event triggered when the has finished loading
OnSelect(Sender: TObject; Event: TGoogleChartSelectEventArgs);	Event triggered when a datapoint on the chart is selected. The Event parameter contains the SeriesIndex and the PointIndex
OnCustomizeChart(Sender: TObject; var Options: TGoogleChartOptions);	Event triggered before the chart rendering starts. Allows configuration of selected extended chart properties via the Options parameter values. (See Example 2)
OnCustomizeChartJSON(Sender: TObject; var Options: string);	Event triggered when the chart configuration JSON data is ready. Allows to fully customize the configuration of the chart via the Options parameter.

Examples

Example 1: Configuring a BarChart

Demonstrates how to display a chart with just a few lines of code.

var
  it: TGoogleChartSerieItem;
begin
  it := TWebGoogleChart1.Series.Add;
  it.ChartType := gctPie;
  it.Values.AddPiePoint(80, 'Label A');
  it.Values.AddPiePoint(20, 'Label B');
end;139

Example 2: Customization options

Demonstrates how to customize a chart with extended options.

procedure TForm1.WebGoogleChart1CustomizeChart(Sender: TObject;
  var Options: TGoogleChartOptions);
begin
  Options.HAxis.ViewWindow.Min := '0';
  Options.HAxis.ViewWindow.Max := '100';
end;

Note: Options data must contain valid JSON data. Full documentation of available configuration options can be found at: https://developers.google.com/chart/interactive/docs/ (Select Chart Type from the list on the left, then select “Configuration Options” from the “Content” items on the right)

Example 3: Adding and updating datapoints on the fly

Demonstrates how to dynamically add and update datapoints in an existing chart.

procedure TForm1.WebButton1Click(Sender: TObject);
var
  data: TJSObject;
  chart: TJSObject;
begin
  data := WebGoogleChart1.Data;
  chart := WebGoogleChart1.Chart;
  asm
    data.setValue(0, 1, 20); //rowIndex, columnIndex, value
    data.addColumn('number', 'Label'); //datatype, label
    data.addRow(['Row', 10, 20, 30, 40]); //rowTitle, Column values
    chart.draw(); //update chart
  end;
end;

Note: The Google Charts API reference can be found here: https://developers.google.com/chart/interactive/docs/reference#methods

Example 4: Setting options on the fly

Demonstrates how to dynamically update options in an existing chart.

procedure TForm1.WebButton1Click(Sender: TObject);
begin
  WebGoogleChart1.SetOption('vAxis.title', 'Y axis title');140
end;

Note: Options data must contain valid JSON data. Full documentation of available configuration options can be found at: https://developers.google.com/chart/interactive/docs/ (Select Chart Type from the list on the left, then select “Configuration Options” from the “Content” items on the right)