BackPrevious Page Next PageNext

Inserting Components

Inserting a table

Inserting a crosstab

Inserting a chart

Inserting a KPI component

Inserting a label

Inserting an image

Inserting a multimedia object

Inserting a web control

Inserting a special field

You can insert components into a web report via the Components panel on the left of the Web Report Studio window.

The following table lists the report areas that are valid targets for the various components:

 
Report Layout Area
Component Page Header/Footer Report Body Tabular Cell Table Cell
Chart Y Y Y N
Crosstab Y Y Y N
Table Y Y Y N
KPI component Y Y Y N
Label Y Y Y Y
Image Y Y Y N
Multimedia object Y Y Y N
Web control Y Y Y N
Group object Y Y Y Y
Detail object Y Y Y Y
Aggregation object N Y N Y
Formula Y Y Y Y

Inserting a table

The procedure for inserting tables in a web report varies with the way with which you use to access Web Report Studio: quick start way or standard way.

To insert a table when Web Report Studio is in the quick start way:

  1. Drag Drag to add table button from the visualization toolbar or Table from the Components panel to the destination where you want to insert the table.
  2. In the Select Data Source dialog, select a business view and define the table as required.
  3. Click OK to insert the table.

To insert a table when Web Report Studio is in the standard way:

When Web Report Studio is in the standard way, you can choose the table type as you want: Group Above, Group Left, Group Left Above or Summary Table.

Inserting a crosstab

  1. Drag Crosstab from the Components panel or Drag to add crosstab button from the visualization toolbar to the destination where you want to insert the crosstab. The Insert Crosstab dialog appears.

    Insert Crosstab dialog

  2. Specify a title for the crosstab in the Crosstab Title text box, and if required, click Font button to set the font properties for the title.
  3. From the Data Source drop-down list, select the business view in the current catalog on which to create the crosstab. If required, click the Filter button to add some filter conditions to the business view to narrow down data displayed in the crosstab.
  4. From the Resources box, select a group object Group Object and click Add Item button or Add Row button to add it to the Columns or Rows box as a group field. In the Label column, edit the display name of the group field if required, which will label the crosstab column/row. In the Sort column, specify the sorting manner for the group.
  5. Select an aggregation object Aggregation Object or a detail object Detail Object and click Add Summary button to add it to the Summaries box as an aggregate field to summarize data in the crosstab. If a detail object is added, specify the aggregate function for it in the Aggregation column. In the Label column, edit the display name of the aggregate field, which will label the crosstab summaries. If necessary, you can specify a comparison function for the aggregate field.

    To specify a comparison function for an aggregate field:

    1. Select the aggregate field in the Summaries box and click the Comparison Function button. The Comparison Function dialog appears.

      Comparison Function dialog

    2. From the Function drop-down list, select the required function: Percentage, Permillage or Difference.
    3. Specify a position for the comparison function.
      • Comparison Function Spans on Row Direction
        The comparison function will be placed into the column total cell of the crosstab.
      • Comparison Function Spans on Column Direction
        The comparison function will be placed into the row total cell of the crosstab.
    4. Numbers that form the calculation of the comparison function are determined by the Break by and Refer to drop-down lists.

      Items in the Break by drop-down list vary with the position of the comparison function. It specifies the first parameter of the comparison function: the aggregate field or a subtotal.

      All available items are displayed in the Refer to drop-down list according to what you have selected from the Break by drop-down list. These items are outer group subtotals and the grand total. Select one as the other parameter of the comparison function.

    5. Click OK and you can see that a new field is added into the Summaries box. Set the display name for the field in the Label column as required.
  6. Add more fields to display in the crosstab. If you want to remove any field, select it and click Delete button. To adjust the order of the fields, select a field and click Move Up button or Move Down button.
  7. Click OK to insert the crosstab.

Tip: When you create a crosstab with wizard, by default there will be no labels generated for its columns, rows and summaries (the Label columns in the Columns, Rows and Summaries boxes of the wizard are blank by default). You can make JReport automatically provide the labels which by default are the display names of the added objects by setting the profile options Add Labels for Crosstab Rows and Columns and Add Labels for Crosstab Summaries. You can also customize the profile option Display Crosstab Summaries Vertically to make the summaries in crosstabs displayed horizontally in Web Report Studio.

