bipp extensions enable you to design custom visualizations for your data and view them as the Custom chart type. Extensions are created as plug-in JavaScript files using the bipp Extensions API.

Managing Extensions

Extensions are uploaded and managed from the Extensions options on the Main menu.


Adding an Extension

  1. Open Extensions from the Main menu.

  2. Click New Extension.


  3. Enter the Extension Name.

  4. Select your javascript Extension File or enter an Extension URL to the file. bipp does not validate the file.

  5. Click Create.

Once the extension is created, it is accessible for the Custom chart type:

  1. Select the Custom Chart Custom type.

  2. Click Settings Settings

  3. Select your extension from the list.

    Custom Extension

Editing or Deleting an Extension

  1. Open Extensions from the Main menu.

  2. Select the Options for the Extension.


Edit opens the Extension details. You can change the name or select a new file. Click Update when complete.

Delete opens a Delete Extension prompt. Click Delete to continue.

Extension API

The extension plug-in is a single JavaScript file that can render content in the DOM of iframe sandboxes. Every plug-in should be able to load the visualization as well as the settings pane with respect to the visualization.

The following functions or event handlers should be defined in the plug-in and called when the bipp engine sends data to the plug-in.


The onLoad function is called on load of the both the settings pane and the visualization.

Settings pane The signature is:

BIPP.onLoad = function({ role, settings, columns }) {
    settings pane load

Visualization The signature includes the data:

BIPP.onLoad = function({ role, settings, columns, data }) {
    visualization load

The role parameter is set to the value settings when the settings pane is loaded and visualization when the visualization is loaded. The settings parameter is an object which can be serialized to JSON and can contain the settings to be included with options available for selection. The columns parameter is an array of column objects with column level properties like type, label, or table to help access information about the columns selected by the user. The data object contains the actual data to be visualized in row-column format.


The onUpdate event handler is called for the settings pane whenever the schema changes, or for the visualization pane when either the data or schema changes.

Settings pane The signature is:

BIPP.onUpdate = function({ columns }) {
    The table schema changed

Visualization The signature includes the data:

BIPP.onUpdate = function({ columns, data }) {
    The data changed, possibly also the columns (for a table with a pivot)


The onMessage function contains the code to be executed when a message is received from the bipp engine. This is applicable to visualizations, not Settings. The signature of the function is as follows.

Visualization signature:

BIPP.onMessage = function({ channel, column, value, action }) {
     message was sent to the visualization


Messages can also be sent to the bipp engine using the postMessage function.

BIPP.postMessage(channel, value)

The channel is a string indicating the message and value is the object containing the message data. This is used to send the settings object:

BIPP.postMessage('settings', settings);