Version 8.3.4
 —  Special Development Topics  —

Creating Simple Charts Quickly Using the PIVOT Control

The PIVOT control offers an easy way to create interactive pivot tables in a short period of time. All that is required is passing an array of data to the PivotChartInfo object which is the server-side representation of the PIVOT control.

This document covers the following topics:


Simple Example

Pivot

The XML layout definition is:

<pagebody>
  <rowarea name="Simple Pivot Chart Demo">
    <pivot pivotprop="pivot" height="390" showpdf="true">
    </pivot>
  <rowarea>
</pagebody>

The Java code of the adapter is:

PIVOTInfo  m_pivot = new PIVOTInfo(this);
public PIVOTInfo getPivot() { return m_pivot; }
public void setPivot(PIVOTInfo value) { m_pivot = value; }

/** initialization - called when creating this instance */
public void init()
{
  PIVOTDataArray pda = new PIVOTDataArray
  (
    new String[] // Column Headers 
    {
      "Country","Product","Region","Revenue","Pieces"
      },
    new String[][] // Column Content
    {
      { "D","Laptop","WHOLE","100","10" }, 
      { "D","PC","WHOLE","110","20" }, 
      { "US", "Laptop","CA","120","10" },
      { "US", "Laptop","MI","130","40" },
      { "US", "Laptop","NY","100","33" },
      { "US", "Laptop","OR","110","45" },
      { "US","PC","CA","120","31" },
      { "US","PC","MI","130","32" },
      { "US","PC","NY","78","25" }, 
      { "US","PC","OR","115","43" }
      }
  );

  pda.setGroupColumns(new int[] {0,1,2});
  pda.setDataColumns(new int[] {3, 4});

  m_pivot.setComputedValueType(m_pivot.COMPUTE_SUM);
  m_pivot.setPivotData(pda);
}

The PIVOT control is represented by an PIVOTInfo object on the adapter side. When you look at the constructor, you will see that the PIVOInfo constructor needs a valid adapter, that is new PIVOTInfo(this).

To generate a simple pivot table, you just need to fill a PIVOTDataArray object with two string arrays. The first string arry contains the column headers (that is "Country", "Product", "Region", "Revenue" and "Pieces"). The second string array holds the contents of the rows.

In this simple example, the third row contains the following data: "US", "Laptop", "CA", "120" and "10".

The server needs to know which columns contain data that are relevant for sorting and which columns only contain descriptional information that can be used for grouping the columns.

In this example, the first three columns are the so-called "group columns" which only contain descriptional information. You define these three group columns as follows:

pda.setGroupColumns(new int[]{0,1,2});

You define the columns which contain the data in a similar way:

pda.setDataColumns(new int[] {3, 4});

There are different ways of sorting or grouping the PIVOT table. The default value is COMPUTE_SUM. You can change this value dynamically using the setComputedValueType( ) method. Valid values for this method are:

Constant Value
COMPUTE_SUM 0
COMPUTE_AVERAGE 1
COMPUTE_MAX 2
COMPUTE_MIN 3
COMPUTE_COUNT 4

You can change the detail of the corresponding level of each group by simply clicking in the pivot table:

Pivot

The first row now just shows the sum of data group "D"; and within the data group "US", the "Laptop" group also just shows the sum.

Top of page

Properties

Basic
pivotprop

Name of adapter property that represents the pivot report on server side. Must be of type "PIVOTInfo".

Obligatory  
height

Height of the control.

There are three possibilities to define the height:

(A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content.

(B) Pixel sizing: just input a number value (e.g. "20").

(C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

Obligatory

100

150

200

250

300

250

400

50%

100%

showpdf

If set to "true" then a PDF icon is rendered in the right top corner of the control. When the user clicks on the icon then the report is automatically rendered as PDF - and the result will show up in a popup window.

Pay attention: if setting this property to "true" then you also have to choose a special constructor when creating the REPORTInfo instance on server side, in which the instance of the model is passed as argument.

Example:

public class XYZAdapter extends Adapter

{

REPORTInfo m_report = new REPORTInfo(this)

...

}

Optional

true

false

areastyle

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Optional

background-color: #FF0000

color: #0000FF

font-weight: bold

Top of page