Page Comparison

...

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 This design will be referred to 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 This design will be referred to as the ChartDocument API.

Tale of Two APIs

...

Example from a Java Developer Perspective

Let's use In this example Pentaho ChartBeans is used 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 is created consisting of 21 rows and 3 columns. In addition, we add This example also adds some row and column metadata.

  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 This example adds 21 series to the plot which in turn gets added to the chart.

...

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

Generating Charts

Now let's pull all of the pieces can be pulled together. First we have there is 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 is rendered using the JFreeChart plugin for Pentaho ChartBeans and then we render another chart is rendered using the Open Flash Chart plugin for Pentaho ChartBeans. Note that both use the same ChartModel and ChartTableModel.

  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 one specifies the plugin class in the first line?

...

The Open Flash Chart example is a little more complicated because we have to embed the chart data must be embedded 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 is written to a String which contains the JSON that will configure the Open Flash Chart object when rendered by the browser.

...

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 is shown that queries using MQL to get the data and then renders a chart using Pentaho ChartBeans.

...

Chart Data

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

...

The ChartBeans XML document for this example is below. Its relatively brief because our the 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.

...

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

...

¹ Pentaho ChartBeans name is subject to change.
² 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 Pentaho developers are in the process of bringing it up to date to reflect the current code.