Chart menggunakan Open Flash Chart (OFC) dan Community Framework Dashboard (CDF)

Salah satu konten yang terdapat pada Pentaho User Console adalah Chart. Chart digunakan untuk menampilkan gambaran umum dari keseluruhan data secara grafis. Chart yang tampil pada Pentaho User Console dibuat dengan menggunakan JfreeChart dan Open Flash Chart (OFC). Pada kali ini saya akan menjelaskan mengenai cara pembuatan chart menggunakan Open Flash Chart (OFC) dan Community Framework Dashboard (CDF). OFC merupakan tool generator chart yang menghasilkan chart yang dinamis, sedangkan CDF merupakan teknologi open source untuk membangun dashboard yang dinamis pada Pentaho BI Server. Pentaho yang digunakan adalah versi 3.0.0 stable. Browser yang digunakan adalah Mozilla Firefox.

Tool yang diperlukan:

• Pentaho Design Studio versi 3.0.0 stable dapat diunduh di http://sourceforge.net/projects/pentaho/files/
• Open Flash Chart yang digunakan: open-flash-chart-full-embedded-fontDZ.swf, dapat diunduh di http://code.google.com/p/pentahoflashcharts/downloads/detail?name=pentahoflashchart-plugin-3.0.ce.stable.01-r238.zip&can=1&q=Open Flash Chart ini dapat berjalan jika browser sudah diinstal Adobe Flash Flayer. Simpan open-flash-chart-full-embedded-fontDZ.swf tersebut di direktori /biserver-ce/tomcat/webapps/pentaho/openflashchart/.

Chart ini mengambil kasus yang terdapat pada “Pentaho Solution”, yaitu Product Line Sales. Jadi, chart akan menampilkan informasi banyaknya pendapatan yang diperoleh dari hasil penjualan jenis produk classis cars, vintage cars, motorcycles, trucks and buses, planes, ships, dan trains. Chart ini akan disajikan dalam bentuk pie flash. File yang diperlukan untuk membuat chart product line sales, yaitu:

• index.xml: file inisialisasi folder dalam bentuk tag-tag xml
• index.properties: berisi nama dan deskripsi folder
• flashpieProductLineSales.xaction: inisialisasi chart product line sales dalam bentuk pie flash
• template.html: file yang akan memanggil seluruh file .xaction. Seluruh file .xaction yang diperlukan, diinisialisasikan dalam template.html ini.
• chart.xcdf: file XML berisi informasi deskripsi chart (title, description, icon, template) yang akan tampil pada pentaho User Console. File ini juga akan memanggil template.html.

Langkah-langkah pembuatan chart product line sales, yaitu:

1. Buat folder “product-line-sales” pada Pentaho Solutions. Klik kanan pada Pentaho Solutions, pilih New – Folder. Pada textbox Enter or select the parent folder secara otomatis akan terisi nama Pentaho Solutions. Pada textbox Folder name isikan “product-line-sales”. Klik tombol Finish. Pentaho Solutions merupakan nama projek yang telah dibuat di Design Studio. Projek ini berisi semua solusi yang terdapat pada Pentaho.
2. Buat file “index.xml” pada folder “product-line-sales”. Klik kanan folder “product-line-sales”, pilih New – File. Pada textbox File name isikan “index.xml”. Isikan file ini dengan kode berikut: <?xml version=’1.0′ encoding=’UTF-8′?>
   <index>
   <name>%name</name>
   <description>%description</description>
   <icon>folder.png|solutions.png</icon>
   <visible>true</visible>
   <display-type>icons</display-type>
   </index>
3. Selanjutnya dengan cara yang sama, buat file “index.properties”. Isikan file “index.properties” dengan kode berikut:  name = Product Line Sales
   description = Chart Product Line Sales
4. Buat file “chart.xcdf” pada folder “product-line-sales”. Klik kanan pada folder “product-line-sales” dan pilih New – File, isikan “chart.xcdf” pada textbox File name. Isikan file “chart.xcdf” dengan kode berikut: <?xml version=”1.0″ encoding=”UTF-8″?>
   <cdf>
   <title>Chart Product Line Sales</title>
   <author></author>
   <description> Chart Product Line Sales</description>
   <icon></icon>
   <template>template.html</template>
   </cdf>
