Page Comparison

Wiki Markup
{scrollbar}

The Pentaho BI platform currently employs JFreeChart as its charting engine.

Component Name: ChartComponent

The ChartComponent is a BI component that can create a variety of charts including:

...

To successfully use this component, you will want to be familiar with the chart properties reference Chart Reference.

Inputs

REQUIRED INPUTS

chart-data

...

Note

title	The Chart Component and Design Studio

While you can access the chart component through Design Studio's graphical UI, Design Studio does not provide a nice interface for defining all of your properties yet, nor does it provide the appropriate UI for determining how and where you are going to specify your chart properties (as an input or resource - Design Studio puts the chart-attributes element in the component definition by default). These enhancements will come (or you can contribute them!), but for now, you will need to use the XML editing tab of the action sequence to add your chart properties.

Chart Attributes as an Input

You can specify your chart properties as a String input parameter. The caveat to this input is that the chart properties need to be represented in the string in XML format, inside of a CDATA section.

...

Code Block

	xml
	xml
borderStyle	solid

<inputs>
    <attributes type="string">
      <sources>
        <request>attributes</request>
      </sources>
      <default-value>

      <![CDATA[

      <chart-attributes>
          <chart-type>BarChart</chart-type>
          <border-visible>false</border-visible>
          <is-clickable>false</is-clickable>
          <include-legend>true</include-legend>

          ... more chart attributes here ...

       </chart-attributes>

      ]]>

      </default-value>
    </attributes>
  </inputs>

   ...

  <action-definition>
       <component-name>ChartComponent</component-name>
      <action-type>Bar Chart</action-type>
      <action-inputs>
         <chart-data type="result-set" mapping="query_result"/>
          *<chart-attributes type="string" mapping="attributes"/>*
      </action-inputs>

   ...

Chart Attributes as a Resource

You can place the chart-attribute XML in a file, then reference that file as a resource in your action sequence.

The resource reference name in the chart component must be chart-attributes. The XML in the file is the chart-attribute XML you would find as an input or as a part of the component definition, starting with a root node of <chart-attributes>. PentahoDoc:Click here for an example of a file containing valid chart-attribute XML.

...

Code Block

	xml
	xml
borderStyle	solid


 
 
<resources>
    <chart_resource>
      <solution-file>
        <location>testchart.xml</location>
        <mime-type>text/xml</mime-type>
      </solution-file>
    </chart_resource>
  </resources>


   <actions> 


     ...

    <action-definition>
       <component-name>ChartComponent</component-name>
      <action-type>Bar Chart</action-type>
       ...
       <action-resources>
        <chart-attributes type="resource" mapping="chart_resource"/>
      </action-resources>

   ...

Chart Attributes in the Component Definition

By default, the Design Studio will put the chart-attributes XML node in the component definition. This in-line mode of describing the chart is fine, but can be problematic if you want to dynamically add or change a chart property in the process of your action sequence. Which is why we added the ability to define the chart properties in a resource or input definition.

...

Code Block

	xml
	xml
borderStyle	solid


   <action-definition>
       <component-name>ChartComponent</component-name>
      <action-type>Bar Line Chart</action-type>

       ...

      <component-definition>
        <chart-attributes>
           <chart-type>BarLineChart</chart-type>
            <border-visible>true</border-visible>  
          <include-legend>false</include-legend> 
           <is-3D>false</is-3D>  
          <markers-visible>false</markers-visible>  

          ... more chart attributes here ...

        </chart-attributes> 
       </component-definition>
     </action-definition>

OPTIONAL INPUTS

The following are additional properties that you can specify for the chart as inputs, or as part of the component-definition. Many of these properties duplicate properties that you can set inside of the chart definition (chart-attributes string or file). When these duplicate properties are set as inputs or as part of the component-definition, they override any identical property that exists in the chart-attributes. The hierarchical nature of these properties allows you to dynamically set and override a value, yet also have a default in the chart-attributes.

...

series-name
A replaceable parameter for the URL template. Typically, the series name from the drill point in the chart; also referred to as ParamName2 in some docs.

Outputs

The ChartComponent can return both the chart and its image map (if drill URLs are defined via the URLTemplate) several different ways. Here are the legitimate outputs you can specify, and what the result of each is:

CHART_OUTPUT (<chart-output type="content"/>)
- Stores the chart in the content repository for use in a subsequent action or process, or displays if the output destination is response and the name is content.
CHART_FILE_NAME_OUTPUT (<chart-filename type="string"/>)
- Returns the name of the chart file, including the file extension (with no path information) as a String.
HTML_MAPPING_OUTPUT (<chart-mapping type="string"/>)
- Returns the name of the file that the map has been saved to, including the file extension (with no path information) as a String.
HTML_MAPPING_HTML (<chart-map-html type="string"/>)
- Returns the chart image map HTML as a String.
BASE_URL_OUTPUT (<base-url type="string"/>)
- Returns the web app's base URL (ie., http://localhost:8080/pentaho) as a String.
HTML_IMG_TAG (<image-tag type="string"/>)
- Returns an HTML snippet including the image map, image (<IMG />) tag for the chart image with src, width, height and usemap attributes defined.
- If "image-tag=" appears in the the chart output, include "wrapper=false" in the URL to remove it.

Example Action Sequence

The following action sequence uses the output from a SQL lookup rule ( a Relational data source) as the input for a ChartComponent. See the Chart Tag Properties Reference for an explanation of the chart attributesproperties.

Code Block

	xml
	xml
title	Sample Chart.xaction

<action-sequence>
  <name>Chart.xaction</name>
  <title>Default Title</title>
  <version>1</version>
  <logging-level>DEBUG</logging-level>
  <documentation>
    <author>William E. Seyler</author>
    <description>Default Description</description>
    <icon>JFree-quadrant-budget-hsql.png</icon>
    <help>Help</help>
    <result-type>rule</result-type>
  </documentation>
  <inputs>
    <chart-type type="string">
      <default-value>.png</default-value>
      <sources>
        <request>type</request>
      </sources>
    </chart-type>
  </inputs>
  <actions>
    <action-definition>
      <action-outputs>
        <result-set type="list" />
      </action-outputs>
      <component-name>SQLLookupRule</component-name>
      <action-type>rule</action-type>
      <component-definition>
        <source>sql</source>
        <live>true</live>
        <jndi>SampleData</jndi>
        <query>
          <![CDATA[select QUADRANT_ACTUALS.REGION, QUADRANT_ACTUALS.DEPARTMENT,
            QUADRANT_ACTUALS.POSITIONTITLE, QUADRANT_ACTUALS.ACTUAL, QUADRANT_ACTUALS.BUDGET
            from QUADRANT_ACTUALS order by QUADRANT_ACTUALS.REGION,QUADRANT_ACTUALS.DEPARTMENT]]>
        </query>
      </component-definition>
      </action-definition>
      <action-definition>
        <action-inputs>
          <output-type type="string" mapping="chart-type" />
          <result-output type="file" />
          <chart-data type="list" mapping="result-set" />
        </action-inputs>
      <action-outputs>
        <chart-output type="string" />
        <base-url type="string" />
      </action-outputs>
      <component-name>ChartComponent</component-name>
      <action-type>report</action-type>
      <component-definition>
        <by-row>false</by-row>
        <chart-attributes>
          <chart-type>PieChart</chart-type>
          <title>Actual vs Budget by Region</title>
          <title-position>TOP</title-position>
          <title-font>
            <font-family>Serif</font-family>
            <size>36</size>
            <is-bold>false</is-bold>
            <is-italic>false</is-italic>
          </title-font>
          <range-title>US Dollars</range-title>
          <chart-background type="color">#FFFFFF</chart-background>
          <plot-background type="color">#FF0000</plot-background>
          <orientation>Horizontal</orientation>
          <height>400</height>
          <width>800</width>
          <is-3D>true</is-3D>
          <is-stacked>false</is-stacked>
          <category-label-rotation>90</category-label-rotation>
          <border-visible>false</border-visible>
          <border-paint>#3399FF</border-paint>
          <include-legend>true</include-legend>
        </chart-attributes>
      </component-definition>
    </action-definition>
  </actions>
</action-sequence>

...

Versions Compared

Old Version 6

New Version Current

Key

Component Name: ChartComponent

Inputs

Chart Attributes as an Input

Chart Attributes as a Resource

Chart Attributes in the Component Definition

Outputs

Example Action Sequence