Notes on 5.x Migration

BI projects in Mexico have been slow for me so I haven’t posted much information lately. But the release of 5.1 CE in par with the EE version deserves a mention and a post.

Moreover since webdetails has made Dashboards development something doable interactively, coherent and documented but at the same time a nightmare for each time you upgarade their ctools plugins an improvement on them messes up your dashboard’s looks.

Well, I have just upgrated with the CE release from 5.01 to 5.1 and kudos for making that an easy job. Thanks for thinking on us that can only use Open Source products.


Notes on the 5.x version

For years from 2.5 up to 4.8 version the BI Server, the link between the individual Pentaho projects was guided by a Pentaho team, but somehow decided to unload the web project to a new partner for for the 5.01 release.

So some changes on its infrastructure were expected, this is what I have notice so far:

  • The repository (a fancy way to describe the pentaho-solutions folder on the CE standar edition) was migrated to a encrypted structure on the pentaho-solutions/system that you can set on folder or in a database.
    So now you have to ‘upload’ some of your files to this structure like reports, resources (images, css) so they can be found by the BI web server. Some others like the .ktr transformations can still live on normal files, it depends on how you code the paths on your programs. I like this as version control can be maintained on them.
    The users, new roles and datasources have also been moved from a database to the Jackrabit Content Repository (JCR).
    All the administration can be done from the BI web server.
  • The important configuration files retain their functionallity and location, but others are being taken to pieces or relocated so they can be consolidated on new ones.
    They are being commented so the inconvenience is minimal.
  • The console or web interface has a new paradigm, so you and your users will need a video or a presentation to get full use of it. Navigation between browsing programs, results, administration or home page is controlled by a selector on your upper left insted of the older tabbed interface.
  • Most of your development will need to be done or maintened.
    The sequencing actions (.xactions) files are deprecated and can be migrated once you know to:
    – Edit them without special characters (use unicode) speccially in the name.
    – Save them in UTF-8 or cant be uploaded.
    – Change <viewer>Pivot</viewer> to <viewer>plugin/jpivot/Pivot</viewer>
    – Change <model><![CDATA[solution:your-path/your-model.mondrian.xml]]></model>
    to <model><![CDATA[mondrian:/your-model]]></model>.
    Note: You have to upload the model to the repository. You browse to your folder on the web UI and click on upload.
    – The Design Studio is no longer maintained and a text editor can be used
  • The Report Designer has new attributes and quirks but its ok. Now you can ‘publish’ yor reports to your server.
    I used to specify which formats could the user select for output on a parameter, now is a default and you can select a default on the PRD.
  • The Metadata editor can read the models and publish them to the BI server too.
  • Once you save a .ktr file you won’t be allowed to read it in the olver PDI version.
  • What I miss is the Saiku Reporter as it has not been migrated yet.
    Those programs and the ones on Ad-hoc queries (now on WAQR plugin on the marketplace) had to be built from scratch so documentation of your site is very important on this migration.
  • The changes on CDE are many, really, many things have changed: The protovis library it uses has been deprecated, the version changed from 1.0 to 2.0 as a result interface fields have changed and a few don’t work as advertised. Check next section so you’ll be warned.

Dashboard Changes

Graphical representation is a key in information visualization, to make graph libraries present the way you desire you need documentation.

The webdetails site has good documentation on the CDE to get started but some later changes are not explained for ‘advanced topics’. you’ll need to browse the protovis site or look for tips like this one on vesion changes Main_Changes_New_Features_CCC_v2.

Some changes are minimal, as an example, you used to set an extension point as a pair: pie_innerRadius,50. Now you use: slice_innerRadiusEx,50%. You can see that you will need lots of time to make your dashboard behave like it used to.

Other point of difficulty are functions and how you pass a parameter, You used to format a tooltip:

function f(value){return ('$'+sprintf("%.1f", value)+'m')}

now you pass an object and has to specify the full path:

function f(scene){
    return ('Puesto '+scene.vars.category.value+' , con '+scene.vars.value.value+' personas');
}

