Chart Zooming

Version

Application Scenario

In some business reports, the displayed products often contain plenty of categories. Displaying all the data in one chart will appear cluttered and unattractive, and hinder effective comparison.

You may want to zoom in/out on charts by pinch-to-zoom. The following figure shows the effect.

You may want to view or zoom in/out on charts by moving zoomable axes. The following figure shows the effect.

You may want to view charts by moving scrollable axes. The following figure shows the effect.

Function Entry

You can set Chart Zoom under Special Effect > Interaction.

Note:

1. When you set Reversal to On under Special Effect > Interaction > Axis, Enable Zoom Widget is not available for selection.

2. When you preview FVS dashboards on mobile terminals, chart zooming cannot directly take effect in chart components. In this case, you can insert charts into table components to realize chart zooming.

1. If Enable Zoom Widget is deselected, the pinch-to-zoom prevails. In this case, you can set Zoom Direction, as shown in the following figure.

2. If Enable Zoom Widget is selected, the widget zoom prevails. In this case, you can set Widget Type:

• Zoomable Axis: When you select Zoomable Axis, you can set Widget Border to Adjustable or Nonadjustable and set initial left and right border values.

• Scrollable Axis: When you select Scrollable Axis, you can set Initial Category Quantity (when you set Type to Category Axis under Style > Axis > X Axis) or Zoom Ratio (when you set Type to Time Axis or Value Axis under Style > Axis > X Axis).

The following figure shows the effect.

Note:

You set only pinch-to-zoom for word clouds, structure charts, and mechanical bubble charts. Besides, you can set Zoom Direction to X/Y Axis or None for these charts.

1. Enable Zoom Widget is deselected by default. In this case, the pinch-to-zoom prevails.

2. You can set Zoom Direction to X Axis, Y Axis, X/Y Axis, or None.

• X Axis: You can only select horizontal areas based on the mouse movement during area selection by the mouse.

• Y Axis: You can only select vertical areas based on the mouse movement during area selection by the mouse.

• X/Y Axis: Zoom Direction is set to X/Y Axis by default. You can select any area based on the mouse movement during area selection by the mouse. You are advised to set Zoom      Direction to X/Y Axis in most cases.

• None: Chart zooming is not allowed.

Note:

When App Relayout is selected under Mobile Terminal > Mobile Attribute in FRM reports, you cannot zoom in/out on chart blocks by widget zoom, but you can zoom in/out in report blocks.

1. You can select Enable Zoom Widget. In this case, the widget zoom prevails.

2. You can set Widget Type.

• Zoomable Axis: When you select Zoomable Axis, you can set Widget Border to Adjustable or Nonadjustable and set initial left and right border values.

• Scrollable Axis: When you select Scrollable Axis, you can set Initial Category Quantity (when you set Type to Category Axis under Style > Axis > X Axis) or Zoom Ratio (when you set Type to Time Axis or Value Axis under Style > Axis > X Axis).

3. After you select Enable Zoom Widget, in addition to dragging the zoom widget itself, dragging within the drawing area will also trigger the zoom widget to move. The widget moves in the opposite direction of the dragging direction in the drawing area. For example, if you drag an area in the drawing area to the left, the widget will move to the right. So will the chart area.

The following figure shows the effect of dragging the widget.

The following figure shows the effect of dragging an area in the drawing area.

Zoomable Axis

Zoomable Axis: When you select Zoomable Axis, you can set Widget Border to Adjustable or Nonadjustable and set initial left and right border values.

1. Widget Border: Widget Border determines whether the widget can be moved or resized.

• When you select Adjustable, you can move and resize the widget.

• When you select Nonadjustable, you can move the widget, but cannot resize it. The length of the widget is determined by the initial left and right border values.

2. Initial border: You can set initial border values to determine the initial display range of charts.

• If you do not set initial left and right border values, all data will be displayed.

• If you set initial left and right border values, only data within the borders will be displayed.

Scrollable Axis

