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 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: with member [Measures].[Product] as '[Product].CurrentMember.Name' member [Measures].[Market] as '[Markets].CurrentMember.Name' 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.
com.bayontechnologies.bi.pentaho.plugin.openflashchart.OpenFlashChartComponent Open Flash Chart
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. &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.
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 com.google.code.pentahoflashcharts.OpenFlashChartComponent For UtilityComponent 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 Example
openFlashChartComponent.jar to /pentaho.war/WEB-INF/lib Download java component called
openFlashChartComponent.jar
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-onpentaho-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=g Company in US that uses Pentaho http://www.bayontechnologies.com