Inserting a chart

Normally, a chart displays values in a static way and you cannot change the values on it once it is created. However, JReport provides you with options to make the chart interactive and dynamic. For example, if your data source uses data that changes quickly over time such as stock market values, you can create a real time chart, so that the chart will update itself based on a defined interval by using the real time data from the data source. You can make a chart move at runtime based on the value changes of a motion field by creating a motion chart. In a motion chart, the chart is playable. You can start or stop the chart to play the dynamic trend of the motion field, control the moving speed of the chart, and if you create a bubble motion chart, you can even use a trail control to make the chart move showing a bubble or line trail.

In Web Report Studio, when you create a chart, you can choose to make it a common chart, an organization chart, a heat map, a real time chart, or a motion chart.

To create a common chart:

  1. Drag Chart from the Components panel or a chart icon from the visualization toolbar to the destination where you want to insert the chart. The Insert Chart dialog appears.

    Insert Chart dialog

  2. Specify a title for the chart in the Chart Title text box, and if required click Font button to set the font properties for the title.
  3. From the Data Source drop-down list, select the business view in the current catalog, on which the chart will be built. If required, click the Filter button to add some filter conditions to the business view to narrow down data displayed in the chart.
  4. To create a single chart, in the Primary Axis box, select the required chart type from the chart type drop-down list.

    To create a combo chart, click Add Combo Chart above the Primary Axis box and an additional chart type will be added. You can replace the additional chart type by selecting the required one from the chart type drop-down list. Repeat this to add more chart types. Check the Secondary Axis checkbox if you want to have the secondary axis (Y2) and define the chart types on the axis as required. To delete a type, select it and click Delete button.

  5. In the Primary Axis or Secondary Axis box, select a chart type and add an aggregation object Aggregation Object, a numeric detail object Detail Object, or an additional value Additional Value as the data of the type. You can add more than one data field to a chart type. Each added chart type shall have at least one data field.

    If you select a bubble chart type, you need to specify the fields to be shown on the bubble X axis, Y axis and the value you want to show as the bubble size in the value box. Note that when you specify a value for the bubble X axis, this value will be displayed on the category axis instead of the one specified in the Bubble box. However, the value defined in the Bubble box will also be included in data calculation.

    To add an additional value to a chart type:

    1. Select the chart type in the value box.
    2. In the Resources box, expand the Additional Values node, then select Constant Value/Average Value.
    3. Click Add Item button beside the value box. The Edit Additional Value dialog appears.
    4. In the Name text box, specify the display name for the constant/average value.
    5. Input the constant value with numeric type in the Value text box, or select a field based on which the average value will be calculated from the Based On drop-down list.
    6. Click OK, and the defined constant/average value will be added to the chart type.

      To modify a constant/average value, select the value in the value box, then click Edit button. In the Edit Additional Value dialog, edit the value as required.

  6. Select a group object Group Object or a detail object Detail Object in the Resources box and add it to the category box. Add a group object Group Object to the series box. The data of the objects will be displayed on the corresponding axis. The names of the two boxes for the axes vary with different chart types, for example, the actual names are X-Axis and Clustering for a clustered bar chart.
  7. If you want to define some sort order and Select N condition on the category or series field, click Category/Series Options above the category or series box, then define the order and condition in the Category/Series Options dialog.

    To define a sort order and Select N condition on the category/series field:

    1. In the Category Order box of the Category Options dialog/Series Order box of the Series Options dialog, specify in which order values of the category/series field will be sorted.

      Category Options dialog

    2. In the Category/Series Selection box, specify the Select condition to All, Top N or Bottom N. If All is selected, all category/series values will be shown in the chart; if Top N or Bottom N is selected, the text box next to it will be enabled and you can specify an integer here, which means that the first or last N category/series values will be shown in the chart.
    3. Check the Based On checkbox and specify values for the two drop-down lists that follow according to your requirement.

      If Based On is unchecked, the order of the first or last N category/series values will be based on what you specify in the Category/Series Order box of the dialog; if you check it, the order will be based on values of the summary field and the sort direction you specify in the drop-down lists next to Based On.

    4. If you have selected Top N or Bottom N from the Select drop-down list, you can check the Remaining Categories/Series In checkbox and then type a character string in the text box, so that the category/series values beyond the first or last N range will be merged into the group with the name as that character string.
    5. If you are specifying the Order/Select N condition for the category field, you can also check Overall Series to calculate the top or bottom N category values based on the series values.
    6. If necessary, you can input a number M in the Skip First text box, then the first M category/series values will be skipped and the Select N condition will begin with M+1. The skipped values will be merged into the Remaining Categories/Series group.
    7. Click OK to accept the settings.
  8. Click OK to insert the chart.