When you select Scrollable Axis, you can set Initial Category Quantity (when you set Type to Category Axis under Style > Axis > X Axis) or Zoom Ratio (when you set Type to Time Axis or Value Axis under Style > Axis > X Axis).

• When Type is set to Category Axis under Style > Axis > X Axis, you can set Initial Category Quantity. The default initial category quantity is 8. Namely, only the data of the first eight categories will be displayed in the chart.

• When Type is set to Time Axis or Value Axis under Style > Axis > X Axis, you can set Room Ratio. The default zoom ratio is 30%.

Template Creation

Create a general report, as shown in the following figure.

Data Preparation

Create a database query ds1. Enter the SQL statement: SELECT * FROM Sales_Volume, as shown in the following figure.

Chart Insertion

Merge required cells, click the Insert Chart icon, select Column Chart, and click OK, as shown in the following figure.

Data Binding

Select the column chart, bind the data to the chart, and set Data Source to Dataset Data, Dataset to ds1, and Category to Salesperson. Set Series Name to Field Name, and set Field Name to Sales_Volume, Series to Sales_Volume, and Summary to Sum, as shown in the following figure.

Not Displaying the Title

Select the column chart, choose Cell Element > Style > Title on the right, and deselect Show Title, as shown in the following figure.

Setting Chart Zooming

Select the column chart, deselect Enable Widget Zoom (default setting) to set chart zooming, and retain the default setting of Zoom Direction (namely, X/Y Axis), as shown in the following figure.

Effect Display

PC

Save the report and click Pagination Preview to preview the template. You can zoom in/out or restore the chart to the original state, as shown in the following figure.

• Zooming in: You can zoom in on an area by selecting the area in the chart area with the mouse. After zooming in, the selected area will be expanded to the entire drawing area. Besides, the labels on the Y axis are dynamically updated to show values after recalculation based on the current range.

• Zooming out: You can drag outward from either X-axis border to cover as many X-axis values as possible, enabling the zooming out of the original page.

• Restoration: You can restore the chart to the original state by clicking the Refresh icon.

Mobile Terminal

The chart can be previewed on both the DataAnalyst app and the H5 terminals. After long-pressing an area in the drawing area, you can drag the rectangular box. You can only zoom in or restore the chart to the original state. The following figure shows the effect.

Note:

1. When you preview general charts, charts in FRM report blocks, and chart blocks in FRM reports (layout retained) on mobile terminals, you need to long-press an area in the drawing area and drag the rectangular frame for selection. You can only zoom in or restore the chart to the original state.

2. When you preview chart blocks in FRM reports (relayout enabled) on mobile terminals, you can zoom in/out with two fingers in the drawing area. You can zoom in/out or restore the chart to the original state.

Template Creation

The procedure is the same as that shown in section "Template Creation" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Data Preparation

The procedure is the same as that shown in section "Data Preparation" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Chart Insertion

The procedure is the same as that shown in section "Chart Insertion" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Data Binding

The procedure is the same as that shown in section "Data Binding" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Not Displaying the Title

The procedure is the same as that shown in section "Not Displaying the Title" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Setting Chart Zooming

Select the column chart, select Enable Zoom Widget to set chart zooming, set Widget Type to Zoomable Axis, set Widget Border to Adjustable, set the left border values by entering the formula "John", and set the right border values by entering the formula "Adam", as shown in the following figure.

Note:

1. Since the chart in this example is a single-category column chart, you need to set left and right border values by entering formulas. (= will appear in the editing box after you enter a formula in the Formula Definition box.) For details about the multi-category chart example, see section "Example Four: Setting Initial Left and Right Border Values to Field Values of a Category for Widget Zoom of the Multi-Category Column Chart."

2. The writing methods of the left and right border values must be consistent with those of the category field values. Otherwise, the border values will not take effect.

Effect Display

PC

Save the report and click Pagination Preview. During the initial display, the length of the zoomable axis is determined by the initial left and right border values. You can move or resize the zoomable axis. The following figure shows the effect.