5. Selanjutnya membuat chart product-line-sales dalam bentuk pie flash. Klik kanan pada folder chart “product-line-sales”, kemudian pilih New – Other. Kotak dialog akan terbuka. Pada kotak dialog pilih Pentaho – New Action Sequence Wizard dan klik tombol Next. Pada textbox Filename isikan “flashpieProductLineSales.xaction”. Selanjutnya klik tombol Finish.
6. File “flashpieProductLineSales.xaction” telah terbentuk. Pada file .xaction ini terdapat 4 tab, yaitu tab General, tab Define Process, tab XML Source, dan tab Test.
7. Pada tab General isikan Title: Flash Pie Chart Product Line Sales.
8. Pada tab Define Process: Process Inputs pada “flashpieProductLineSales.xaction” terdiri atas tiga (3) input, yaitu width, height, dan ofc_lib_name.
   • Klik kanan pada Inputs, pilih Add – string, kemudian masukkan konfigurasi berikut, Name: width, Source of Input: request (Origin) dan width (Name), Has Default value: 400
   • Klik kanan pada Inputs, pilih Add – string, kemudian masukkan konfigurasi berikut, Name: height, Source of Input: request (Origin) dan height (Name), Has Default value: 400
   • Klik kanan pada Inputs, pilih Add – string, kemudian masukkan konfigurasi berikut, Name: ofc_lib_name, Source of Input: request (Origin) dan ofc_lib_name (Name), Has Default value: open-flash-chart-full-embedded-fontDZ.swf.
9. Pada tab Define Process: Process Actions pada “flashpieProductLineSales.xaction” terdiri atas dua (2) macam, yaitu Relational dan Open Flash Chart. Database yang digunakan terdapat di direktori biserver-
   ce/data/mysql5.
   • Klik tanda plus biru pada Process Actions, pilih Get Data From – Relational, kemudian masukkan konfigurasi berikut: Name: Relational, Database Connection Type: JNDI, Name JNDI: Sample, Query: SELECT PRODUCTS.PRODUCTLINE, SUM(ORDERDETAILS.QUANTITYORDERED*ORDERDETAILS.PRICEEACH) REVENUE FROM ORDERS INNER JOIN ORDERDETAILS ON ORDERS.ORDERNUMBER = ORDERDETAILS.ORDERNUMBER INNER JOIN PRODUCTS ON ORDERDETAILS.PRODUCTCODE =PRODUCTS.PRODUCTCODE INNER JOIN CUSTOMERS ON ORDERS.CUSTOMERNUMBER =CUSTOMERS.CUSTOMERNUMBER INNER JOIN EMPLOYEES ON CUSTOMERS.SALESREPEMPLOYEENUMBER = EMPLOYEES.EMPLOYEENUMBER INNER JOIN OFFICES ON EMPLOYEES.OFFICECODE =OFFICES.OFFICECODE GROUP BY PRODUCTS.PRODUCTLINE ORDER BY 2 DESC. Pilih Run Query Immediately, Result Set Name: query_result.
   • Klik tanda plus biru pada Process Actions, pilih Custom, kemudian masukan konfigurasi berikut: Name: Open Flash Chart, Component Class: OpenFlashChartComponent, Inputs: Name -> chart-data; Type -> result-set; Map To -> <query_result>, Inputs: Name -> height; Type -> string, Inputs: Name -> width; Type -> string, Inputs: Name -> ofc_lib_name; Type -> string, Outputs: Name -> image-tag; Type -> string, Configuration: <chart-attributes>
     <!– Define the chart type –>
     <chart-type>PieChart</chart-type>
     <!– Define title and title formatting –>
     <title>Pie Chart Product Line Sales</title>
     <title-font>
     <font-family>Arial</font-family>
     <size>16</size>
     <is-bold>true</is-bold>
     </title-font>
     <!– General Chart Propeties –>
     <chart-background type=”color”>#FFFFFF</chart-background>
     <animate>true</animate>
     <alpha>.90</alpha>
     <start-angle>0</start-angle>
     <tooltip>#label#
     <!– #key# –> #val#
     </tooltip>
     <!– Specify is the chart legend should be shown –>
     <include-legend>true</include-legend>
     <legend-font>
     <font-family>Arial</font-family>
     <size>12</size>
     <is-bold>false</is-bold>
     <is-italic>false</is-italic>
     </legend-font>
     <!– Specify the color palette for the chart –>
     <color-palette>
     <color>#123D82</color>
     <color>#4A0866</color>
     <color>#445500</color>
     <color>#FFAA00</color>
     <color>#1E8AD3</color>
     <color>#AA6611</color>
     <color>#772200</color>
     <color>#8b2834</color>
     <color>#0f3765</color>
     <color>#880a0f</color>
     <color>#B09A6B</color>
     <color>#772200</color>
     <color>#C52F0D</color>
     </color-palette>
     </chart-attributes>
