Dashboard Example in pentaho CDE with bootstrap css - The beginners guide

Hi Guys,
Recently, I was developing a dashboard in Jasper Server 5.5 Pro and was testing the dashboard in smaller devices like iPad and found there was NO good fit of dashboard with in the smaller browsers in smaller devices especially with iPad. Of course when you see the preview of the dashboard in bigger screens TV like monitors.

Of course , there was a property called "Proportionate" in Jasper which was buggish and not worked.

Alternatively, found the bootstrap css working with all kind of devices for dashboards developed in pentaho and here is a trail in Pentaho.

Example :
Before learning about Bootstrap, you need to know on which frame work CDE dashboard lay outs were developed ? It was Blueprint CSS

What is Blueprint CSS ?
 Reference : Click here
 Examples : http://honeycuttlee.com/blueprint/

Why you go for Bootstrap ?
As explained above(start of this article) irrespective of your final device, you can render your dashboards/reports in browsers nicely with the relative width of browser.

What is Bootstrap ?
Reference : Click here

How to get Bootstrap in Pentaho CDE ?
As per this post written date(9th April 14) the latest CDE build is 14.03.07. If you install this/lesser version you will not able to get the Bootstrap functionality(Bootstrap option for Dashobard type in Settings of the dashboard) in your CDE.


You must install all the 3 C-Tools(CDE,CDF,CDA) of TRUNK Versions & you must restart the be-server.

You can find bootstrap installed in below location

G:\Pentaho\biserver-ce-4.8.0-stable\biserver-ce\pentaho-solutions\system\pentaho-cdf\js\bootstrap  
NOTE
The maximum number of columns of CDE dashboard are 24 columns if we use Blueprint css whereas 12 columns for Bootstrap CSS.

i.e., For example, If your layout consists of 3 charts in 3 columns of 1 row then each of the column size would be 4.
i.e, 12/3 ( In general  12/number of columns per a row)

Example :
Environment :
Pentaho 4.8 or 5.0.1 stable, C-Tools of trunk verison, Postgresql foodmart database.


Developing a dashboard of 3 panels in a rows.

Step 1 : Defining Dashboard Settings
1. Open a new CDE dashboard and click on settings. Give the name and select Dashboard type as "bootstrap".

A sample Dashboard Developed using Bootstrap Css.

High lights of the dashboard :
1) Bootstrap panels
2) Relatively adjustment of the charts and other components when preview in different devices like laptop, desktop, ipad, mobile phone(not tested yet but should work).
3) Date Range selector Component is used(Browse my posts for separate example for "Date Range" component.
4) Exploring on Bar Charts  - Vertical Bar chart, Vertical Stacked Bar Chart,Line Chart, Area Chart.
4.A) High lights in Charts
Extension points & relative height and width code(Shared by a community guy).
i) Size of the bars
ii) X-axis labels rotated and X-axis label coloring.
iii) Values on Bars
iv) Work around with legend.

5) CSS for components
6) Cascading parameters concept implemented. 

Smaller View of the same dashboard

Click Here for Source Code of this example: Source Code

Or  open below link using your google accoutn

https://drive.google.com/file/d/0BymV_QP4TGBEc0dWWk5mSUJ1Z2M/edit?usp=sharing


Deployment :
1) Download the zip file and upload it to 5.0.1 BA server
2) Open the file in Edit mode and go to settings and select dashboard type with Bootstrap.

IMP NOTE :
There are few known issues with the example currently - Have to apply css for labels and input selects.

Defects in the dashboard Example :
Input controls css ... relativity of heights and widths of input controls are not implemented. Working on this.. will update you on it in next examples. 


Reference:
http://diethardsteiner.blogspot.in/2014/03/pentaho-cde-and-bootstrap-essential.html

http://forums.pentaho.com/showthread.php?161211-Boot-Strap-CSS-Dashboard-Charts-relative-height-and-width-of-charts

As suggested in pentaho forum from a community guy, write below code for each of the chart component.
This code will relatively adjust the chart height and width with the browser.
i.e., you are telling the container to adjust the heights and width of the charts relatively with the heights and width of bootstrap panels. 

  var myself = this;
  // Set initial width to match the placeholder
  myself.chartDefinition.width = myself.placeholder().width();

  // Attach the resize handler only on the first execution of the chart component
  if (!this.resizeHandlerAttached){

    // Ensure render is only triggered after resize events have stopped
    var debouncedResize = _.debounce(function(){

      // Show chart again.
      myself.placeholder().children().css('visibility','visible');

      // Change chart width
      myself.chartDefinition.width = myself.placeholder().width();
      myself.render( myself.query.lastResults() );
    }, 200);

    // Attach resize handler
    $(window).resize(function(){

      // Only trigger resize if the container has changed width
      if ( myself.chartDefinition.width != myself.placeholder().width()){

        // Temporarily hide chart so that overflow does not happen
        myself.placeholder().children().css('visibility','hidden');

        // Trigger the resize with debounce
        debouncedResize();
      }    
    });

    this.resizeHandlerAttached = true;
  }