Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 24 Next »

Pentaho ChartBeans

In this article, the Pentaho ChartBeans 1 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.

Prerequisites

Java

Pentaho ChartBeans is a Java-based project. As such, a familiarity with Java is recommended as Java classes, packages, and code samples are presented.

Charting Terminology

To eliminate confusion in documentation, the Pentaho ChartBeans project has documented its preferred charting terminology. 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.

History

Several designs were considered for Pentaho ChartBeans.

ChartModel API

The first design was based on JavaBeans and is the source from which the term "beans" derives. The proposal was for classes for each of the structural components of a chart (such as the plot, series, and title). We'll refer to this design as the ChartModel API.

ChartDocument API

The second design was based on a Document Object Model (DOM). A chart DOM is an object model that consists of elements which can have attributes and child elements. Elements have an associated namespace. Core chart elements, like title and plot would go into the Pentaho ChartBeans namespace. Other, chart engine-specific elements would go into their own namespaces. For example, Open Flash Chart-specific properties would go into a "openflashchart" namespace, while JFreeChart-specific properties would go into a "jfreechart" namespace. We'll refer to this design as the ChartDocument API.

Tale of Two APIs

Both designs have their advantages and disadvantages. The ChartModel API provides the familiarity of JavaBeans to Java developers (and code completion in IDEs) and the ChartDocument API is highly flexible and extensible. Currently, both approaches are available! You can build a chart by creating a tree of ChartElement objects (with the ChartDocument API) or you can call a series of setters for pieces of the chart's structure (with the ChartModel API).

ChartBeans

Pentaho ChartBeans requires three inputs: the data to be charted, the structure of the chart, and the styling of the chart.

Chart Data: ChartTableModel

The org.pentaho.chart.ChartData interface is the format for data that is passed to Pentaho ChartBeans. ChartData extends javax.swing.table.TableModel to add row, column, and cell metadata. For example, ChartData allows you to set row and column names. Row and column names are useful for giving meaningful names to series and categories. A single implementation, org.pentaho.chart.data.ChartTableModel, is provided.

Persistent Representation

The data to be charted eventually ends up in a ChartTableModel; but how does it get there? Typically, you would execute an MQL query to get a resultset and that would be converted into a ChartTableModel.

Chart Structure: ChartDocument and ChartModel

The org.pentaho.chart.core.ChartDocument class is a Java representation of a Pentaho ChartBeans XML document. It is a tree of org.pentaho.chart.core.ChartElement instances. A chart document includes elements like title, series, and plot. Note that the chart document references (or inlines) style information; see next section.

The org.pentaho.chart.model.ChartModel class is a JavaBeans-style representation of a chart. It has getters and setters for structural components like title and plot. For now, ChartModel instances also contain styling information.

Persistent Representation

While the structure of the chart eventually ends up in a ChartDocument or ChartModel, on disk and over the network it is represented using Pentaho ChartBeans XML. This is the representation of a chart that end users will see. For an example of Pentaho ChartBeans XML, see Example from an End User Perspective.

Chart Styling

Style information is stored in ChartElement instances.

Persistent Representation

While style information eventually ends up in ChartElement instances, on disk and over the network it is represented using Pentaho ChartBeans Cascading Style Sheets (CSS). Pentaho ChartBeans CSS is not limited to the W3C's style attributes (although it attempts to use them where appropriate, for familiarity). For an example of Pentaho ChartBeans CSS, see Example from an End User Perspective.

Examples

Example from a Java Developer Perspective

Let's use Pentaho ChartBeans to render a standalone PNG image and an HTML page with an embedded Flash chart object.

Chart Data

In this example, we create a ChartTableModel consisting of 21 rows and 3 columns. In addition, we add some row and column metadata.

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, 77.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 }, { 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;
  }

Chart Structure

Here we add the 21 series to the plot which in turn gets added to the chart.

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.

Generating Charts

Now let's pull all of the pieces together. First we have a main method that "boots" Pentaho ChartBeans. This reads various configuration files and otherwise readies the system for chart processing requests. Next we render one chart using the JFreeChart plugin for Pentaho ChartBeans and then we render another chart using the Open Flash Chart plugin for Pentaho ChartBeans. Note that both use the same ChartModel and ChartTableModel.

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");
  }

See how we specify the plugin class in the first line?

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*/);
  }

The Open Flash Chart example is a little more complicated because we have to embed the chart data in an HTML document. Whereas in the JFreeChart example, the bytes for the PNG image went to the chartOutputFilename, in this example, we write the Pentaho ChartBeans output to a String which contains the JSON that will configure the Open Flash Chart object when rendered by the browser.

Note: This example uses open-flash-chart-full-embedded-font.swf, found at http://www.ofc2dz.com/, which is a patched version of Open Flash Chart 2.

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");
  }

Example from an End User Perspective

An end user is anyone who will be using the Pentaho BI Platform. Because the unit of work in the Pentaho BI Platform is the action sequence, we're going to show an example using an xaction that queries using MQL to get the data and then renders a chart using Pentaho ChartBeans.

Note: The ChartComponent mentioned below is not complete! It is a work in progress and cannot be used as is. This example is for illustration only.

Chart Data

In this example, we're just going to query against a database using an MQL query. See Generating Charts in this section.

Chart Structure

The ChartBeans XML document for this example is below. Its relatively brief because our data and styling is separate from the chart structure. The elements in this document define a stylesheet reference, a chart title, the series, and the chart orientation.

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>

Chart Styling

Here is the external style sheet referenced above. Here we're using class selectors. Note the W3C standard color property as well as a custom Pentaho ChartBeans' -x-pentaho-chart-line-width property.

theme.css
.series1 {
  color: #2D00FF;
  -x-pentaho-chart-line-width: 2px;
}

.series2 {
  color: #11FFE4;
  -x-pentaho-chart-line-width: 2px;
}

/* lines omitted */

.series18 {
  color: #B7FFE5;
  -x-pentaho-chart-line-width: 2px;
}

Generating Charts

Note: The ChartComponent mentioned below is not complete! It is a work in progress and cannot be used as is. This example is for illustration only.

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

Here is the result using the JFreeChart plugin for Pentaho ChartBeans:

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:

Bar chart using Open Flash Chart plugin for Pentaho ChartBeans

The full source of this example is attached. It is a zipped Eclipse project called pentaho-chartbeans-demo.

Who's Using Pentaho ChartBeans

org.pentaho.platform.plugin.action.chartbeans.ChartComponent

Access to Pentaho ChartBeans in the Pentaho BI Platform is provided by the Pentaho ChartBeans ChartComponent. You can use ChartComponent in your action sequences to generate charts. Documentation on Pentaho ChartBeans ChartComponent is currently in progress.

Summary

In this article, the Pentaho ChartBeans project was introduced. Pentaho ChartBeans presents a single API for many chart engines. It takes a novel approach to styling a chart by using CSS, taking full advantage of cascading and inheritance.

Related Items

1 Pentaho ChartBeans name is subject to change.
2 Be very careful when wading through the Pentaho ChartBeans developer documentation. It was created while Pentaho ChartBeans was being architected and therefore could have inaccurate information. We are in the process of bringing it up to date to reflect the current code.

  • No labels