Inserting components

You can insert components into a web report via the Insert menu or 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.

The following shows inserting a specific component in detail:

Inserting a table

To insert a table into a web report:

1. Locate the place in the report where you want to insert the table.
2. Click Menu > Insert > Table, or drag Table from the Components panel to the destination. The Insert Table dialog appears. See the dialog.

   

3. Specify a title for the table in the Table Title text field, and if required, click to set the font properties for the title.
4. From the Data Source drop-down list, select the business view in the current catalog, on which the table 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 table.
5. Select the required table type: Group Above, Group Left, Group Left Above, or Summary Table.
6. In the Display tab, add the required fields from the Resources box to be displayed in the table. Specify the display name of any added field in the Label column if necessary. You can also specify how data in the table will be sorted.

   To set the sort manner:

   1. Click the Sort Fields By button to display the Custom Sort dialog. See the dialog.

      

   2. Select a field as the sort by field from the Resources box and click to add it to the Sort By column.
   3. Select a sort order, Ascend or Descend, from the Sort drop-down list.
   4. Repeat above two steps to add more fields as the sort by fields if needed.
   5. Click or to adjust the order of the sort by fields.
   6. Click OK to accept the sort criteria.
7. In the Group tab, add the group objects as the grouping criteria, then specify the sorting manner of each group in the Sort column. To adjust the order of the groups, select a group and click or .
8. To add summaries, go to the Summary tab. Select the group to which the summary will be applied, then add an aggregation object as the summary field. For the Group Left table, you can use the Row and Column columns to control the position of the summary field in the table.
9. Click OK to insert the table.

Inserting a crosstab

To insert a crosstab into a web report:

1. Locate the place in the report where you want to insert the crosstab.
2. Click Menu > Insert > Crosstab, or drag Crosstab from the Components panel to the destination. The Insert Crosstab dialog appears. See the dialog.

   

3. Specify a title for the crosstab in the Crosstab Title text field, and if required, click to set the font properties for the title.
4. From the Data Source drop-down list, select the business view in the current catalog, on which the crosstab 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 crosstab.
5. From the Resources box, select a group object and click or to add it to the Columns or Rows box as a group field. Then, in the Label column, edit the display name of the group object if required. This will label the row/column when the report is displayed. By default the Label column is blank and no label will be created for the row/column. In the Sort column, specify the sorting manner for the group field.
6. Select an aggregation object or a numeric detail object and click to add it to the Summaries box as an aggregate field. 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 as required.
7. Repeat this to add more group/aggregate fields. If you want to remove any field, select it and click . To adjust the order of the fields, select a field and click or .
8. Click OK to insert the crosstab.

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. Locate the place in the report where you want to insert the chart.
2. Click Menu > Insert > Chart, or drag Chart from the Components panel to the destination. The Insert Chart dialog appears. See the dialog.

   

3. Specify a title for the chart in the Chart Title text field, and if required, click to set the font properties for the title.
4. 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.
5. 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 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 .

6. In the Primary Axis or Secondary Axis box, select a chart type and add an aggregation object or an 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 radius in the Show Values 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 Category box. However, the value defined in the Category box will also be included in data calculation.

   To add an additional value to a chart type:

   1. Select the chart type in the Show Values box.
   2. In the Resources box, expand the Additional Values node, then select Constant Value/Average Value.
   3. Click beside the Show Values 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 Show Values box, then click . In the Edit Additional Value dialog, edit the value as required.

7. Select a 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.
8. If you want to define some sort order and Select N condition on the category or series field, click 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/Series Order box of the Category/Series Options dialog, specify in which order values of the category/series field will be sorted. See the 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 field 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 field, 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 check Skip First, and then input a number M in the text field to the right, 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.
9. 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 Child in the Org, next select a field from the Resources panel, and then click to add the field for defining the entity.
4. Select Parent in the Org, next select a field from the Resources panel, and then click to add the field for defining the ownership or reporting to relations among the entity members. For example, if the child 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 different one from the child field.
5. The properties panel displays a node model in the org chart. You can add objects including data objects, labels, and images from the Resources panel into the node by using the 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.
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 type.
3. Add the fields used to group the data into the Groups box one by one. Use and to adjust the order of the groups. To remove a group field, select it and click .
4. If you want to define some sort order and Select N condition on a group field, click above the Groups box. In the Group Options dialog, specify the order and condition in the same way you do to the category/series field.
5. Add proper summaries into the Summaries box.

   The summaries should match the groups. For example, if the groups level is A > B > C, the static summaries grouped by C can be inserted into the Summaries box, but the static summaries grouped by A, B or other fields cannot.

   If no group is specified in the Groups box, you can insert any static summary. And its group-by field will be inserted into the Groups box automatically.

6. From both Groups and Summaries boxes, specify the fields to do color by and size by, and select the fields as label-by fields to display in the innermost rectangle in the heat map.

To create a real time chart:

Real time chart is supported on singe 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 or group objects of 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 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 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 field.
6. Specify the most recent N records to be kept for the real time data on the chart in the Show Most Recent text field.
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 or additional values as 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 Show Values 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 Category box. However, the value defined in the Category box will also be included in data calculation.

3. Select a 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 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 of 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:

• How data is represented in a chart in the JReport Designer User's Guide for how charts present data.
• Chart elements in the JReport Designer User's Guide for the elements that compose a chart.
• Chart types in the JReport Designer User's Guide for more information about the chart types.
• Creating a real time chart in the JReport Designer User's Guide for real time chart example.
• Creating a motion chart in the JReport Designer User's Guide for motion chart example.

Inserting a label

To insert a label into a web report, locate the place in the report where you want to insert the label, then click Menu > Insert > Label, or drag Label from the Components panel to the destination. The label will then be inserted in the specified location.

Inserting an image

To insert an image into a web report:

1. Locate the place in the report where you want to insert the image.
2. Click Menu > Insert > Image, or drag Image from the Components panel to the destination. The Insert Image dialog appears. See the dialog.

   

3. Specify the image you want to insert.
   • To use an image in the local file system, select Local File, then click Browse to find the image.
   • To use an image on a website, select Web URL, then input the image URL or paste the URL in the Image URL text field.
   • To use an image in the image library of Web Report Studio, select Library, then select the image in the My Images box.
4. Click OK to insert the image.

Inserting a multimedia object

1. Locate the place in the report where you want to insert the multimedia object.
2. Click Menu > Insert > Multimedia Object, or drag Multimedia Object from the Components panel to the destination. The Insert Multimedia dialog appears. See the dialog.

   

3. Choose from the three multimedia object types: Flash, Real Media file, or Windows Media File.
4. In the File Name/URL text field, 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.
5. The Plug-in page text field provides a default URL from which to download the player to play the inserted multimedia object on a web page.
6. In the Properties box, specify the properties for the multimedia object as required.
7. 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, do either of the following:

• On the Menu > Insert > Special Fields submenu, click the target special field, User Name for example, then point to the destination where you want to add the special field and click the mouse button.
• Drag the special field from the Components panel to the destination in the report.