• Moving the zoomable axis: You can select the zoomable axis and move it to move the chart.

• Shortening the zoomable axis: You can select the zoomable axis and shorten it to zoom in on the chart.

• Extending the zoomable axis: You can select the zoomable axis and extend it to zoom out on the chart.

Mobile Terminal

The chart can be previewed on both the DataAnalyst app and the H5 terminals. During the initial display, the length of the zoomable axis is determined by the initial left and right border values. You can move or resize the zoomable axis. The following figure shows the effect.

• Moving the zoomable axis: You can select the zoomable axis and move it to move the chart.

• Shortening the zoomable axis: You can select the zoomable axis and shorten it to zoom in on the chart.

• Extending the zoomable axis: You can select the zoomable axis and extend it to zoom out on the chart.

Template Preparation

The procedure is the same as that shown in section "Template Creation" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Data Preparation

The procedure is the same as that shown in section "Data Preparation" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Chart Insertion

The procedure is the same as that shown in section "Chart Insertion" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Data Binding

The procedure is the same as that shown in section "Data Binding" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Not Displaying the Title

The procedure is the same as that shown in section "Not Displaying the Title" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Setting Widget Zoom

Select the column chart, select Enable Zoom Widget to set chart zooming, set Widget Type to Zoomable Axis, set Widget Border to Nonadjustable, set the right border values by entering the formula ds1.value(round(count(ds1.select("Salesperson"))/2,0),2), as shown in the following figure. (In this case, the first half of the data will be displayed.)

Note:

Since the chart in this example is a single-category column chart, you need to set left and right border values by entering formulas.  (= will appear in the editing box after you enter a formula in the Formula Definition box.) For details about the writing method for multi-category charts, see section "Example Four: Setting Initial Left and Right Border Values to Field Values of a Category for Widget Zoom of the Multi-Category Column Chart."

Effect Display

PC

Save the report and click Pagination Preview. You can move the zoomable axis to move the column chart, but you cannot resize the zoomable axis. The length of the zoomable axis is determined by the initial left and right border values. The following figure shows the effect.

Mobile Terminal

The chart can be previewed on both the DataAnalyst app and the H5 terminals. You can move the zoomable axis to move the column chart, but you cannot resize the zoomable axis. The length of the zoomable axis is determined by the initial left and right border values. The following figure shows the effect.

Template Creation

The procedure is the same as that shown in section "Template Creation" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Data Preparation

The procedure is the same as that shown in section "Data Preparation" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Chart Insertion

The procedure is the same as that shown in section "Chart Insertion" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Data Binding

Select the column chart, bind the data to the chart, and set Data Source to Dataset Data, Dataset to ds1, and Category to Product_type, Salesperson, and Region. Set Series Name to Field Name, and set Field Name to Sales_Volume, Series to Sales_Volume, and Summary to Sum, as shown in the following figure.

Not Displaying the Title

The procedure is the same as that shown in section "Not Displaying the Title" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Setting Chart Zooming

Select the column chart, select Enable Zoom Widget to set chart zooming, set Widget Type to Zoomable Axis, set Widget Border to Adjustable, set the left border values to ["New York","John","Beverages"], and set the right border values to ["California","Sophia","Desserts"], as shown in the following figure.

Note:

1. The multi-category chart in this example and the single-category charts differ in the writing methods of setting the initial left and right border values. You can input content in the editing box instead of using formulas or entering content in the Formula Definition box and deleting the =.

2. The border values for multi-category charts are set based on the setting rule: ["Parent category","Child category"]. Besides, the border values are input based on the field values of categories. For example, since this template has three levels of categories Region, Salesperson, and Product_types, you need to input ["New York","John","Beverages"].

Effect Display

PC

Save the report and click Pagination Preview. During the initial display, the length of the zoomable axis is determined by the initial left and right border values. You can move or resize the zoomable axis. The following figure shows the effect.