The problem is that the object has a few variations and can be navigated on some others.

Tip: The code to trigger a change on a click change from:

function d(a,b,c){ updateParamFunc("PARAM_MARKET", b) }

to

function d(scene){ updateParamFunc("PARAM_MARKET", scene.vars.category.value) }

Heres an article on the pentaho forum that talks about extension points.

I noticed also than table rendering has changed from 5.01 to 5.1, now its better as has several divs to control format but you will have to use your firebug plugin to tame them with .css files (that has to be uploaded to the repository).

 

Advertisements

Bullet Graph Dashboard: PDI-MDX-SQL DataSource + BI Server + CDE

To Do

The idea to build this dashboard comes from joining Stephen Few’s spec [pdf], an excelent implementation from Slawomir Chodnicki and finding out that the C*Tools (Webdetails dashboard project) has published a Bullet Graph widget from the Protovis Library that is easier to use and customize.

Dashboard PDI Final

Final Dashboard

Components

We’ll need:

  1. CDE Editor. Install or update to the latest version [Instructions]
    Used to create and edit the parameter, datasource and mappings to the graph.
  2. Pentaho PDI/Kettle ETL tool [Download].
    Used for data retrieval by selected parameters, normalization and PKI process.
  3. The Pentaho BI Sever
    To excecute the dashboard via its menu and see the html result.

Building The Layout

Lets start a new CDE dashboard by a click on the CDE icon in the top toolbar: CDE icon

Header Rows

The CDE Editor will open with ‘Layout’ selected. This is the asociated toolbar:
cde layout toolbar

  • Click on the row icon (=)
    Select Row
    Set:

    • Name=header
    • BackgroundColor=99a5de
      (in the bottom text field, close clicking on the color ball)
    • In the ‘Corners’ attribute. Use the down-arrow to scroll to Round
  • Click on the row icon (=) three more times to have a total of 4 rows.
    Be carefull, the toolbar is dynamic and the icons will change.
  • On the first and second rows add one ‘Html’ element (<>)
  • On the third row, set Name=ParamRow
  • Type in the first html type a title:
    <h2>Sales Dashboard By Product Line</h2>
  • On the second Html type:
    <div class="topRow1">Sales YTD</div>
    <div class="topRow2">Actual amount (horizontal bar) and Previuos Year (blue mark)</div>
    <hr class="topRowHR"/>

It should look like this.

Dash 00

Save in your development folder with a meaningfull ttitle (used by the BI menu system)  and click Preview to see the headers. Close the dialog.

Parameter Row

  • The third row will need four columns.
  • The first and the third column will have also an Html element.
  • Put in the first one the text Year, and in next Month.
  • Select the second column and look for the name attribute set it to nYear (node for year select).
    Name the forth one nMonth.

Result Row

  • Add two columns
  • Name the first one nResultGraph
    and the other nResultTable
  • Set for each column span size=12 (there’s a total of 24 columns in the template)

Save the final layout, that should look like this.

Dash n

Important: If the message “Dashboard saved successfully” doesn’t appear, check your mofifications for errors. If you can’t fix it, exit and resume from the latest point saved.
To edit a dashboard, select it on the browse panel in the BI Server. Right click on it and then select Edit in the context menu.

Building Datasources and its Widgets

Three types of datasources:

  1. Two SQL queries are needed for Year and Month.
  2. The table will be  a simple MDX.
  3. The Graph will need additional columns for ranges, we’ll use an ETL transformation for this one.

SQL

Click on Data Sources ‘button’ in your top-right. The left side of the CDE will list all the connections the CDE can use to get data.

  • Click on SQL Queries, then on sql over sqlJndi
    The group SQL Queries will be added
  • Set:
    name=dsYear
    Jndi=SampleData
    query=
SELECT DISTINCT YEAR_ID FROM DIM_TIME ORDER BY YEAR_ID DESC

Click on Components ‘button’ in your top-right.

  • We need a parameter to hold the Year selection
    • Click on the Generic button on the left list
    • Click now on Simple parameter
    • Set Name=pYear
      Set de default to Property value=2005
    • Save
  • Drop Down
    • Click on Selects button on the left list
    • Click now on Select Component
    • Set Name=csYear
      Parameter=pYear (the one defined above)
      HtmlObject=nYear (attach point, that is the column we named that way in the layout)
      Datasource=dsYear
    • Save
  • Click Preview. Check the select box. Close the preview dialog.

For the Month SQL, the set up is a little diferent as we need to set up a listener for changes on the Year select box and then pass that parameter to the Component and then the SQL datasource.

  • Click on Data Sources
    • Click SQL Queries, then sql over sqlJndi.
    • Set:
      name=dsMonth
      Jndi=SampleData
      Click on Parameters, click on the Add Button.
      in the dialog: Name=pYear, value=2005, Type=String
      query=

      SELECT DISTINCT MONTH_NAME
       FROM DIM_TIME
       WHERE YEAR_ID=${pYear}  ORDER BY MONTH_ID
  • Click on Components
    • Click on the Generic button
    • Click on Simple parameter
    • Set Name=pMonth
      Set de default to Property value=May
    • Click on Selects button on the left list
    • Click now on Select Component
    • Set Name=csMonth
      Parameter=pMonth
      HtmlObject=nMonth
      Click on Listeners, on the select arrow choose pYear
      Click on Parameters, click on the Add button,
      in the dialog set Arg=pYear, Value=pYear (you can select with the “…” button)
      Datasource=dsMonth
    • Save

If you click Preview you should see something like this.

Preview 01

MDX

Let’s define the query against the ‘Steel Wheels Sales’ cube as our Datasource. There are some links at the bottom of the article about MDX and sumary functions.

  • Click on
    • Data Sources
    • MDX Queries
    • mdx over mondrianJndi.
  • Set:
    • name=dsTable
    • Mondrian squema=SteelWheels
      (jndi will be set to SampleData)
    • Query=
      with
      member [Measures].[Sales_Curr] as 'Sum(Ytd([Time].CurrentMember), [Measures].[Sales])'
      member [Measures].[Sales_Prev] as 'Sum(Ytd(ParallelPeriod([Time].CurrentMember,1)), [Measures].[Sales])'
      select
      {[Measures].[Sales_Prev], [Measures].[Sales_Curr]} ON COLUMNS,
      {[Product].Children} ON ROWS
      from [SteelWheelsSales]
      where [Time].[2005].[QTR2].[May]

And now the grid element to display our data.

  • Click on:
    • Components
    • Others
    • Table Component
  • Set:
    • Name=ctTable
    • HtmlObject=nResultTable
    • Datasource=dsTable
  • Save & Preview
  • Now click on Advanced Properties (below the Component button)
  • Click on:
    • Column Headers
      add button for: Sales, Previous, Actual
    • Column Formats
      add button for: %s, $%.2f , $%.2f
      Those are for: string (%s) and currency with two decimals ($%.2f)
  • Set:
    • Paginate=False
    • Show Filter=False
    • Sort Data=False
  • Save & Preview

For testing and format purposes the used query doesn’t change when the month or year are modified. Now we need to add listeners, the parameters in the component and the datasource to calculate the ‘quarter’ depending on the month.

Click on Components (you may be already there)

  • Click on:
    • (left) Generic button
    • Simple parameter
  • Set:
    • Name=pQtr
    • Property value=QTR2

Click on Data Sources

  • Click on:
    • (group triangle) MDX Queries
      select dsTable
    • Parameters
  • Add three lines
    • Name=pYear, Value=2005, Type=String
    • Name=pQtr, Value=QTR2, Type=String
    • Name=pMonth, Value=May, Type=String
  • Click on Query
    change last line from:

    where [Time].[2005].[QTR2].[May]

    To:

    where [Time].[${pYear}].[${pQtr}].[${pMonth}]
  • Save & Preview.
    You should see the same image than before. Close the dialog.

Click on Components

  • Click on:
    • (group triangle) Others
      select ctTable
    • Listeners
      Select in the drop down: pYear, pMonth. Click OK
    • Parameters
  • Add three lines:
    • Arg=pYear, Value=pYear
      (you can use the three dots (…) button to select  value)
    • Arg=pQtr, Value=pQr
    • Arg=pMonth, Value=pMonth
  • Click on:
    • Advanced Properties (at the top link on your right)
    • preExecution
  • Paste this javascript function to set Quarter based on month selected:
    • function Q (){
      var vQtr='';
      switch (pMonth) {
      case 'Jan':
      case 'Feb':
      case 'Mar':
      vQtr='QTR1'; break;
      case 'Apr':
      case 'May':
      case 'Jun':
      vQtr='QTR2'; break;
      case 'Jul':
      case 'Ago':
      case 'Sep':
      vQtr='QTR3'; break;
      case 'Oct':
      case 'Nov':
      case 'Dec':
      vQtr='QTR4'; break;
      }
      pQtr=vQtr;
      }
  • Save & Preview.
    Try changing the month to ‘Jan’. You should see something like this.Table Preview

Close the preview dialog.

ETL

In he last part we’ll use an ETL process and the Bullet Graph widget.

Start the PDI. Create a new transformation and save it in the demo/development folder with the name SalesDashboard.ktr.

This is the PDI transformation

Dashboard PDI

Dashboard PDI Transformation

  1. Prepare the default parameters for testing.
    On the menu click Edit ->Parameters
    Select Parameters Tab, Define pYear, pQtr, pMonth.
    Dash PDI 00
  2. Set the MDX
    Add Input->Mondrian Input
    Dashboard PDI 01
    Check the ‘Replace variable’  checkbox so the parameters are used.
    The query is:
with
member [Measures].[Sales_Curr] as 'Sum(Ytd([Time].CurrentMember), [Measures].[Sales])/1000'
member [Measures].[Sales_Prev] as 'Sum(Ytd(ParallelPeriod([Time].CurrentMember,1)), [Measures].[Sales])/1000'
select
{[Measures].[Sales_Prev], [Measures].[Sales_Curr]} ON COLUMNS,
{[Product].Children} ON ROWS
from [SteelWheelsSales]
where [Time].[${pYear}].[${pQtr}].[${pMonth}]
  • Rename columns
    Here we copy columns to new ones but set the new names. This is necesary if you want to remove the dynamic nature of column names in MDX results, for example when you use time in columns then you may get [Time].[2005].[QTR2].[May] or [Time].[2005].[QTR1].[Jan] then you better use ‘CurrentMonth’ to use in PDI steps.
    Add Scrpting->Modified Java Script
    Dashboard PDI 02
    The script is:

    var rowOut = getOutputRowMeta();
    newRow = createRowCopy(rowOut.size());
    var ProductLine = rowMeta.getString(newRow, 0);
    var Actual   = rowMeta.getNumber(newRow, 1);
    var Previous = rowMeta.getNumber(newRow, 2);
  • Get the maximum value for each column.
    Here max value for Actual is renamed to Max1 and Previous o Max2.
    Add Statistics->Group by
    Dashboard PDI 03
  • Calculate max values and two ranges.
    Add Scrpting->Modified Java Script
    This is an oversimplified ETL, with ranges set on maximum values for all rows. In any case you could use KPIs from tables and a lookup step.
    – maximum value from both columns
    – round it up
    – I set two marks one at 70% other at 90%, for grade of color in the graph bar.
    Dashboard PDI 04
    – The sample script use is:

    var Maximum=0.0;
    var Mark1=0.0;
    var Mark2=0.0;
    if ( (Max1!=null) || (Max2!=null) )
    if ( Max1 > Max2 )
    Maximum = Max1;
    else
    Maximum = Max2;
    if (Maximum!=0.0) {
    if (Maximum>=1.0) {
    Maximum = Maximum / 10.0;
    Maximum = ceil(Maximum) * 10.0;
    } else {
    Maximum = Maximum / 1.0;
    Maximum = ceil(Maximum) * 1.0;
    }
    Mark1=Maximum*0.7;
    Mark2=Maximum*0.9;
    }
  • Process measures
    Each row may need processing, if KPI is set for each measure then it should be calculated on this thread. Here we just add a subtitle string (k=thousand).
    Add Transform->Add constants
    Dashboard PDI 05
  • Remove excesive text from product line description
    The first colum has text like “[Product].[Ships]”, we can remove the fixed part with a regular expression to replace the unwanted and fixed text
    Add Transform->.Replace in String Step.
    Type in Search:  ^\[Product\]\.\[(.*)\]$
    Notice that no output field is specified so ProductLine will be used, that the dot and squared brackets are ‘escaped’ with backslash and that the replace string is (.*)=$1
    Dash PDI Regex
    For using this step: Reference1, Reference2
  • Join the data and its ranges.
    Add Joins->Join Rows (cartesian product)
    Dashboard PDI 06
    The important thing is to state the step from where is the data coming from, if you don’t do this you end up missing data or even complete rows: Add constants.
  • Sort as you like.
    Add Transform->Sort rows
    Dashboard PDI 07
  • Output
    Make available only the relevant columns:
    – Measure Title
    – Measure Subtitle
    – Value of Bar
    – Value of Mark
    – Min Range (darker shade in bar)
    – Max Range (lighter shade in bar)
    – Max value
    Add Transform->Select values
    Dashboard PDI 08

Selecting this last step and previewing the output you get.

Dashboard PDI Result

You can close the PDI.

Bullet Graph

Back to the CDE Editor.

Click on Data Sources

  • Click on:
    • MDXKettle Queries button
    • ketle over kettleTransFormFile
    • Select the ketle over kettleTransFormFile Component
  • Set
    • Name=dsBulletGraph
    • Kettle Transformation File=SalesDashboard.ktr
    • Click on Variables, a dialog will open
      add three lines for:
      – Arg=pYear
      – Arg=pQtr
      – Arg=pMonth
    • Click on Parameters, in the dialog add three lines:
      – Name=pYear, Value=2005, Type=String
      – Name=pQtr, Value=QTR2, Type=String
      – Name=pMonth, Value=May, Type=String
    • Click on Output Options, in the dialog add six lines:
      – Index=0, Index=1, Index=2, Index=3, Index=4
      Index=5, Index=6
    • Click on Columns, in the dialog add six lines:
      – Index=0, Name=Product Line
      – Index=1, Name=Subtitle
      – Index=2, Name=Actual
      – Index=3, Name=Previous
      – Index=4, Name=Mark1
      – Index=5, Name=Mark2
      – Index=6, Name=Maximum
    • Click on Query=OutputBullet
      (last activity)
    • Save CDE

Click on Components

  • Click on:
    • Charts
    • CCC Bullet Chart
      a group will be added
    • Select the new CCC Bullet Chart Component.
  • Set
    • Name=cgBulletGraph
    • Width=420
    • Height=220
    • Datasource=dsBulletGraph
    • Clear Title and Subtitle
    • Click Bullet Ranges
      click on the minus button (-) to delete each line
      Close the dialog
    • Click on Parameters, in the dialog add three lines:
      – Arg=pYear, value=pYear
      – Arg=pQtr, value=pQtr
      – Arg=pMonth, value=pMonth
    • Set HtmlObject=nResultGraph
    • Click on Listeners
      Select pYear, pMonth

Save and preview. We are almost finished

Dashboard PDI Almost

Fine Formatting

There are three formating options in the CDE

  1. Format options in CDE, either in the component advanced properties or html or column layout
  2. CSS class from the web page
  3. Some properties of the components