To create an organization chart:

Organization chart, also referred to as org chart, is a one-root-node-tree-structure diagram showing the ownership or reporting to relations among the nodes which are mapped to a specific entity.

  1. Repeat the above steps 1 to 4 for creating a common chart.
  2. In the Primary Axis box, select the Org chart type.
  3. Select Node in the value box, next select a group object or a detail object from the Resources box, and then click Add Item button to add it for defining the entities the org chart nodes are mapped to. To remove an added object, select it and click Delete button.
  4. Select Parent in the value box, next select a group object or a detail object from the Resources box, and then click Add Item button to add it for defining the ownership or reporting to relations among the entity members. For example, if the child node field is Employee ID, the parent field can be the one about IDs showing which employ ID reports to which employ ID. Note that the parent field should use a different one from the child node field. To remove an added object, select it and click Delete button.
  5. The properties panel displays a node model in the org chart. You can add group objects , detail objects , dynamic formulas that are used as group or detail objects, labels, and images from the Resources box into the node by using the Add Item button button and then adjust their positions and sizes in the node and the size of the node if required. Those added objects will be displayed in each node as the information about the entity members. To remove an added object, select it and click Delete button.
  6. Click OK to insert the chart.

To create a heat map:

Heat map is composed of rectangles marked by colors and sizes. The rectangles are grouped by group fields. Each rectangle represents a value of a group field or a combination of values of multiple group fields.

  1. Repeat the above steps 1 to 4 for creating a common chart.
  2. In the Primary Axis box, select the Heat Map chart type.
  3. Add group objects to group the data into the Area box one by one. Use Move Up button and Move Down button to adjust the order of the groups. To remove a group field, select it and click Delete button.
  4. If you want to define the sort order and Select N condition on a group field, click Group Options above the Area box. In the Group Options dialog, specify the order and condition in the same way you do to the category/series field.
  5. Add aggregation objects Aggregation Object into the Property box.
  6. From both Area and Property boxes, specify the fields to do color-by and size-by, and select the fields to display in the innermost rectangle in the heat map via the Label By column.

To create a real time chart:

Real time chart is supported on single bar, bench, line, and area chart types.

  1. Repeat the above steps 1 to 4 for creating a common chart.
  2. In the Primary Axis box, select a chart type of bar, bench, line, or area, then add the detail objects Detail Object or group objects Group Objectof numeric type as the data of the type.
  3. Check the Real Time checkbox.
  4. By default, Use System Time for Category is checked and you can see the text Use System Refresh Time is displayed in the category box, which means the time at which the chart refreshes itself will be used as the category value. You can uncheck the Use System Time for Category option and add another group object Group Object to be displayed on the category axis. If you want to define some sort order and Select N condition on the category field you specify, click Category Options above the category box, then define the order and condition in the Category Options dialog.
  5. Specify the time interval at which the chart will get data and refresh itself automatically in the Refresh Interval text box.
  6. Specify the most recent N records to be kept for the real time data on the chart in the Show Most Recent text box.
  7. Click the Incremental Fetch button to add the fields you want to use as the unique key of the real time chart in the Unique Key dialog.

    Once a unique key is defined, each time when the real time chart automatically updates itself, duplicated data records will be filtered out based on the unique key. For instance, if you add the fields Country and Product ID as the unique key of a real time chart, when a record with the product ID 1 in USA has already been loaded into the chart, no more records of this product ID in USA will be added to the real time chart because they have the same unique key value.

  8. Click OK to insert the chart.

To create a motion chart:

Motion chart is supported on single chart of bar, bench and bubble types.

  1. Repeat the above steps 1 to 4 for creating a common chart.
  2. In the Primary Axis box, select a chart type of bar, bench or bubble, then add the required aggregation objects Group Object or additional values Additional Valueas the data of the type.

    If you select a bubble chart type, you need to specify the fields to be shown on the bubble X axis, Y axis and the value you want to show as the bubble radius in the value box. Note that when you specify a value for the bubble X axis, this value will be displayed on the category axis instead of the one specified in the Bubble box. However, the value defined in the Bubble box will also be included in data calculation.

  3. Select a group object Group Object in the Resources box and add it to the category or series box, the data of which will be displayed on the corresponding axis.
  4. If you want to define some sort order and Select N condition on the category or series field you specify, click Category/Series Options above the category or series box, then define the order and condition in the Category/Series Options dialog.
  5. Check Motion Bar for Playable Chart, add a group object Group Objectof Integer, Date or Time type as the motion field. When the element is of the Date data type, you can define some special function for it by clicking the Special Function button.
  6. Click OK to insert the chart.

When a motion chart is created, you can use the motion control section to make the chart move. Click the play button and the chart will show its dynamic trend based on the value change of the motion field which is bound in the motion bar. To stop it, click the button again. You can also control its moving speed by dragging the slider between Slow and Fast on the speed control. For a bubble chart, you can control whether the chart will be moving in bubble or line trail.

See also:

Inserting a KPI component

  1. Drag KPI from the Components panel or drag KPI button from the visualization toolbar to the destination where you want to insert the KPI component.
  2. In the Select Data Source dialog, select a data source and then a business view in the current catalog to bind with the KPI component. Click OK.

    Select Data Source for KPI Component dialog

  3. A blank KPI component is inserted in the report. You can now define the KPI component by adding objects into it.

    Blank KPI template

  4. Drag an aggregation object Aggregation Object or a formula from the Resources panel as the KPI value. The name label of the object is added in the KPI component at the same time. Edit the label text if needed.
  5. Insert a KPI chart to demonstrate data about the KPI value.
    1. Right-click in the blank area of the KPI component and then select Insert KPI Chart from the shortcut menu. The Insert Chart dialog appears.
    2. Specify a title for the chart in the Chart Title text box, and if required click Font button to set the font properties for the title.
    3. The Data Source drop-down list shows the business view bound with the KPI component. It cannot be changed.
    4. Select the type for the KPI chart. Only the following chart types are supported for a KPI chart: Bar, Bench, Line, Area, Pie, and Bullet.
    5. Define the KPI chart in the same way you would do for a normal chart.
    6. Click OK. A chart is now inserted into the KPI component.
  6. Add more aggregation, formulas, labels or images into the KPI component if required.
  7. Resize the KPI component and the objects in it and adjust the position of the objects by dragging to improve the layout.

See also KPI Components in the JReport Designer User's Guide for a KPI example.

Inserting a label

  1. Drag Label from the Components panel to the destination.
  2. Double-click the label, when the text box becomes editable input the desired text.
  3. Click outside of the label to apply the change.

Inserting an image

  1. Drag Image from the Components panel to the destination where you want to insert the image. The Insert Image dialog appears.

    Insert Image dialog

  2. Specify the image you want to insert.
  3. Click OK to insert the image.

Inserting a multimedia object

  1. Drag Multimedia Object from the Components panel to the destination where you want to insert the multimedia object. The Insert Multimedia dialog appears.

    Insert Multimedia dialog

  2. Choose from the three multimedia object types: Flash, Real Media file, or Windows Media File.
  3. In the File Name/URL text box, specify the full path of the multimedia object you want to insert or use the Browse button to find it if it is on your local disk. Or you can provide a URL for loading it from a website.
  4. The Plug-in page text box provides a default URL from which to download the player to play the inserted multimedia object on a web page.
  5. In the Properties box, specify the properties for the multimedia object as required.
  6. Click OK to insert the multimedia object.

Inserting a web control

You can insert the following web controls into a web report: parameter control, parameter form control, filter control, and navigation control. For details, see Using Web Controls.

Inserting a special field

To insert a special field into a web report, just drag the special field from the Components panel to the destination in the report.

BackPrevious Page Next PageNext