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

Friday, 4 July 2014

Installation of Pentaho WEKA(Data Mining Tool) in Cents OS 32 bit OS or Linux like Operating systesms.

Hi Guys,

Follow below steps to download and install WEKA software for predictive analytic s OR Data Mining.

Here we go with installation and in upcoming posts will move onto basics to start with WEKA. 

1) WEKA official Website :

  http://www.cs.waikato.ac.nz/ml/weka/downloading.html
 
2) Download WEKA :

http://www.cs.waikato.ac.nz/ml/weka/downloading.html

For linux like OS's go to below text on page

Other platforms (Linux, etc.)
Click here to download a zip archive containing Weka
(weka-3-6-11.zip; 24.2 MB)


3) Extract the zip file --> then it'll come as folder named as weka-3-6-11

4) Open the folder in Terminal and issue below command.

  java -Xmx1000M -jar weka.jar

5)  The WEKA HOME is here ...








NOTE :
Note that Java needs to be installed on your system for this to work. Also note, that using -jar will override your current CLASSPATH variable and only use the weka.jar.

For other installation types in other OS's visit the official website.(Click here)


Thank you..

(Just started WEKA after having 2+ years of working exp on Open source technologies ..)



Thursday, 3 July 2014

Tip:Base Axis Extension points in Pentaho CDE and other useful extension points collection from various sources


Hi Guys, 
 
The below extension points will make you X-axis labels font size, font style, thinkness, alignment & angled.  

Resources :
 
1) http://redmine.webdetails.org/projects/5/wiki/FAQ_Main_Changes_New_Features_CCC_v2
2) http://forums.pentaho.com/showthread.php?165604-X-Axis-Lables-distance-from-Axis
 
 
extensionPoints:
 {
    baseAxisLabel_textAngle: -1.6,
    baseAxisLabel_textBaseline: 'middle',
    baseAxisLabel_textAlign: 'right', 
    baseAxisFont = "bold 13px sans-serif";
     
 
baseAxisFont: "12px sans-serif"
orthoAxisFont: "12px sans-serif" 
 
extensionPoints: 
 
["xAxisLabel_font","14px Serif"],
["xAxisLabel_textStyle","#b09a54"],
["yAxisRule_strokeStyle","rgba(0,0,0,0)"],
["yAxisLabel_font","14px Serif"],
["yAxisLabel_textStyle","#b09a54"],
["yAxisTick_strokeStyle","rgba(0,0,0,0)"],
["yAxisTicks_strokeStyle","rgba(0,0,0,0)"],
["bar_fillStyle",function(d){ return this.parent.index+1984 == anoParam?"#004767":"#b09954"}]], 
 
 
extensionPoints: 
 
"bar_fillStyle",function(d){ return 
dashboardland.getColorForValue(render_bestsellerChart.chart.dataEngine.getVisibleCategories()
[this.parent.index]) }]
 
["barLabel_textStyle","#FFFFFF"],
["barLabel_font","16px sans-serif"],
["barLabel_text",function(d){return Math.round(parseInt(d)/1000000) + "M"}],
["barLabel_top",function(d) { return this.target.height()/3}]]
 
 
1. Remove x , y axis ... remove border

 * By default when you create a chart you will get X-axis and Y-axis so you need not explicitly add X-axis and Y-axis. 
 * Removing X-axis : 
      Add below Extension Points : 
  xAxisRule_strokeStyle ='#e9f1f4';
  xAxisTicks_strokeStyle = '#e9f1f4';
  xAxisEndLine_strokeStyle='#ccd8dd';
 * Removing Y-axis : Set below property to the chart component. 
  Ortho Axis Visible = False
 * To remove the border of the chart set below property to the chart component
  plot2FrameVisible=False

2. Print values vertically on X-axis
 * Add below Extension points : 
  baseAxisLabel_textAngle=1.6
  baseAxisLabel_textBaseline='middle'
  baseAxisLabel_textAlign='right'

3. how to remove ticks of Axis ?

  * Removing ticks can be achivable by setting below property 
               baseAxisTicks= False

