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.
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>
<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.
<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.
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)
with this the custom visualization will be visible in available components in the CDE.
To test simply execute your dashboard example with: