This documentation targets the API shipped with Pentaho 8.3. You can access the documentation regarding 8.2, 8.1, 8.0 and 7.1.

Also check What's new and changed in the Pentaho Platform JavaScript APIs.

Visualization API


The Visualization API provides a unified way to visualize data across the Pentaho suite (e.g. Analyzer, PDI, CDF). Essentially, it is a set of abstractions that enables safe, isolated operation between applications, visualizations and business logic, provided by third-parties. It is built on top of other Platform JavaScript APIs:

A set of stock visualizations is included, covering the most common chart types. Based on the CCC charting library, they’re customizable and extensible to fit your organization’s desired look and feel.

If you want to know more about the specifics of how Analyzer integrates with the Visualization API, read Analyzer and the Visualization API.

The following sections will guide you through the complete process of creating a custom visualization for the Pentaho platform, from developing it, deploying it to Pentaho products and to configuring it.

Creating a visualization

Creating a visualization boils down to creating:

The Create a Custom Visualization walk-through shows you how to develop each of these classes and how to create an OSGi artifact containing the visualization, so that it can be deployed to a Pentaho product.


If you prefer, you can skip the walk-through and get and build the final Pentaho Web Project. First make sure that you have git and npm installed.

# Clone the repository.
git clone
cd pentaho-engineering-samples
git checkout -b 8.3

# Go to the complete sample's directory.
cd Samples_for_Extending_Pentaho/javascript-apis/platform/visual-samples-bar-d3

# Install the dependencies.
npm install

# Package your files.
npm pack

Deploying the visualization

To deploy the visualization to a Pentaho product (Pentaho Server or PDI), copy the tgz file you just built into its system/karaf/deploy folder. See OSGi Artifacts Deployment if you need more information.

If everything went well, you should now see your visualization being offered in Analyzer and PDI, as well as be able to use it in a CDE dashboard:

  1. Your Bar/D3 visualization in Analyzer, showing off the menu and placeholder icon:

    Bar/D3 in Analyzer - Menu and Placeholder

  2. Your Bar/D3 visualization in Analyzer, rendering:

    Bar/D3 in Analyzer

  3. Your Bar/D3 visualization in PDI, showing off the menu and placeholder icon:

    Bar/D3 in PDI - Menu and Placeholder

  4. Your Bar/D3 visualization in PDI, rendering:

    Bar/D3 in PDI

  5. Your Bar/D3 visualization in CDE:

    You can get the following dashboard from pentaho/pentaho-engineering-samples.

    Bar/D3 in CDE

Configuring the visualization

A visualization can be configured by third-parties using configuration rules in external configuration files. These configurations are merged with any default configuration that is included with the visualization.

See Configuring a Visualization for more details.