4. what is ortho axis , orthoaxis 2 ?

     Ortho Axis is nothing but Y axis.
     Orthoaxis 2 is nothing but 2nd Y axis . i.e., you can treat it as a y axis right of the chart when you develop a mixed chart 
     (i.e., mixed chart = a bar chart + a line chart).


extensionPoints: 
[["xAxisRule_strokeStyle","#e9f1f4"],
["yAxisRule_strokeStyle","#e9f1f4"],
["xAxisTicks_strokeStyle","#e9f1f4"],
["yAxisTicks_strokeStyle","#e9f1f4"],
["xAxisGrid_strokeStyle","#e9f1f4"],
["yAxisGrid_strokeStyle","#e9f1f4"],
["xAxisEndLine_strokeStyle","#ccd8dd"],
["yAxisEndLine_strokeStyle","#ccd8dd"],
["line_lineWidth","3"],
["dot_fillStyle","#FFFFFF"]],
 
Hide X-Axis lebels in a CCC line chart 
preExecution
 
function() {
    this.chartDefinition.yAxisLabel_visible = false;
} 
 
 

Inserting Responsive images on CDE dashboards – which way do you like ? Inserting through HTML option OR Images options ?

Hi Guys,

This post will talk about inserting images to the CDE dashboard .. It's just not only talk about inserting images but also talk about Responsiveness of the images which should fit in Mobile devices.

Now, it's a Mobile world...... Oooppss...!!! I don't have a one yet... Oh..!!! No, I have desktop/laptop browsers :-) Thank god...

What you will learn in this post are..........

1) Where to take the images in folder structure of your project ?
2) How to generate URL for the images ?
3) What are the different ways to insert images on CDE dashboard ?
4) How to make images Responsive using Bootstrap CSS ?

Software Ready:
C-Tools of Trunk Version : (after 14.06.18)
Pentaho 5.0.1 stable or 5.1.0 evaluation Community.
Mozilla/Chrome browsers...

Step 1: Folder Structure to keep your images for a project.
a) Let's assume you are creating a project Under “Public” folder.
b) Create a folder to keep all of your images in your project..
   For example:
Public/Explore/CDEExploring/UploadingImage/Images

Images is the folder to keep all your images to take on CDE dashboards.

c) Just hold the mouse on Images folder(high light it) and then click on Upload from Folder Action Panel.
d) Refresh the browser and check the image files, in “Files” panel of “Images” folder.
For instace : fifaImage1.jpg is the file uploaded
c) Currently, the upload is accepting .jpg and .png image files but not .jpeg. (Not tested with other image extensions).

Step 2: Check whether the images are available properly or not..
a) Go click on the image file from Files section then click on “Open in New Window” from Folder Action section.
b) You should be able to see the image in a new window.(It looks as it is as the original image).
c) You can find the URL generated for the image ..
For example : The URL for particular image looks like below sample.

http://localhost:8085/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage.png/content

(my pentaho port is 8085 but the actual port is 8080 for new readers).

Steps3 : Ways of inserting the images on CDE dashboard.
There are 3 ways(as per my knowledge) to insert the images on CDE dashoboard.
They are
a) Using HTML code and locate the file.
b) Using image property available in pentaho CDE.
c) Using CSS

I'll be discussing first 2 methods.. I had already discussed inserting images using HTML code in one of my posts....Ah..!!!!  that's well but here is the matured stuff with images on CDE dashboards which will be responsive....


a) Using HTML code

Layout section (Do you think for a sample of image on the dashbaoad Datasource & Components are required to discuss ? )
1) Design Row -> Column -> html
2) Open the html editor and write below code.
  
Description :
You are going to take a panel & in the body you will be inserting the images.
Using scr attribute of img tag you will be inserting image as a normal image tag of HTML code.
Remember you need to provide the generated URL (which has already discussed in step 2) for scr..
i.e.,

src="/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage.png/content”
You can also give the full path.... i.e.,

src=”http://localhost:8085/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage2.png/content”
CODE
<div class="col-md-12">
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Responsive Images Demonstration in Pentaho CDE & Tutorial on how to insert Images using Image Option OR HTML </h3>
  </div>
  <div class="panel-body">
   
    <a>
  <img src="/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fiaImage2.png/content"></img>
    </a>
   
    <a>
    <img src="/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage.png/content"></img>
    </a>
   
    <a>
    <img src="/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage3.jpg/content"></img>
    </a>
   
  </div>
</div>
</div>

b) Using image property available in pentaho CDE.

Row->Column->Image (select column – observe Layout structure icons – find Image icon and click it).

Here is also, the URL's is the role..


src="/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage.png/content”

(relative path).
(OR)

src=”http://localhost:8085/pentaho/api/repos/:public:Explore:CDEExploring:Developement:UploadingImage:Images:fifaImage.png/content”

(absolute path -full path)


Quick step Image:

Step 4: How to make this images Responsive .. Mobile supported Images for CDE Dashboard

You need to write a css snippet for the images..
Add resources from Layout structure icons .. Take a Code snippet of CSS and name it..

Write below css code.

img {
  display: inline-block;
  height: 200px;
  max-width: 100%;
}

Sample Mobile output Images :
 
Desktop output sample: 

NOTE:
When you add  images directly to the columns using Images option of CDE, you will be having full utilization of columns size.
When you add images using  HTML for columns there is slight left and right margins available ..

Preferable way for Mobile Dashboards is : Inserting images using HTML where you can have the full control of it .

Download the Example here :  Click Me...:-)
(Download from here and upload to your BA Server)


References :
1) http://pentaho-bi-suite.blogspot.in/2013/08/inserting-images-for-reports-in-pentaho.html
2) http://forums.pentaho.com/showthread.php?137993-How-to-insert-an-image-in-a-CDE-dashboard
3)  http://forums.pentaho.com/showthread.php?94022-css-and-Images-location
4)  http://forums.pentaho.com/showthread.php?165490-Need-help-with-dashboard-drill-down-url



Sadakar
BI developer

Contact me if you have a requirement on real time dashboards... :-) 










Wednesday, 2 July 2014

Mobile Dashboard : Sales Dashboard 4 demonstration : Tabular inforamatic Dashboard in pentaho CDE ..


This article is for decision makers & to the community BI developers.

All the time you may not deal with charts rather deal with data directly to decision making.
Here I have developed a sample dashboard using table components.

Decision Maker Benefits :
1) Mobile supported
2) Desktop/laptop supported
3) Hyper linked buttons for  to navigate to child dashboards.


For community Developers:
1) How to give hyperlinked buttons for child dashboards
2) Other features like horizontal/vertical scroll bars, table tooltop of hidden column, charts in columns, add-ins implementation was already discussed in my previous articles.

You can refer the below
1) Hidden Column Tool tip : 
http://pentaho-bi-suite.blogspot.in/2014/04/table-component-tooltip-in-pentaho-cde.html

2) Conditional coloring & other add-ins on table component.
http://pentaho-bi-suite.blogspot.in/2014/06/conditional-coloring-of-cell-values-in.html


This write up will just give you the images of dashboard. The functionalists on the dashboard were already discussed in my previous articles.

Features of the 

Mobile View: Parent Dashobard

 Desktop View : Parent Dashboard:


Download the Example : Click Me

Thank you.

Meet me for minimum cost real time Mobile/Desktop dashboards using Pentaho CDE....

:-)
:-):-)
:-) 

Columns Grand total in Table component of Pentaho CDE

Hi Guys,

Table component has no direct feature of adding column totals as of this post written date(July 2nd 2013)....

Here is the pentaho community & data tables shared java script  to find the Summation of columns in Table component.

Write below code in Draw Function of Table Component.

function f() {
    var grandTotalRow = "<tfoot><tr><td>Total</td>";
 
  for(i=1;i<4;i++) {
        var total=0;
         var rows = $('#' + this.htmlObject + ' tbody tr');
         
          rows.each(function() {
            var cellVal = parseFloat($('td:eq('+i+')', this).text().replace(',',''));
           
          if(!isNaN(cellVal)){
              total+=cellVal;
          }
           
           });
        grandTotalRow += "<td>"+total.toFixed(2);+"</td>";
        }
          grandTotalRow += "</tr></tfoot>";
          if($('#'+this.htmlObject+' tfoot').length===0)
        $('#'+this.htmlObject).find('table').append(grandTotalRow);

    }



Sample output:

References :

https://www.datatables.net/forums/discussion/17132/summary-footer-row

http://forums.pentaho.com/showthread.php?94187-Table-Component-Grand-total

Example :
https://metrics.mozilla.com/data/content/pentaho-cdf-dd/Render?solution=metrics2&path=%2FgetInvolved&file=getInvolved.wcdf

Tip : Horizontal and Vertical Scroll bar for table component when there are more rows and/or columns to show in Pentaho CDE

Hi Guys,

I'd like to share what I have worked on today(2nd July 2014) on table component in pentaho CDE that this will be very useful for other community folks...

Thank you pentaho forum to letting know horizontal scroll bar for table component if there are more number of columns to show on dashboard.

CSS Syntax:
.<YourHTMLObject>
{
overflow:auto;
}
Example:
    <div class="col-md-6">
               <div class="panel panel-primary">
                  <div class="panel-heading">
                    <h3 class="panel-title">Horizontal And Vertical Demo</h3>
                  </div>
                  <div class="panel-body" id="Panel1">
                         Panel content
                  </div>
              </div>
</div>
 

.panel-body{
   height:400px;
   overflow:auto;
}


Providing height in pixels will give you the vertical scroll bar. 

Benefit of the Tip : If you are developing Mobile dashboards using Bootstrap CSS this tip will be very useful.
Sample output image:
Desktop View:

Mobile View:
Browser is resized like Mobile... Should work in Mobile too..

NOTE:
Table component is placed inside panel-body. i.e, class name(panel-body) is the htmlObject for table component and where ever you write panel-body in HTML pages and where ever you use table component the horizontal scroll bar will come if the table component have more number of columns to show.

NOTE: for class css use .(dot), for id css use #(ash symbol)
Reference:
http://forums.pentaho.com/showthread.php?140282-Table-Component-SubColumns



Hyperlink for Table columns in pentaho CDE

 Hi Guys,

This post will talk about hyperlink on the columns in table component.

Aim of the concept : Provide Hyperlink for the column values and drill down to next dashboard on clicking the column field(string like field or any other).


Software Ready: C-Tools of 14.06.18 version, foodmart database of postgresql,chrome or mozilla browser.

Core part is : 
 Assuming that you have preliminary knowledge on sample table creation, I'm just presenting the tip here.

Sample Image :

As shown in image as quick as possible you click on Full Name column values , you have to get the detailed dashboard of that particular person. This can be achievable using below concept.

1) Develop your second dashboard separately with all the necessary functionality on it with input controls.
2) Open the dashboard in New window. capture the URL from address bar.
3)Go to your first dashboard , in Edit mode ->Open the table component ->In the click action you have to write below code.

function testClick(e) {
var id = e.tableData[e.rowIdx][0];
window.location = '/pentaho/api/repos/:public:Dashboards%20Demos:May21stBackUp:Dashboards%20Demos:SalesDashboard4_TabularDashboard:Dashboard2TableCustomizationConditionalColoringDemo.wcdf/generatedContent';
}

4) For showing hyperlink(blue colored text with underline), go to the column type properties and give there type as hyperlink for your first column(or in your requirement preferred column).
5) Give the indexes for the columns in your query Data source area.

6) Now, it'll show as shown in figure and as soon as you perform click on "Full Name" field values it'll take you the detailed dashboard.

Passing the field value as parameter to child dashobard when performing click action.
Get the field value in a parameter (Browse drilldown from 1 dashboard to another dashboard in archives of my posts- There I've explained how to capture the field value into a parameter).. Hmmm.. Click here

Take an alert function to test to confirm the value is picked into a parameter.

Add this parameter to the URL in the above code..

i.e.,
Sample code :
 function testClick(e) {
var id = e.tableData[e.rowIdx][0];
window.location = '/pentaho/content/pentaho-cdf-dd/Render?solution=XXX&path=XXX&file=XXX.wcdf&ParameterFullName=' +id;
}


This is the work done I had done in one of my requirements.. Hope this will helpful to some one in the community.


This you can implement for which ever column you want .. Just replace the index in 2nd line of code..



Reference : 
http://forums.pentaho.com/showthread.php?157344-How-to-make-URL-for-records-in-CDE-table-component&p=379905#post379905