Creating Dashboards using Open Flash Chart Component - Part 1

Creating Dashboards using Open Flash Chart Component - Part 1

Authors:
Caio Moreno de Souza (Sao Paulo, Brazil)
e-mail: caiomsouza@gmail.com
Leandro Antonio Concon (Campinas, Brazil)
e-mail: leandro.concon@gmail.com

FREE PDF VERSION OF THIS TUTORIAL WITH IMAGES EXAMPLE

Download a free PDF version of this tutorial with images example on

http://www.it4biz.com.br/cursos/pentaho/pdfs/Creating_Dashboards_using_Open_Flash_Chart.pdf

This tutorial was made to help Pentaho Dashboards Developers.

Objectives:
- Help Pentaho Dashboards Developers create pretty Dashboards
- Help CEOs, CFOs and Managers get more comfortable using Pentaho Dashboards
- Help BI users get in love for Flash Dashboards

Required
1) Pentaho 1.7 GA
2) Pentaho Design Studio 1.7 GA
3) Pentaho Component for Displaying Flash based Charts/Visualizations
4) Samples Steel-wheels (Database)

Installing Pentaho Flash Charts on Pentaho 1.7GA

1) Download and Extract the zip file openFlashChartComponentPentaho.zip;
To download openFlashChartComponentPentaho.zip click here

2) Copy openFlashChartComponent.jar to $PENTAHO-HOME/bi-server/jboss/server/default/
deploy/pentaho.war\WEB-INF\lib;

3) Copy open-flash-chart.swf to $PENTAHO-HOME/bi-server/jboss/server/default/deploy/
pentaho-styles.war/images/;

4) Start (or Restart) your Pentaho server.

First Dashboard

To create the first dashboard will use the Pentaho Design Studio 1.7 GA that will assist us in
setting up the action.

1) With the tool will open a new project so that we can continue with the creation of the
xaction.
File>New>Project

2) In the window "New Project" will select "Java Project", then click the button below
"Next".

3) Even in the window "New Project" will set the name for our project, then click the button
below "Finish".
Remember to create a workspace in the repository "pentaho-solutions."
For our example using the project name as "Example".

4) With our "Workspace" created, we will create a new xaction.
File>New>Other>Pentaho>New Action Sequence Wizard (There is a shortcut on Toolbars)

5) In the window "Action Sequence Wizard", we will define the name of the "Container" and
the name of xaction "File Name".
Container: "/Example"
File Name: "example"
Template: Blank

6) Open xaction created "example.xaction". Tab "1. General" can set the title for our
xaction.
For example "Flash Pentaho Dashboards"

7) Go to the tab "2. Define Process". In "Process Input" add two new input parameters of
type string.
+>String
a. chart_width (Origin: Request, Has Default Value: 600);
b. chart_height (Origin: Request, Has Default Value: 300).

8) Create a new file of type text in the "Workspace".
File>New>Other>General>File>example.txt

9) Add one more "Process Inputs" type of resource.
Name: chart_template
Location: example.txt
Source Type: solution-file
Mine type: text/plain

10) In "Process Actions" we add a new action responsible for making a specific query and
returns a "result-set." For our example using a query OLAP.
+>Get Data From>OLAP
Name: Olap
Type of Connection: JNDI
Mondrian Schema File: solution:./../samples/steel-wheels/analysis/
steelwheels.mondrian.xml
JNDI Name: SampleData

Query

Query: with member \[Measures\].\[Product\] as '\[Product\].CurrentMember.Name'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; member \[Measures\].\[Market\] as '\[Markets\].CurrentMember.Name'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; select Crossjoin(
{\[Markets\].\[All Markets\].\[APAC\], \[Markets\].\[All Markets\].\[EMEA\],\[Markets\].\[All Markets\].\[Japan\], \[Markets\].\[All Markets\].\[NA\]}
,
{\[Measures\].\[Product\], \[Measures\].\[Sales\]}
) ON COLUMNS,
{\[Product\].\[All Products\].\[Classic Cars\], \[Product\].\[All Products\].\[Motorcycles\], \[Product\].\[All Products\].\[Planes\], \[Product\].\[All Products\].\[Ships\], \[Product\].\[All Products\].\[Trains\], \[Product\].\[All Products\].\[Trucks and Buses\], \[Product\].\[All Products\].\[Vintage Cars\]}
ON ROWS from \[SteelWheelsSales\]

Select the Run Query Immediately

11) Go to the tab "3. XML Source" and add the lines below after the "action-definition"
MDXLookupRule.
<action-definition>
    <component-
