Protovis Sunburst Chart Example in pentaho CDE -- A thanks blogpost to the CCC Master - Leao

Hi Guys,

This post will talk about the power of CCC charts(formally protovis charts) in pentaho CDE . I'd like to say thanks to the CCC- Master Leao on the tricky of converting CCC-TreeMap chart to Sunburst  Chart .

Yes, I believe a requirement makes us go in depth of subject though it'll take time. Here in this post I'd like to share what I have explored with the help of Leao.

You will learn below stuff :
1. What is Sunburst chart ? When it'll useful to visualize the data ?
2. What is the result set format of data to visualize ?
3. Code to Convert the CCC-TreeMap chart to CCC- Sunburst chart.
4. How to make the chart dynamic with input control / Keeping the chart in bootstrap panel /Pulling the input control right on the panel header and etc.

1. What is Sunburst chart ? When it'll useful to visualize the data ?(Collected points over net)

• Sunburst chart is a nice way of presenting relational data sets together in a compact form. 
• This chart type is very strong in summarizing data and it looks pretty. 
• Sunburst chart is basically a stacked pie chart. 
• It is created by stacking necessary amount of pie charts on top of each other

2. What is the result set format of data to visualize ?
For instance your data is of 2 or more of categories(2 or more string alike fields/columns) grouped by and 1 is of measure field (the value column).
Sample Result set looks like :
field1   field2 value
A         x         10
A         y         33
A         z         87
B         p        15
B         q        98
C         m       33
C         n        92
C         o        23

3. Code to Convert the CCC-TreeMap chart to CCC- Sunburst chart.

• As of C-Tools(CDE,CDF,CDA) release of 14.06.18 release , there is NO direct CCC- Sunburst component available. 
• Either you have to write protovis code in Protovis component under charts and implement OR go with D3 charts again with code implementation. 
• You just have to take TreeMap Component from Charts section and set height ,width,htmlObject, datasource for TreeMap Componet and then in the PreExecution section write below code. 

function()  {
    this.cccType = pvc.SunburstChart;
    // Set any sunburst specific properties not available as same-named Treemap CDE properties here.
    // this.chartDefinition. ...
}

4. How to make the chart dynamic with input control / Keeping the chart in bootstrap panel /Pulling the input control right on the panel header and etc ?

• This is as simple as we can do for other charts - i..e, create a parameter, give place holder for select component which takes the created parameter and make the chart in components and datasource query to listen the parameter  and add it as parameter to chart component and for query

Panel Code - Bootstrap HTML code. (Row-Column-HTML component and write below code)

<div class="col-sm-6">
<div class="panel panel-success">
  <div class="panel-heading">
  <!--  <h3 class="panel-title">SunBrust Chart Example in Pentaho CDE</h3> -->
    <h3 class="panel-title">SunBrust Chart Example in Penthao CDE<span class="pull-right" id="select1"></span></h3>
  </div>
  <div class="panel-body" id="Panel1">
    Panel content
  </div>
</div>
</div> 
id=select1 is the place holder for input select which is pulled right on the panel title using pull-right property.

This is the way how you can represent the data on Sunburst chart.

Example : 
1) Software Ready : Pentaho Bootsrap supported version of C-Tools.
2) Browsers : Mozilla or Chrome preferable.
3) Database : foodmart database of postgresSQL.
4) Download Here : Click me to download the example 
5) Deployment in your environment: Download the zip file from step 4 and upload it from Pentaho PUC upload option.
6) Change the database settings according your setup if any.
7) Run the example - Open in new window.

Sample output Images : 
  Desktop Views with Click Action :

Image 1:

 

Image 2: 

  

Image-3:

Image-4:

References :

1. http://forums.pentaho.com/showthread.php?165967-Click-Action-on-CCC-pie-charts&p=379848#post379848

2. http://getbootstrap.com/components/#panels

Thank you for reading this document. Readers/Developers are encouraged to add your points/comments to improve this example in comment box.

Let's the community be on top of BI technologies :-) :-)

Sadakar
BI developer.