Integrate 3rd party charts with Pentaho CDE

tenthplanet blog pentaho Integrate 3rd party charts with Pentaho CDE

How to Integrate 3rd party charts in Pentaho CTools dashboard

Rickshaw is a open source time series javascript, which is used to create interactive time series charts with huge data volume since it deals with microseconds data.

Rickshaw chart is derived from d3 js so all graphs in rickshaw are drawn with standard SVG and styled with CSS, so we can customize it with all our javascript techniques.

Rickshaw is a Open source and is available for free. These charts can be powered by static historical data sets, or living data that continuously updates in real time.

It’s a simple framework for drawing time series charts with ‘n’ number of advantages which cannot be achieved in our charts.
And one of the most important advantage is that it can be easily integrated with our Pentaho bi-server.

Consider the case where we need to integrate Rickshaw charts with our Pentaho CDE. Here are the steps that we need to follow,

1) First step is to identify the suitable chart based on our requirement

2) Once the chart is finalized, download the source code of that particular chart (Either by viewing the source code by right click or by downloading it from internet)

3) Make sure the downloaded source code doesn’t point to any web links in order to avoid dependency in future

4) Download all the necessary supportive plugins for that chart and have that physical file pointing to your local resources

5) Call all the necessary supportive plugins in your respective dashboard

6) Clean the source code with hard coded values and make it dynamic using javascript

7) For rickshaw chart the x-axis should be in unix timestamp format (Similarly learn the basic necessity for any chart that you are going to integrate)

8) Use Pentaho CTools Query Component for integrating third party charts with your dashboard

9) Paste the source code in post fetch of your Query Component and connect it to respective data source and HTML Object

10) Then any further chart customization can be done reading that particular chart manual and adding additional javascript based on our requirements