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
Overview
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:
-
The Data API ensures seamless integration with data sources in the Pentaho platform, as well as with other client-side component frameworks.
-
The Type API provides to visualizations out-of-the-box features such as class inheritance, metadata support,
validation and serialization. -
The Core APIs provide to visualizations features such as localization, theming and services registration and consumption.
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:
-
One
Model
class — which identifies the visualization and defines it in terms of its data requirements, such as the visual degrees of freedom it has (e.g. X position, color and size) and any major options that affect its rendering, — and -
One
IView
class — which implements the actual rendering using chosen technologies (e.g. HTML, SVG, D3) and handles user interaction, by dispatching actions (e.g. selection, drilling-down, showing a tooltip).
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.
Fast-lane
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 https://github.com/pentaho/pentaho-engineering-samples
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:
-
Your Bar/D3 visualization in Analyzer, showing off the menu and placeholder icon:
-
Your Bar/D3 visualization in Analyzer, rendering:
-
Your Bar/D3 visualization in PDI, showing off the menu and placeholder icon:
-
Your Bar/D3 visualization in PDI, rendering:
-
Your Bar/D3 visualization in CDE:
You can get the following dashboard from pentaho/pentaho-engineering-samples.
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.