Pentaho Tools :

Pentaho C-Tools(CDE,CDF,CDA),Pentaho CE & EE Server,OLAP-Cubes,Analysis using Pivot4J, Saiku Analytics, Saiku Reporting, Ad-hoc Reporting using Interactive Reporting Tool,Dashboards,Reports using PRD, PDD,Data Integration using Kettle ETL,Data Mining usign WEKA,Integration of Servers with Databases,Mobile/iPad compatible Dashboards using Bootstrap Css,Drilldown dashboards,Interactive Dashboards

Wednesday, 22 October 2014

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