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.

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 the chart and select Format Axes > Format Category (X) Axis from the shortcut menu. The Format Category (X) Axis dialog appears.
12. In the Axis tab of the dialog, check the Scrollable Chart option, then set the option Scrollable Visible Values to 10 and Scrolling Area Percentage to 10%. Then, click OK to apply the settings and leave the dialog.
13. 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:

    

14. 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: