Dual Level Pie Chart in Pentaho CDE - Example Explained

Hi Guys,

This post will tech you how to create Dual level pie chart.

Example developed Environment :

1) C-Tools of 14.07.29 version on 5.1.0 Server.
2) Foodmart database of Postgresql(A jasper server example database).

Step 1 : LayOut section

1) Row ->Column("Col1" is the htmlObject-> Bootstrap Panel
2)
Bootstrap Panel:
Name : Panel2, Corners: Simple & Panel Style : Primary
Panel Header :
Name: Panel2_Header, Corners: Simple & Text Align: Center
Add html : HTML: <b>Dual Level Pie Chart Example in Pentaho CDE</b> , Font size: 18
Panel Footer : Remove it.

Step 2 : Data sources section
1) Give all the properties
Name : query2
Driver : org.postgresql.Driver
UserName/Password: postgres/postgres
URL : jdbc:postgresql://localhost:5432/foodmart
Query :
SELECT
        distinct
                gender,
                member_card AS card,
                sum(total_children) AS TotalChildern,
                sum(num_children_at_home) AS childernathome
FROm customer
group by gender,member_card
order by gender,member_card

Query Sample Output:
gender    card    totalchildern    childernathome
F    Bronze    6626        1278
F    Golden    2012        1529
F    Normal    3025        1048
F    Silver    1196        377
M    Bronze    6570        1288
M    Golden    2029        1511
M    Normal    3062        945
M    Silver    1210        399

3) Components Section
1) From Charts ->Select Pie Chart
2) Give all the required properties
Few of the major properties are:
Name : DualPieChart2
Title: Total Children Vs Children At Home
Datasource : query2
Colors : #5F9EA0,#6495ED,#006400,#483D8B
Html Object : Panel2_Body
PreExecution:

function f() {
    $.extend(this.chartDefinition, {
       
     // Data source
    crosstabMode: false,
    readers: ['gender, card, childernathome, TotalChildern'],

    // Data
    dimensions: {
        // Dimension bound to "dataPart" is hidden by default
        gender: {isHidden: false},
        // Sort brands
        card:  {comparer: def.ascending},
        // Notice the currency sign and the /1000 scale factor (the comma beside the dot).
        //sales:  {valueType: Number, format: "¤#,0,.0K"}
    },

    // Visual Roles
    visualRoles: {
        // Chart
        dataPart: 'gender',

        // Main pLot
        value:    'TotalChildern',
        category: 'card'
    },

    // Plots
    plots: [
        {
            // Main plot (outer)
            name: 'main',
            dataPart: 'F',
            valuesLabelStyle: 'inside',
            valuesOptimizeLegibility: true,
            slice_innerRadiusEx: '60%',
            slice_strokeStyle:   'white'
        },
        {
            // Second plot (inner)
            name: 'inner',
            type: 'pie',
            dataPart: 'M',
            valuesLabelStyle: 'inside',
            valuesOptimizeLegibility: true,
            slice_strokeStyle: 'white',
            slice_outerRadius: function() {
                return 0.5 * this.delegate(); // 50%
            }
        }    
         
         
        ]
    });
}
Save your dashobard and preview it in New Window.

Core Part :
Explained at this thread in forum :
http://forums.pentaho.com/showthread.php?167447-CCC-Charts-Outer-Ring-to-donut-pie-%28Inner-ring-to-donut-pie%29

NOTES :
1) For Dual level pie chart your query result set should be categorised as shown in sample result set.
2) In the PreExecution code, in plots sections you are dividing it to two plots.
3) In the same way, we can also implement tri level pie charts, double dual level pie charts by dividing the plots(Better option
is going with Sunbrust chart in this case).


Reference :
http://www.webdetails.pt/ctools/ccc.html


Why to wait ??? Download Example here : Click Me (Note that to run all my blog examples you should have foodmart database running on postgresql server).




Sample output 1:

Sample output 2:  

Mobile Output Sample :

:-) For demo's on free open source CDE dashboards contact me at my mail ID:-)