10. Pada tab Define Process: Process Outputs, klik tanda plus biru pada Process Outputs, pilih image-tag (parameter output chart yang telah diatur pada Process Actions Open Flash Chart), kemudian pada Output Destination
    klik tanda plus biru, pilih response dan isikan field Name dengan content.
11. Lakukan pengetesan chart product line sales flash pada User Console. Buka Pentaho User Console pada browser. Lakukan refresh dengan cara pilih Tools, Refresh, Repository Cache atau dengan mengklik icon kecil pada sudut kanan atas panel Browse. Kemudian klik folder Product Line Sales pada panel Browse dan klik ganda file Pie Chart Product Line Sales pada panel Files yang berada di bawah panel Browse. Chart yang dihasilkan akan tampil pada panel Workspace.
12. Setelah chart dibuat, langkah terakhir yaitu membuat file “template.html” pada folder product-line-sales. Klik kanan pada folder product-line-sales dan pilih New – File, isikan “template.html” pada textbox Filename. Isikan file
    “template.html” dengan kode berikut: <!– The page_title_object –>
    <h1><span id=pageTitleObject></span></h1><!– The dashboard layout table –>
    <table align=”center” cellpadding=”3″>
    <tr>
    <td align=”left”><div>
    <p> Chart ini menampilkan informasi penjualan jenis produk classis cars, vintage cars, motorcycles, trucks and buses, planes, ships, dan trains dalam bentuk pie chart dan flash pie chart
    </p></div></td>
    </tr>
    <tr>
    <td align=”center”><div id=”pieFlashProduct”></div></td>
    </tr></table>

    <script language=”javascript” type=”text/javascript”>
    // pageTitleString component generates the page title with any other parameters is may need to construct the string
    pageTitleString =
    {
    name: “pageTitleString”,
    type: “text”,
    listeners:[“chartType”],
    htmlObject: “pageTitleObject”,
    executeAtStart: true,
    expression: function(){return “Chart Product Line Sales”},
    preExecution:function(){},
    postExecution:function(){}
    }

    pieFlashProduct =
    {
    name: “pieFlashProduct”,
    type: “xaction”,
    solution: “product-line-sales”,
    path: “”,
    action: “flashpieProductLineSales.xaction”,
    listeners:[],
    parameters: [[“chart_height”, “300”], [“chart_width”, “400”]],
    htmlObject: “pieFlashProduct”,
    executeAtStart: true,
    preExecution:function(){},
    postExecution:function(){}
    }

    var components = [pageTitleString,pieFlashProduct];
    </script>

    <script language=”javascript” type=”text/javascript”>
    // The intial dashboard load function definition
    function load(){
    Dashboards.init(components);
    }
    // The intial dashboard load function execution
    load();
    </script>

13. Lakukan refresh kembali pada Pentaho User Console untuk melihat hasil seluruhnya, pilih Tools, Refresh, Repository Cache atau dengan mengklik icon kecil pada sudut kanan atas panel Browse. Kemudian klik folder Product Line Sales pada panel Browse dan klik ganda icon file xcdf pada panel Files yang berada di bawah panel Browse. Finish… Selamat mencoba 🙂