I. Overview
1) A column chart is used to represent the size of data by the height or length of a column with the same width.
2) Simple and intuitive, a column chart helps indicate the size of the value by the length of the column, making it easy to compare the differences between the datasets. However, it is not suitable for displaying larger datasets (categories).
3) There are four types of column chart: ordinary column chart, stacked column chart, percentage stacked column chart and custom column chart.
An ordinary column chart compares the sizes of data based on the length of each column.
A stacked column chart cannot only indicate the value of each series in an intuitive manner, but also reflect the sum of the series, thus it is suitable for displaying the sum of a certain category unit and the proportion of each series value.
A percentage stacked column chart is provided with the characteristics of a stacked column chart and is suitable for displaying proportional information instead of specific values. That is, the total percentages are all 100%s.
A custom column chart can be used to set the attributes of stacking and axes.
4) Suggested Reading: Chart Data, Chart Style, Chart Special Effects
| You will learn |
|---|
|
II. Attribute Settings - Ordinary Column Chart
1. Insert a chart
Take inserting a floating element as an example. Click on [Insert] > [Floating Element] > [Insert Chart] > [Column Chart].
Adjust the display area by stretching the chart.
2. Data Query
Create a new DB query ds1. The FRDemo database is used by default. Enter SQL:
SELECT * FROM Product join ProductCategory
on Product.CategoryID = ProductCategory.CategoryID
where ProductCategory.Category_name! = "Daily necessities"
/*Here exclude daily necessities because it contains abnormal value*/
3. Data Binding
1) Click on [Floating Element] > [Data] to enter the Data Binding interface.
2) Set [Data Source] to [Dataset Data] and select the newly created [ds1] for [Dataset], [Category_name] for [Category] and [Enable Field Name] for [Series Name from].
3) Set two groups of series - Inventory_quantity and Order_quantity and the summary methods are both Sum.
4. Style Settings
1) Style Settings include Title, Legend, Label, Series, Axis, Data Table, Background and Tooltip. For general settings, please refer to the Chart Style.
2) The special styles of an ordinary column chart include [Style] > [Series] > [Fixed Column Width], which is set to [No] by default, indicating that the column width is automatically adjusted by the system. Click on [Yes] to customize the column width. You can preview the effect in real time on the left.
III. Attribute Settings - Stacked Column Chart
1. Insert a chart
Select a chart and click on [Floating Element] > [Type] > [Stacked Column Chart].
2. Preview
With other settings remaining unchanged, click on Preview to view the effect in a browser.
Data of different series are stacked and displayed on the same column, indicating both the total amount of data in each category and the size of each series value in the group.
IV. Attribute Settings - Percentage Stacked Column Chart
1. Insert a chart
Select a chart and click [Floating Element] > [Type] > [Percentage Stacked Column Chart].
2. Preview
With other settings remaining unchanged, click on Preview to view the effect in a browser.
Data of different series are stacked and displayed on the same column, with the percentage on the Y-axis corresponding to the proportion of different series in the same category.
V. Attribute Settings - Custom Column Chart
1. Insert a chart
Select a chart and click [Floating Element] > [Type] > [Custom].
2. Data Binding
1) Click [Floating Element] → [Data] to enter the Data Binding interface.
2) Click on the [+] button to add another series and set [Field Name] and [Series Name] as [Re-order Quantity] and [Summary Method] as [Sum].
3. Style - Custom Axis
The custom column chart is provided with a special Attribute, namely, to set a custom axis, with which you may add an X-axis or Y-axis and display multiple axes in the chart to facilitate the display of multiple series of data.
1) Click on [Style] > [Axis] to enter the axis setting interface.
2) Click on the [+] button to add a Y axis, which is named as [Y Axis 3] by default.
4. Style - Style Stacking
The custom column chart is provided with a special Attribute, namely, to set custom stacking, which is used to set the correspondence between the series and the Y axis and the stacking effect.
1) Click [Style] > [Series] to enter the axis setting interface.
2) Click the [ ] button, and set the serial index (integers) 1 and 2 corresponding to the Y-Axis.
3) Click the [+] button, and set the serial index (integer) 3 corresponding to the Y-Axis 2.
4) Click Preview to view the effect in a browser. It can be seen that the first two series use the Y-axis on the left and the last series uses the Y-Axis 2 on the right. You can set the Y-Axis 3 accordingly.
5. Style - Gradient Style
Note: In addition to the general chart styles, a Gradient Style of custom column charts is available for JAR packages released on July 6, 2020 or later.
Auto: Automatically adjust the gradient style according to the color scheme selected by the user.
Custom: Click on the left and right corner marks to customize the gradient interval.
Off: Do not apply the gradient effect.