name>com.bayontechnologies.bi.pentaho.plugin.openflashchart.OpenFlashChartComponent</component-
name>
    <action-type>Open Flash Chart</action-type>
    <action-inputs>
     <chart_dataset type="result-set" mapping="query_result"/>
     <chart_height type="string"/>
     <chart_width type="string"/>
    </action-inputs>
    <action-resources>
     <chart_template type="resource"/>
    </action-resources>
    <action-outputs>
      <html_fragment type="string"/>
    </action-outputs>
    <component-definition/>
</action-definition>

12) Go back to the tab "2nd Set Process". In "Process Output" add "html_fragment".
+>html_fragment

13) In the output "html_fragment" will add "Output Destination" type of response.
+>response
Name: Content

14) Open file "example.txt" and add the information below.

example.txt


&title=Product Sales by Region (OLAP),
{font-size: 25px; color: #FFB900}
&
&x_label_style=14,#FFFFFF,2&
&x_axis_steps=1&
&y_legend=USD Sales,12,#FFFFFF&
&y_label_style=14,#FFFFFF&
&bar=75,#FFB900,APAC,10&
&bar_2=75,#28A0DC,EMEA,10&
&bar_3=75,#B90000,JAPAN,10&
&bar_4=75,#28B900,NA,10&
&values=
{col2}
&
&values_2=
{col4}
&
&values_3=
{col6}
&
&values_4=
{col8}
&
&x_labels=
{col1}
&
&y_min=0&
&y_max=
{max4}
&
&bg_colour=#303030&
&x_axis_colour=#D0D0D0&
&x_grid_colour=#808080&
&y_axis_colour=#D0D0D0&
&y_grid_colour=#808080&

15) You may have to "Update the Solution Repository" from the Admin screen if the
Solution doesn't show up.

16) Once all the steps we can run the xaction and see the final result.
<http://localhost:8080/pentaho/
ViewAction?solution=Example&path=&action=example.xaction>
Types of Dashboards (Examples)
Charts
   * Chart Size
   * Data Lines
   * Bar Chart
   * Bar Chart 2
   * 3D Bar Chart
   * Glass Bar Chart
   * Fade Bar Chart
   * Sketch Bars
   * Area Chart
   * Area Chart - 2
   * Bars + Lines
   * Pie Chart
   * Pie Chart Links
   * Scatter Chart
   * Mixed Scatter
   * High Low Close
   * Candle
X Axis
   * X Axis Labels
   * X Axis Labels 2
   * X Axis Labels Step
   * X Axis Legend
Y Axis
   * Y Axis
   * Y Axis Labels - off
   * Right Y Axis
   * Y Axis Legend
   * Y Min Max
On Click Events
   * Bar Links
   * Line Links
More information ...

Errors

1) I've got the error below:
No ClassLoaders found for: com.google.code.pentaho flash charts.OpenFlashChart
So I replace the code
<component-
name>com.google.code.pentahoflashcharts.OpenFlashChartComponent</component-
name>
For
<component-name>UtilityComponent</component-name>

2) Another error was the name of the table, sometimes the name is quadrant_actuals it
should be QUADRANT_ACTUALS

3) Third error change localhost for the correct path
<default-value><![CDATA[http://localhost:8080/pentaho/
ViewAction?solution=samples&path=charts&action=flash_chart_example.xaction&datacall=true]]></defau
value>
Example
<default-value><![CDATA[http://mywebsite.com.br:8080/pentaho/
ViewAction?solution=samples&path=charts&action=flash_chart_example.xaction&datacall=true]]></defau
value>
openFlashChartComponent.jar to /pentaho.war/WEB-INF/lib
openFlashChartComponent.jar
Download java component called
Article Sources:
Pentaho Flash Charts Project
http://code.google.com/p/pentahoflashcharts/
http://code.google.com/p/pentahoflashcharts/wiki/GettingStarted
Beautiful Flash Charts for Pentaho
http://www.nicholasgoodman.com/bt/blog/2008/06/11/beautiful-flash-charts-for-pentaho/
http://www.nicholasgoodman.com/bt/blog/2006/05/04/connect-to-your-own-database/
http://www.nicholasgoodman.com/bt/blog/ http://www.nicholasgoodman.com/bt/blog/2008/10/03/how-to-disable-drill-through-on\\\\\\-
pentaho-charts/

Open Flash Chart Website
http://teethgrinder.co.uk/open-flash-chart/

Silverligth - Open Source
http://visifire.com/

Examples:
http://demo.bayontechnologies.com/pentaho/
ViewAction?solution=openflashchart&path=charts&action=ofc_linechart.xaction&userid=guest&password=

Company in US that uses Pentaho
http://www.bayontechnologies.com