Column Chart

  • Last update:December 18, 2020
  • 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 DataChart StyleChart Special Effects

    You will learn
    • Attribute Settings - Ordinary Column Chart

      • Insert a chart

      • Data Query

      • Data Binding

      • Style Settings

    • Attribute Settings - Stacked Column Chart

      • Insert a chart

      • Preview

    • Attribute Settings - Percentage Stacked Column Chart

      • Insert a chart

      • Preview

    • Attribute Settings - Custom Column Chart

      • Insert a chart

      • Data Binding

      • Style - Custom Axis

      • Style - Custom Stacking

      • Style - Gradient Style

    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.

     图片1.png


    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*/

     图片2.png


    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.

     图片3.png


    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.

     1.gif

    III. Attribute Settings - Stacked Column Chart

    1. Insert a chart

    Select a chart and click on [Floating Element] > [Type] > [Stacked Column Chart].

     图片6.png


    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.

     图片7.png

    IV. Attribute Settings - Percentage Stacked Column Chart

    1. Insert a chart

    Select a chart and click [Floating Element] > [Type] > [Percentage Stacked Column Chart].

     图片8.png


    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.

     图片9.png

    V. Attribute Settings - Custom Column Chart

    1. Insert a chart

    Select a chart and click [Floating Element] > [Type] > [Custom].

    图片10.png


    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].

     图片11.png


    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.

    1603101259944302.png


    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.

     图片13.png

    2) Click the [ 图片19.png ] button, and set the serial index (integers) 1 and 2 corresponding to the Y-Axis.

     2.gif

    3) Click the [+] button, and set the serial index (integer) 3 corresponding to the Y-Axis 2.

     3.gif

    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.

     4.gif


    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.

     5.gif


    Attachment List


    Theme: Chart
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy