Creating a scrollable chart

In a scrollable chart, values displayed on the chart are not fixed. A scrollbar on the scrollable chart can help you to control the visible value range on the X axis of the chart. This is often used where the X axis is a date or a time such as stock quotes; however, it can be used with any type of value. As shown below, any time the number of categories may become too large to be easily identified on the screen, consider adding a scrollable option.

Currently, scrollable charts are supported on charts of bar, bench, line, and area types in web reports and library components only.

To make a chart of bar, bench, line, or area type scrollable:

1. Right-click anywhere of the chart except the chart object and select Scrollable Chart from the shortcut menu to display the Scrollable Chart dialog. See the dialog.

   

2. Check the Enable Scrollable Chart option to specify to use a scrollbar to control the number of visible values on the axis.
3. Specify how many data items will be selected on the scrollbar and displayed on the axis by default in the Number of Visible Values box, then specify the percentage the scrollbar occupies the whole size of the chart.
4. Specify whether to show the thumbnail chart in the scrollbar.
5. Specify whether to recalculate the scale of Value (Y) Axis when the the value of the option Number of Visible Values is changed.
6. Click OK to apply the settings for the chart.

Example of creating a scrollable chart

The following example shows how to create a scrollable chart:

1. Open the catalog file JinfonetGourmetJava.cat in <install_root>\Demo\Reports\TutorialReports.
2. Click File > New > Web Report on the menu bar.
3. Drag Chart from the Toolbox panel to the web report to bring out the Create Chart wizard.
4. In the Data screen of the wizard, select WorldWideSalesBV from Data Source 1. Then click Next.
5. Select Clustered Bar 2-D type in the Type screen.
6. In the Display screen, add the field City to the Category box, and add Total Sales to the Show Values box.
7. Switch to the Style screen and select Neutral as the report style from the Style list.
8. Click Finish to create the scrollable chart.
9. Click the View tab to view this chart, and it appears as follows:

   

10. Click the Design tab to return to the design mode.
11. Right-click anywhere of the chart except the chart object and select Scrollable Chart from the shortcut menu. The Scrollable Chart dialog appears.
12. Check the Enable Scrollable Chart option, then set the option Number of Visible Values to 10 and Percentage of Scrolling Area Height to 10%. Then, click OK to apply the settings and leave the dialog.
13. The option Auto Scale on Y Axis is checked by default, which means the scale of Value (Y) axis will be recalculated when the the value of the option Number of Visible Values is changed.
14. Save the report and click View > Preview As > Web Report Result on the menu bar, the report will show as follows in Web Report Studio:

    

15. From the report result above, we can see only 10 total sales values from the city Almaty to Boston. To change the data items displayed on the X axis, drag the left or right handle or the area between the two handles on the scrollbar. See the result as follows: