D3 Custom Visualization Plugin in Pentaho

Pentaho provides the ability to extend the list of available built-in Visualization components in CDE by adding the custom d3 visualization component. One can implement his own chart using the d3 library in Pentaho.

Step-by-step to create a custom visualization component –

1. Install d3 component library: D3 Component Library can be installed from the Pentaho Marketplace.

2. Create dashboard for the your visualization: Each component made using d3 library needs a dashboard which includes .cdfde and .wcdf. Dashboards for all the other components can be located in the directory Pentaho5_0_1\biserver-ce\pentaho-solutions\system\d3ComponentLibrary\dashboards. Pick any one of the available dashboards, paste it in the same directory with the name you want to give to your custom Visualization. Currently you need to manually copy the source files (.wcdf and .cdfde) as CDE does not allow to simply do a ‘save as’ to the above mentioned directory.

Open the files in Edit mode and do the required changes. This is where you supply the ‘documentation’ and ‘example’ for your visualization.

3. Create the directory for the CDE component: Once done with the dashboards, You need to provide the implementation of the new Visualization. Go the directory d3ComponentLibrary\resources\components. Code for the visualizations is placed in this directory. Create a directory/folder here with the name of the visualization.

It mainly contains the ‘component.xml’ and the javascript source for implementing the visualization. However, it may also contain all other dependencies like CSS and required javascript files for your visualization.

a) component.xml: Every component needs to have a component.xml that acts as a descriptor for CDE to know how to use it. It comprises of –

Header – It contains component basic information like includes name, category and descriptions of the component.  There are certain tags –

<Name>Name of the component displayed in the component pane in CDE
</Name> : Example­ <Name>Custom Visualization</Name>

<IName>Name used in the javascript implementation</IName> : This value should be a unique value (not used by any other visualization).
Example­ <IName>customVisualization</IName>

<Description>Description of the component</Description>: Description of the object when you hover over any component in the component pane.
Example­ <Description>Custom Visualization First</ Description>

<Category>Name of the category to which this component belongs</Category>: If any category with such name doesn’t exists, then it will be created in the CDE component pane. It is used to group many related visualizations under same node.
Example­ <Category>customD3Components</Category>

<CatDescription>Description Name of the category which is displayed in CDE</CatDescription>: Visible name of the category in the CDE user console.
Example­ <CatDescription>My D3 Components</CatDescription>

Contents/Model – The specific options/ properties of the components. The <Property>description of property</Property> makes it visible as the properties for that component in the CDE.

Implementation – It points to the code for the new visualization. It contains ‘<Code>’ tag that points to the javascript implementation of the visualization. The required css files are mentioned in the ‘<Style>’ tag. ‘<Dependencies>’ list all the other javascripts required by the visualization.

b) Javascript implementation of visualization(.js): This is a standard CDF component that extends D3ComponentBase. This file name is mentioned as the ‘src‘ in the ‘code‘ tag inside ‘implementation‘ in ‘component.xml’. Note that the name of the component always starts with an uppercase letter and the variable name is the same as specified in the Header/IName node in component.xml appended with “Component“.

Example­ ‘CustomVisualizationComponent’

You’ll mostly need to implement the ‘render‘ function in this implementation and create your own visualization using the d3 library. Data that comes from Pentaho is received as a parameter in this ‘render’ function.

Then try to refresh the ‘d3library’ with the following url:

followed by refreshing the CDE (to reflect the new visualization in the components list of CDE)­cdf­dd/api/renderer/refresh

with this the custom visualization will be visible in available components in the CDE.

To test simply execute your dashboard example with:


Reference –

Leave a Reply

Your email address will not be published. Required fields are marked *

1 × = three

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>