• Moving the zoomable axis: You can select the zoomable axis and move it to move the chart.

• Shortening the zoomable axis: You can select the zoomable axis and shorten it to zoom in on the chart.

• Extending the zoomable axis: You can select the zoomable axis and extend it to zoom out on the chart.

Mobile Terminal

The chart can be previewed on both the DataAnalyst app and the H5 terminals. During the initial display, the length of the zoomable axis is determined by the initial left and right border values. You can move or resize the zoomable axis. The following figure shows the effect.

• Moving the zoomable axis: You can select the zoomable axis and move it to move the chart.

• Shortening the zoomable axis: You can select the zoomable axis and shorten it to zoom in on the chart.

• Extending the zoomable axis: You can select the zoomable axis and extend it to zoom out on the chart.

Template Creation

The procedure is the same as that shown in section "Template Creation" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Data Preparation

Create a database query ds1. Enter the SQL statement: SELECT * FROM DepartmentFeedback. The following figure shows the effect.

Chart Insertion

The procedure is the same as that shown in section "Chart Insertion" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Data Binding

Select the column chart, bind the data to the chart, and set Data Source to Dataset Data, Dataset to ds1, and Category to ID. Set Series Name to Field Name, and set Field Name to Satisfied, Series to Satisfied, and Summary to Sum, as shown in the following figure.

Not Displaying the Title

The procedure is the same as that shown in section "Not Displaying the Title" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Setting Chart Zooming

Select the column chart, select Enable Zoom Widget to set chart zooming, set Widget Type to Scrollable Axis, and set Initial Category Quantity to 5, as shown in the following figure.

Effect Display

PC

Save the report and click Pagination Preview. Only the first five categories are displayed in the initial display. You can drag the scrollable axis to move the chart, as shown in the following figure.

Mobile Terminal

The chart can be previewed on both the DataAnalyst app and the H5 terminals. During the initial display, only the first five categories are displayed. You can drag the scrollable axis to move the chart, as shown in the following figure.

Template Creation

The procedure is the same as that shown in section "Template Creation" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Data Preparation

The procedure is the same as that shown in section "Data Preparation" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Chart Insertion

The procedure is the same as that shown in section "Chart Insertion" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Data Binding

The procedure is the same as that shown in section "Data Preparation" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Not Displaying the Title

The procedure is the same as that shown in section "Not Displaying the Title" (in section "Example One: Pinch-to-Zoom of the Single-Category Column Chart"). No further details will be provided here.

Setting the Axis Type to Value Axis

Choose Style > Axis > X Axis and set Type to Value Axis, as shown in the following figure.

Setting Chart Zooming

Select the column chart, select Enable Zoom Widget to set chart zooming, set Widget Type to Scrollable Axis, and set Zoom Ratio to 60%, as shown in the following figure.

Effect Display

PC

Save the report and click Pagination Preview. The zoom ratio is 60%. You can drag the scrollable axis to move the chart, as shown in the following figure.

Mobile Terminal

The chart can be previewed on both the DataAnalyst app and the H5 terminals. The zoom ratio is 60%. You can drag the scrollable axis to move the chart, as shown in the following figure.

For details, you can download the template in example one: Pinch-to-Zoom of the Single-Category Column Chart.cpt

For details, you can download the template in example two: Setting Initial Left and Right Border Values to Field Values of a Category for Widget Zoom of the Single-Category Column Chart.cpt

For details, you can download the template in example three: Setting Initial Right Border Values by Formulas for Widget Zoom of the Single-Category Column Chart.cpt

For details, you can download the template in example four: Setting Initial Left and Right Border Values to Field Values of a Category for Widget Zoom of the Multi-Category Column Chart.cpt

For details, you can download the template in example five: Setting Initial Category Quantity for Widget Zoom (Scrollable Axis) of the Single-Category Column Chart.cpt

For details, you can download the template in example six: Setting the Zoom Ratio for Widget Zoom (Scrollable Axis) of the Single-Category Column Chart.cpt