Google Charts
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.