To work with the CSS or DOM elements we add a resource file:

  • Create a text file and type:
    That is mainly header fonts and colors, parameter style and table formatting.

    #header { margin-top:1em; }
    h2 { font-size:1.4em; padding-top:7px; padding-left:1em; height:1.6em; }
    .topRow1 { font-size:1.2em; font-weight:700; margin-left:1em; }
    .topRow2 { font-size:1em; margin-left:1em; }
    hr.topRowHR { height:2px; width:900px; color:red; }
    #ParamRow { font-size:0.9em; vertical-align:bottom; margin-bottom:2em; }
    #ParamRow select { font-size:0.9em; vertical-align:top; }
    #ParamRow input { font-size:0.9em; vertical-align:top; }
    #nResultTable { margin-top:2em; }
    table tr.even, table tr.odd{ background-color: white; }
    table thead th { border-bottom: 1px solid #CCC; background-color: #fff; }
    table tbody td.number, th.number{ text-align: right; }
    table tbody td.string, th.string{ text-align: left; }
    table tfooter td { background-color: white; }
    .ui-widget-header { background: white; color: white; border-bottom:0px none; border-top:1px grey solid; border-left:0px none; border-right:0px none;}

    Save it in the demo/development folder as Dashboard.css

  • On the CDE, click on Layout option
  • Add a css resource file, select from the options:
    css
    external
  • Set:
    name=cssDashboard
    Resource file=Dasboard.css

This will be the result

Dash Final 1

We can modify the Graph if we access its properties, in this case the ‘Extension Points’. Lets change the Marker shape and color.

Click on Components

  • Click on the triangle of the Group Charts
  • CCC Bullet Chart
  • click on Advanced Properties.
  • Click on Extension points a dialog will open.
    Add Three lines. Fill with:

    • Arg:bulletMarker_shape  Value:bar
    • Arg:bulletMarker_lineWidth  Value:3
    • Arg:bulletMarker_strokeStyle  Value:#2e559c

Note:
Check posible values for Extension Points at CCC (Bullet Chart) and Protovis sites.
In the CCC (Bullet Chart) page check the keyword to access: base, mark, measure, title, rule, range. In the rest of the document and examples look for the second part: font, shape. Join them with an undescore: bulletMarker_lineWidth.
Or if you want to change the color of the inner bar, you could try:
Arg: bulletMeasure_fillStyle, Color: green or #0F0

You can use other properties to change the appearence, for example the tooltip to show the value of a value can ve modified.

Click in the Advanced Properties of the Graph, in Value format:

function f(value){return ('$'+sprintf("%.1f", value)+'m')}

The final product should be the initial dashboard image.

.

Additional Links

  • Bullet Chart on webdetails: here.
  • Class, Field, Method and Extension Points on webdetails: here.
  • MDX function YTD youtube video by phiintegration.
  • MDX Time Series Functions Part I. Series by William Pearson.
  • Another fine example about building CDE dasboards OSBI.
    Its in French, but the code and diagrams are easy to understand.

Complete Pentaho Installation on Ubuntu, Part 11: C*Tools Dashboards

[Note: Install instructions posted on 2011 are no longer maintained by the developers. Please use the option ‘The Marketplace’ on the Pentaho User Console. The Dashboard building guide and reference links still works].

Install the Dashboard Editor

Webdetails is the contributor of C*Tools to the Pentaho Suite and is made of:

  • CDF: Community Dashboard Framework
    This HTML/javascript framework is part of the BI Server distribution. It let’s you create pages with reports, charts and tables.
  • CDA: Community Dashboard Access
    These are several components that give access to diferent types of datasources.
    However there is a security warning about the posibility of sql injection, so if you are not on a secure environment think twice about instaling this.
  • CDE: Community Dashboard Editor
    This is the web interface that lets you build a HTML/CSS layout and connect it to page elements, datasources and events so you can build your interactive Dashboards.

Manuals and training are commercial offerings of Pedro Alves Company.

Upgrade CDF, Install CDA y CDE.

We’ll need to update a couple of folders, and create a few more to install the editor, restart the server and learn to use the components of the web editor, so:

1. What You Need

Go to http://ci.analytical-labs.com/jenkins/view/Webdetails/ in the tab ‘webdetails’ and download the most recent versions of:

2. Upgrading and Installing

  1. Stop server
  2. Make a backup of your Pentaho folder
    at least a copy of Pentaho/biserver-ce/pentaho-solutions/
  3. Delete the following folders (some of them will not exist on first install):
    /biserver-ce/pentaho-solutions/system/pentaho-cdf
    /biserver-ce/pentaho-solutions/system/pentaho-cdf-dd
    /biserver-ce/pentaho-solutions/system/cda
    /biserver-ce/pentaho-solutions/cdf
    /biserver-ce/pentaho-solutions/cde_sample
    /biserver-ce/pentaho-solutions/bi-developers/cda
  4. Unzip CDF
    pentaho-cdf-TRUNK-SNAPSHOT.zip into
    /biserver-ce/pentaho-solutions/system/
    Unzip CDF samples
    pentaho-cdf-solution-TRUNK-SNAPSHOT.zip into
    /biserver-ce/pentaho-solutions/
  5. Unzip CDA
    cda-TRUNK-SNAPSHOT.zip into
    /biserver-ce/pentaho-solutions/system/
    Unzip CDA samples
    cda-samples-TRUNK-SNAPSHOT.zip into
    /biserver-ce/pentaho-solutions/
    (examples will end up in bi-developers folder)
  6. Unzip CDE
    pentaho-cdf-dd-TRUNK-SNAPSHOT.zip into
    /biserver-ce/pentaho-solutions/system/
    Unzip CDA samples
    pentaho-cdf-dd-solution-TRUNK-SNAPSHOT.zip into
    /biserver-ce/pentaho-solutions/
  7. Start your server

3. Alternate Road

If you like things the easy way, you can download a small shell script and run it from a terminal. It will check for the latest release, do all the upgrades and even install Saiku.

These are notes from Pedro Alves page on github, his blog post or get the shell script here.

Using the CDE

To start the CDE you can click on the toolbar or use Edit->New

CDE New Dashboard

CDE New Dashboard

You have three areas:

  1. Layout:
    You click on the row (=) icon to create a row, and click on the parallel lines (||) to insert a column, and then you can click on the (<>) icon to insert HTML text. To do that you have the properties and events on the right column. Note: If you give elements a name you can use it as an ID on your CSS/javascript code.
  2. Components:
    You can define parameters as your variables.
    You can specify in components (selects, charts, html tables, etc.) the parameter to hold values, or associate them with datasources to get data at startup, or tell them to which elements they need to listen for changes, which component ID will they get displayed on or what code to use on some events.
  3. Datasource:
    You can define all kind of queries to your data, depending on your datasource.
CDE Areas

CDE Areas

Additional tips:

  • There is no global error checking and with so many setting options it is better to ‘preview’ your changes often.
  • To test the datasource (CDA) part of your dashboard you can select the .cda file on the left bottom panel and right click to open it. Your parameters will be used to run a test to your data.
  • Save often also. If you don’t like your changes not all optios have undo capabilities.
  • To edit a dashboard use: Edit (you need to have the sources)

    CDE Edit

    CDE Edit

  • The componets have a link for advanced settings
    CDE JS Functions

    CDE JS Functions

    You can use javascript on clicks, pre or postprocessing, just name the functions:
    function f(){ param2=param1-1; }

Reading Material

  • Detail documentation: CTools-intro-v1.pdf.
  • A step by step CDE Dashboard creation post.
  • An excelent article on Dashboard creation and modification of the CCC-protovis components: creating-dashboards-with-cde.
  • Demos:
    – Five webdetails dashboards at pedroalves-bi.blogspot.com that can inspire you.
    – Stratebi has a demo also at sample.stratebi.es, register for free access.
    – Ambient shows its tips and work on a CDE implementation of a Steven Few sample of a CIO Dashboard.
  • [In Spanish] Dashboard creation: http://churriwifi.wordpress.com.
    And another post on how to use xaction, CDE, MDX and charts working in a dashboard, with code and videos, from startebi in dataprix.
    I suggest you use google translation as they are good articles and you can skip to the code.

Acknowledgement

Thanks to Catarina Félix this post was written, her email with the documentation draft and installer script made me curious and started me in the right direction to overcome the initial fear of the neon-nightclub-CDE interface. 🙂