Extension JS API arcapi functions

The extension JS module has access to an arcapi object. Cloudera Data Visualization supports the following functions fully:

Table 1. arcapi functions
Function	Description
`arcapi.addScripts()`	Adds script elements.
`arcapi.addStyles()`	Adds style elements.
`arcapi.chartId()`	Returns the id DOM element.
`arcapi.dataResult()`	Returns the data result object and gives access to the raw data for plotting the visual.
`arcapi.getParameters()`	Returns information on all current parameters.
`arcapi.getSetting()`	Returns the value of the specified setting.
`arcapi.sendParameters()`	Forwards parameter definitions to other visuals in the app.
`arcapi.settings()`	Returns information on all current settings.

arcapi.addScripts(filepaths, callback)

Adds script elements for the additional styles specified in the filepaths array. The function callback is invoked after load completes.

Syntax

arcapi.addScripts(
  filepaths, 
  callback);

Parameters

filepaths An array that specifies the additional JS files to load.
callback Call-back function that is invoked after the load is completed.

Examples

In program code, you can use this API in the following manner:

arcapi.addScripts(
  ['https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.0.1/highcharts.js'], 
  function() {
    console.log('highcharts.js has been loaded');
    }
  );

This code embeds the following <script> as the last element of the <head> tag in the HTML file:

<script 
  type="text/javascript" 
  src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.0.1/highcharts.js" 
  data-loaded="true">
</script>

arcapi.addStyles(filepaths, callback)

Adds style elements for the additional styles specified in the filepaths array. The function callback is invoked after load completes.

Syntax

arcapi.addStyles(
  filepaths, 
  callback);

Parameters

filepaths An array that specifies the additional CSS files to load.
callback Callback function that is invoked after the load is completed.

Examples

In program code, you can use this API in the following manner:

arcapi.addStyles(
  ['https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css'],
  function() {
    console.log('Twitter Bootstrap has been loaded');
    }
  );

This code embeds the following <link> as the last element of the <head> tag in the HTML file:

<link 
  type="text/css" 
  rel="stylesheet" 
  href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" 
  data-loaded="true"
>

arcapi.chartId()

Returns the id attribute of the DOM element used to draw the visual.

Syntax

arcapi.chartId();

Usage

$("#" + arcapi.chartId())

Returns

A jquery selector to the DOM element.

arcapi.dataResult()

Returns the dataResult object that gives the extension access to the raw data used to plot the visual. This object supports the arc.data.result interface.

Syntax

arcapi.dataResult();

This example shows the result of the arcapi.dataResult() call:

f (){return"arc.data.result"}

arcapi.getParameters()

Returns a hash object that contains key-value mappings for all current parameters. The key is the parameter name.

Syntax

arcapi.getParameters();

Example

The following is a typical result of the arcapi.getParameters() command:

{
  "productCategory": "Analytics", 
  "year": "2019", 
  "companies.data": "'Apple', 'Google', 'Arcadia'", 
  "companies.exclude": "in"
}

See Also

arcapi.sendParameters(params_hash)

arcapi.getSetting(settingName)

Returns the value of the specified setting of the current JS extension.

Syntax

arcapi.getSetting(settingName);

Parameters

settingName Name of setting.

Example

The following command retrieves the "Color" setting:

arcapi.getSetting("Color");

Our example's result follows:

"red"

See Also

arcapi.settings()

arcapi.sendParameters(params_hash)

Accepts a hash definition, and sends out the keys and values of the hash as parameters to other visuals in the app.

Syntax

arcapi.sendParameters(params_hash);

Parameters

params_hash Hash definition.

Example

To pass a parameter with name 'company' and value 'Cloudera' to all visuals and filters in the dashboard, issue the following command:

arcapi.sendParameters({"company": "'Cloudera'"});

See Also

arcapi.getParameters()

arcapi.settings()

Returns information on all current settings for the custom style: an array of objects, with id of a setting, and value of that setting.

The JS extension's settings() function specifies the order of the array.

Syntax

arcapi.settings();

Example

A typical example output after running the arcapi.settings() function looks similar to this:

 [
    {
      id: "Column Name",
      value: "",
    },
    {
      id: "Max bar width",
      defaultValue: "50",
      value: "50",
    },
    {
      id: "Color",
      defaultValue: "steelblue",
      value: "red",
    }
  ];