Table of Contents

Pentaho ChartBeans

In this article, This article provides you with an introduction to the Pentaho ChartBeans ¹ project is introduced. Pentaho ChartBeans is a wrapper around existing "chart engines" (such as JFreeChart and Open Flash Chart). Wrapping these chart engines creates a single way of expressing charts.

...

To eliminate confusion in documentation, the Pentaho ChartBeans project has documented its preferred charting terminology has been provided. In addition to standardizing on terms for the purpose of the Pentaho ChartBeans project, this terminology page provides an excellent introduction to charting in general. Please review this page before proceeding.

...

In this example Pentaho ChartBeans is used to render a standalone PNG image and an HTML page with an embedded Flash chart object.

The full source of this example is attached. It is a zipped Eclipse project called pentaho-chartbeans-demo. An included readme file instructs you how to run the example.

Chart Data

In this example, a ChartTableModel is created consisting of 21 rows and 3 columns. This example also adds some row and column metadata.

Code Block

	java
	java
title	createChartTableModel: Dummy Data

  private static ChartTableModel createChartTableModel() {
    // 21 rows and 3 columns
    Object[][] dataArray = { {
 5.55, 10.11, 20.22 }, { 30.33, 40.44, 50.55 }, { 31.33, 99.44, 150.55 },                  { 32.33, 1.44, 30.55 }, { 34.33, 88.44, 775.55 }, { 3510.3311, 22.44, 5420.5522 }, {
 36.33, 33.44, 52.55 },         { 37.33, 76.44, 54.55 }, { 38                {  30.33, 7 40.44,  5950.55 }, { 39.33, 48.44, 56.55 }, { 40 
                             {  31.33, 19 99.44, 57150.55 },
                             { 50 32.33,   1041.44, 36 30.55 }, 
    { 60                         {  34.33,  2388.44, 74 77.55 }, {
20.33, 90.44, 80.55 }, { 60.33, 18.44, 27.55 },                            {  35.33,  22.44,  54.55 }, 
                             {  36.33,  33.44,  52.55 },
                             {  37.33,  76.44,  54.55 }, 
                             {  38.33,   7.44,  59.55 }, 
                             {  39.33,  48.44,  56.55 }, 
                             {  40.33,  19.44,  57.55 },
                             {  50.33, 104.44,  36.55 }, 
                             {  60.33,  23.44,  74.55 }, 
                             {  20.33,  90.44,  80.55 }, 
                             {  60.33,  18.44,  27.55 },
                             {  10.33,  22.44,  97.55 }, 
                             {  20.33,  59.44,  55.55 }, 
                             {  90.33, 140.44,  22.55 }, 
                             { 100.33,  56.44,  76.55 },
                             {  40.33,  50.44,  50.55 }, 
                 { 10.33, 22.44, 97.55 }, { 20.33, 59.44, 55.55 }, { 90.33, 140.44, 22.55 }, { 100.33, 56.44, 76.55 },            {  60.66,  70.77,  80.88 } 
                 { 40.33, 50.44, 50.55 }, { 60.66, 70.77, 80.88 } };

    ChartTableModel data = new ChartTableModel();
    data.setData(dataArray);

    // give names to the categories
    data.setColumnName(0, "budget");
    data.setColumnName(1, "sales");
    data.setColumnName(2, "forecast");

    // give names to the series
    final String ROW_NAME_KEY = "row-name";
    data.setRowMetadata(0, ROW_NAME_KEY, "1");
    data.setRowMetadata(1, ROW_NAME_KEY, "2");
    // ----- lines omitted -----
    data.setRowMetadata(20, ROW_NAME_KEY, "21");
    return data;
  }

...

Code Block

	java
	java
title	createChartModel: Dummy Chart Structure


 
private static ChartModel createChartModel() {

    List<Series> seriesList = new ArrayList<Series>();
    Series series1 = new Series();
    series1.setForegroundColor(0x2D00FF);
    seriesList.add(series1);
    Series series2 = new Series();
    series2.setForegroundColor(0x11FFE4);
    seriesList.add(series2);

    // lines omitted

    Series series21 = new Series();
    series21.setForegroundColor(0x0596FF);
    seriesList.add(series21);

    CategoricalBarPlot plot = new CategoricalBarPlot();
    plot.setSeries(seriesList);
    plot.setOrientation(Orientation.HORIZONTAL);

    ChartModel chartModel = new ChartModel();
    chartModel.setTitle("Bar Chart Using Pentaho ChartBeans");
    chartModel.setPlot(plot);
    return chartModel;
  }

Chart Styling

For now, styling is included in the chart structure when using ChartModel API.

...

Code Block

	java
	java
title	main method

  public static void main(String[] args) throws Exception {
    // "boot" ChartBeans
    ChartBoot.getInstance().start();

    // remove any output from previous runs
    cleanOutput();

    // render chart using JFreeChart plugin for Pentaho ChartBeans
    renderUsingJFreeChartPlugin(createChartModel(), createChartTableModel(), "chartoutput/Bar.png");

    // render same chart using Open Flash Chart plugin for Pentaho ChartBeans
    renderUsingOpenFlashChartPlugin(createChartModel(), createChartTableModel(), "chartoutput/Bar.html");
  }

...

Code Block

	java
	java
title	renderUsingJFreeChartPlugin method

  private static void renderUsingJFreeChartPlugin(final ChartModel chartModel, final ChartTableModel chartTableModel,
      final String chartOutputFilename) throws Exception {
    final IChartPlugin plugin = ChartPluginFactory.getInstance("org.pentaho.chart.plugin.jfreechart.JFreeChartPlugin");
    ChartDocumentContext cdc = ChartFactory.generateChart(chartModel, chartTableModel);
    IOutput output = plugin.renderChartDocument(cdc, chartTableModel);
    OutputUtils.persistChart(output, chartOutputFilename, IOutput.OutputTypes.FILE_TYPE_PNG, 400/*px*/, 400/*px*/);
  }

...

Code Block

	java
	java
title	renderUsingOpenFlashChartPlugin method

  private static void renderUsingOpenFlashChartPlugin(final ChartModel chartModel,
      final ChartTableModel chartTableModel, final String chartOutputFilename) throws Exception {
    final IChartPlugin plugin = ChartPluginFactory
        .getInstance("org.pentaho.chart.plugin.openflashchart.OpenFlashChartPlugin");

    ChartDocumentContext cdc = ChartFactory.generateChart(chartModel, chartTableModel);
    IOutput output = plugin.renderChartDocument(cdc, chartTableModel);

    ByteArrayOutputStream tmpOut = new ByteArrayOutputStream();
    output.persistChart(tmpOut, IOutput.OutputTypes.DATA_TYPE_STREAM, 400, 400);
    final String ENCODING = "UTF-8";
    ByteArrayInputStream in = new ByteArrayInputStream(tmpOut.toByteArray());
    IOUtils.closeQuietly(tmpOut);
    String openFlashChartJson = IOUtils.toString(in, ENCODING);
    IOUtils.closeQuietly(in);

    final String HTML_TEMPLATE = "<html>\n" + "  <head>\n"
        + "    <title>Bar Chart Using Open Flash Chart Plugin</title>\n"
        + "    <script type=\"text/javascript\">window.getChartData = function() '{' return ''{0}''; '}'</script>\n"
        + "  </head>\n" + "  <body>\n"
        + "    <object id=\"ofco00b1c87708fe11dea97da1e1ba5b86bc\" height=\"100%\" align=\"middle\" width=\"100%\" \n"
        + "    codebase=\"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0\" \n"
        + "    classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"> \n"
        + "    <param value=\"sameDomain\" name=\"allowScriptAccess\"/><param value=\"opaque\" name=\"wmode\"/> \n"
        + "    <param value=\"open-flash-chart.swf?get-data=getChartData\" name=\"movie\"/> \n"
        + "    <param value=\"high\" name=\"quality\"/><embed id=\"ofce00b1c87708fe11dea97da1e1ba5b86bc\" \n"
        + "    height=\"100%\" align=\"middle\" width=\"100%\" \n"
        + "    pluginspage=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" \n"
        + "    allowscriptaccess=\"sameDomain\" bgcolor=\"#FFFFFF\" quality=\"high\" wmode=\"opaque\" \n"
        + "    src=\"open-flash-chart.swf?get-data=getChartData\"/></object>\n" + "  </body>\n" + "</html>";

    String html = MessageFormat.format(HTML_TEMPLATE, new String[] { openFlashChartJson });
    FileUtils.writeStringToFile(new File(chartOutputFilename), html, "UTF-8");
  }
");
  }

The full source of this example is attached. It is a zipped Eclipse project called pentaho-chartbeans-demo. An included readme file instructs you how to run the example.

Example from an End User Perspective

...

Code Block

	xml
	xml
title	Bar.xml: The Chart Document

<chart xmlns="http://reporting.pentaho.org/namespaces/charting/1.0">

  <!-- external style sheet -->
  <stylesheet href="theme.css" />

  <!-- chart title -->
  <title>Bar Chart Using Pentaho ChartBeans</title>
     

  <!-- styling on individual series using style and class attributes -->
  <series style="-x-pentaho-chart-series-type: bar; -x-pentaho-chart-bar-style: bar;" class="series1" />
  <series class="series2" />
  <!-- lines omitted -->
  <series class="series18" />

    <!-- wrap colors because there are more series than colors in the theme -->
  <series class="series1" />
  <series class="series2" />
  <series class="series3" />

  <!-- styling on plot using style attribute -->
  <plot style="-x-pentaho-chart-orientation: horizontal"/>
</chart>

...

Code Block

	xml
	xml
title	Pentaho Action Sequence (for use in the Pentaho BI Platform)

<?xml version="1.0" encoding="UTF-8"?>
<action-sequence>
   <name>chartbeans_demo.xaction</name>
  <title>chartbeans_demo.xaction</title>
  <version>1</version>
  <logging-level>debug</logging-level>
  <documentation>
    <description>Generate a chart through ChartBeans from an MQL statement.</description>  
    <help>Pass in an MQL statement that returns a table of three columns. The first column is the series, the second is the category and the third is the data.</help>
    <result-type>rule</result-type>
    </documentation>

  <inputs>
    <query type="string">
       <sources> 
        <request>query</request> 
      </sources>
      </query>
     <chart-model type="string">
      <sources>
        <request>chart-model</request>
      </sources>
    </chart-model>
    <chart-width type="integer">
      <sources>
        <request>chart-width</request>
      </sources>
      <default-value>-1</default-value> 
    </chart-width>
    <chart-height type="integer">
      <sources>
        <request>chart-height</request>
      </sources>
      <default-value>-1</default-value>
    </chart-height>
    <series-column type="string">
      <sources>
        <request>series-column</request>
      </sources>
      <default-value/> 
    </series-column>
    <category-column type="string">
      <sources>
        <request>category-column</request>
      </sources>
      <default-value/>
     </category-column>
    <value-column type="string">
      <sources>
        <request>value-column</request>
      </sources>
      <default-value/>
    </value-column>
  </inputs>

  <outputs>
    <outputstream type="content">
       <destinations>
         <response>content</response>
       </destinations>
     </outputstream>
   </outputs>

  <resources/>

  <actions> 
 

    <action-definition>
      <action-inputs>
        <query />
      </action-inputs>
      <action-outputs>
        <rule-result type="result-set" mapping="chartdata"/>
      </action-outputs>
      <component-name>MQLRelationalDataComponent</component-name>
      <action-type>rule</action-type>
      <component-definition>
        <live>true</live>
        <display-names>false</display-names>
      </component-definition>
    </action-definition>

    <action-definition>
      <component-name>org.pentaho.platform.engine.services.solution.PojoComponent</component-name>
      <action-inputs> 
        <chart-model type="string"/>
        <chartdata type="result-set" />
        <chart-width type="integer"/>
        <chart-height type="integer"/>
        <series-column type="string"/>
        <category-column type="string"/>
        <value-column type="string"/>
      </action-inputs>
      <action-outputs>
        <outputstream/>
      </action-outputs>
      <component-definition>
         <class>org.pentaho.platform.plugin.action.chartbeans.ChartComponent</class>
       </component-definition>
      <action-name>Test the test POJO</action-name>  
      <logging-level>DEBUG</logging-level> 
    </action-definition>
   

  </actions> 
</action-sequence>

Results

...

Panel

bgColor	#FFFFFF
title	Bar chart using JFreeChart plugin for Pentaho ChartBeans

Here is the result (in the form of a screenshot) using the Open Flash Chart plugin for Pentaho ChartBeans:

Panel

bgColor	#FFFFFF
title	Bar chart using Open Flash Chart plugin for Pentaho ChartBeans

...

Status

ChartComponent (In Progress)

...

Versions Compared

Old Version 30

New Version Current

Key

Pentaho ChartBeans

Chart Data

Chart Styling

Example from an End User Perspective

Results

Status

ChartComponent (In Progress)

Page Comparison

Versions Compared

Old Version 30

New Version Current

Key

Pentaho ChartBeans

Chart Data

Chart Styling

Example from an End User Perspective

Results

Status

ChartComponent (In Progress)