Heat Grid chart basic example in Pentaho CDE - updatable post

Happy Diwali 2014 22nd Oct :-)

Here is a sample work out on Heat Grid Chart....

Version: 14.10.15 stable CDE,CDF,CDA,CGG
Query: A simple query which runs on postgreSQL

What is Heatgrid ? 
A heat-grid is a colored matrix that displays a two-dimensional data-set. The intensity or the color of each cell depends on the value that it represents.

Layout section :
Row->Column->Bootstrap Panel

Components section:
Charts ->CCC Heat Grid Chart

Data Source:
query :
select 'f1' as Category, CAST ('12110' AS INTEGER)  as Series1,CAST (0 AS INTEGER) as Series2,CAST ('6312' AS INTEGER) as Series3,CAST ('18' AS INTEGER) as Series4
UNION
select 'f2' as Category,CAST ('5430' AS INTEGER)  as Series1,CAST ('1019' AS INTEGER) as Series2,CAST ('9205' AS INTEGER) as Series3,CAST ('1512' AS INTEGER) as Series4
UNION
select 'f3' as Category,CAST ('312' AS INTEGER)  as Series1,CAST ('5000' AS INTEGER) as Series2,CAST ('15444' AS INTEGER) as Series3,CAST ('7215' AS INTEGER) as Series4
UNION
select 'f3' as Category,CAST ('1278' AS INTEGER)  as Series1,CAST ('2165' AS INTEGER) as Series2,CAST ('5264' AS INTEGER) as Series3,CAST ('1040' AS INTEGER) as Series4
UNION
select 'f3' as Category,CAST (0 AS INTEGER)  as Series1,CAST ('209' AS INTEGER) as Series2,CAST ('3694' AS INTEGER) as Series3,CAST ('1257' AS INTEGER) as Series4

Sample output of the query:

category    series1    series2    series3    series4
f2                 5430        1019         9205         1512
f3                 312          5000         15444       7215
f3                 1278        2165         5264         1040
f1                12110         0             6312         18
f3                 0               209          3694          1257


To make the chart click-able you need to write below code extracted from webdetails.pt site
i.e.,

 clickable:   true
 clickAction:

 function(scene){
        alert('series = "'   + scene.getSeries() +
            '", category = ' + scene.getCategory() +
            '", color = '    + scene.getColor());
    } 

colour will give you the value of cell in Heat grid matrix.  

Test with Max and Min colour OR give colour codes in colour properties :-)

Sample output

Example Download Link :  Click Me

Documentation of CCC Heatgrid
 
1) http://www.webdetails.pt/ctools/ccc/

2) http://www.webdetails.pt/ccc2/

3) http://redmine.webdetails.org/projects/5/wiki/FAQ_Main_Changes_New_Features_CCC_v2

4) http://infocenter.pentaho.com/help/index.jsp?topic=%2Fpuc_user_guide%2Fconcept_grids.html


What next ?
1) Drill down on Heatgrid chart ?(With in the same page)
2) Dynamic