axGoogleChart

Description

axGoogleChart or Google Chart adds the API of various Google visualization charts to an Axes screen. This modern behaviour of the extension is only available in TS2 runtime environment.

By using this extension you will be subject to the Google Terms of Service as outlined in https://developers.google.com/chart/terms

Usability

Context

Supported

Input screen fields

No

Output screen fields

No

Input subfile fields

No

Output subfile fields

No

New screen elements

Yes

Properties

A newly added Google chart extension in an Axes screen initially has only 2 properties, namely chartType and version. Setting the version property to “classic” will set the extension to its old behavior which is documented in axGoogleChart_Classic – Insert a Google Chart into screen. Setting the version property to “modern” will enable access to the modern behavior. The following table describes in alphabetical order the properties of the modern version of the extension.

Name

Description and Comments

JavaScript

Shipped default

arrayData

To non-Diff charts, the description is:

Chart data population method via the Google-specified data array format; the result of the conversion by the arrayToDataTable() function will serve as the data parameter to the draw() API of the Google Visualization Chart.

(To know more about the data array format specified by Google, please refer to the https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable link.)

When the chartType property is set to “Diff”, the description is:

Chart data population method via the Google-specified data array format; the result of the conversion by the arrayToDataTable() function will serve as the 1st parameter to the computeDiff() API of the Google Visualization Chart.

(To know more about the computeDiff() API, please see the https://developers.google.com/chart/interactive/docs/gallery/diffchart link.)

Yes

ENV.returnValue = [];

arrayData2

Conversion by the arrayToDataTable() function where the result will serve as the 2nd parameter to the computeDiff() API of the Google Visualization Chart.

Yes

ENV.returnValue = [];

chartType

Selection of Google Visualization charts

No

Blank

columnOrder

If specified, this property will determine the order of appearance of the column data; if not specified, all the query items will appear according to the alphabetical order of the column names.

Yes

ENV.returnValue = [];

dataSourceType

Indicates where the source data come from

No

Fixed Array

directory

To non-Diff charts, the description is:

The directory where the XML file resides

When the chartType property is set to “Diff”, the description is:

The directory where the 1st XML file resides

No

*DEFAULT

(Value is the same as /ts/screens/<project folder>)

directory2

The directory where the 2nd XML file resides

No

*DEFAULT

(Value is the same as /ts/screens/<project folder>)

dragHandle

If checked, the chart can be moved only with an assigned drag handle; otherwise the chart can be moved by holding any part of it.

Yes

false

dragHandleOrientation

The location of the draggable handle

No

Top-Right

dragHandleVariable

The configuration values for the draggable handle

Yes

ENV.returnValue = {

backgroundCSS: “lightblue”,

bottomOffset : 10,

height : 20,

leftOffset : 10,

rightOffset : 10,

topOffset : 10,

width : 50

}

draggable

If checked, the placement of the chart is movable; otherwise the position is fixed.

Yes

False

filename

To non-Diff charts, the description is:

The filename of the XML file

When the chartType property is set to “Diff”, the description is:

The filename of the 1st XML file

No

Blank

filename2

The filename of the 2nd XML file

No

Blank

noColumnLabel

If checked, all the array contents will be treated as data; otherwise, the first row will serve as the column labels.

Yes

false

options

The options parameter to the draw() API of the Google Visualization Chart

To know more about the draw() API, please see the https://developers.google.com/chart/interactive/docs/drawing_charts#chart.draw link.

Yes

ENV.returnValue = {};

queryString

To non-Diff charts, the description is:

The query string to the datasource web service

When the chartType property is set to “Diff”, the description is:

The query string to the 1st datasource web service

No

Blank

queryString2

The query string to the 2nd datasource web service

No

Blank

sqlVariable

To non-Diff charts, the description is:

Values to use in the SQL database query

When the chartType property is set to “Diff”, the description is:

Values to use in the 1st SQL database query

Yes

ENV.returnValue = {};

sqlVariable2

Values to use in the 2nd SQL database query

Yes

ENV.returnValue = {};

subChartType

Selection of Google Visualization charts

No

Blank

tableFileName

To non-Diff charts, the description is:

The name of the file where the table object instance is defined

When the chartType property is set to “Diff”, the description is:

The name of the file where the 1st table object instance is defined

 

No

When the dataSourceType is set to “Dynamic Table”, the default value is:

tables_dynamic.txt

When the dataSourceType is set to “Static Table”, the default value is:

tables_static.txt

tableFileName2

The name of the file where the 2nd table object instance is defined

No

When the dataSourceType is set to “Dynamic Table”, the default value is:

tables_dynamic.txt

When the dataSourceType is set to “Static Table”, the default value is:

tables_static.txt

tableName

To non-Diff charts, the description is:

The name of the query table

When the chartType property is set to “Diff”, the description is:

The name of the 1st query table

No

Blank

tableName2

The name of the 2nd query table

No

Blank

tableScript

To non-Diff charts, the description is:

The chart data population method via the Google-specified DataTable scripts; the corresponding data table constructed from scripts will serve as the data parameter to the draw() API of the Google Visualization Chart.

(To know more about DataTable scripts, please see the https://developers.google.com/chart/interactive/docs/datatables_dataviews#emptytable link.)

When the chartType property is set to “Diff”, the description is:

The chart data population method via the Google-specified DataTable scripts; the corresponding data table constructed from scripts will serve as the 1st data parameter to the computeDiff() API of the Google Visualization Chart.

Yes

Blank

tableScript2

The corresponding data table constructed from scripts will serve as the 2nd data parameter to the computeDiff() API of the Google Visualization Chart.

Yes

Blank

url

To non-Diff charts, the description is:

The URL of the datasource web service

When the chartType property is set to “Diff”, the description is:

The URL of the 1st datasource web service

No

Blank

url2

The URL of the 2nd datasource web service

No

Blank

version

Set to 'Modern' to use the Google Visualization charts; set to 'Classic' to use the chart prior to Axes version 3.1.1.

No

Modern

Notes, Comments and Warnings

To use this extension, you must be familiar with Google visualization charts.

Information about Google visualization charts can be found at: https://developers.google.com/chart/interactive/docs/

This extension provides access to the javascript required to invoke Google Visualization APIs.

chartType property

As of this current date, charts that are available from the Google developer website are the following:

annotation chart, area chart, bar chart, bubble chart, calendar chart, candlestick chart, column chart, combo chart, diff charts, donut chart, gantt chart, gauge chart, geo chart, histogram, interval, line chart, map, org chart, pie chart, sankey chart, scatter chart, stepped area chart, table chart, timeline, tree map, trendline, waterfall chart, word tree

All these charts are supported in the extension. Selection of chart can be made by setting the chartType property.

dataSourceType property

The 3 basic data sources from Axes are utilized in this extension, namely Static Table, Dynamic Table and XML file. (To review this Axes notes, please refer to the dataSourceType paragraph of the Extension_axDropDown.pdf document.)

Other data sources made available in this extension are: Fixed Array (Google Array Format), Fixed Table (Google DataTable Script) and Google Data Query.

Thus, all in all there are 6 data sources available in this extension.

The usage of the Static and Dynamic Tables are the same as that of the usage described in the document of the dropdown extension. Basically, a user of the Axes developer would depend on the table file, table name, SQL variable, and the table query definition defined either in Static Tables or Dynamic Tables found in the project files.

An example illustrating the usage for the Static Table is given in the following steps.

Administrators

Legal Mentions

aXes is brought to you by:

LANSA

Serving the IBM i community for 30 years.