Successfully!

Error!

Proportion Column Chart

  • Last update:  2022-01-11
  • I. Overview

    1. Application scenarios

    When there is an inclusion relationship between the two series, we hope that the columns of the two series can be overlapped, so that we can see the proportion relationship between the two series directly.

    For example, there are two series in the column chart: Amount balance and Price. Now we want to make these two series overlap in the column chart to visually show the proportion of Price to the amount Balance, as shown in the figure below:

    1.png 

    2. Function entrance

    Set the Series Interval under column chart Style >Series to - 100 to overlap all series, as shown in the following figure:

    2.5.png

     

    3.  Application Examples

    The built-in component reuse function can be used in the decision report, and the component style can be quickly reused by directly replacing the data to realize the custom column rounded corner properties and width effects.

    II. Examples

    1. Data preparation

    Create a new built-in dataset named embedded1. The fields and data are shown in the following figure:

     

    2. Insert chart

    Merge a range cell and insert a column chart, as shown in the following figure:

     


    3. Binding data

    Bind column chart data, as shown in the following figure:

     


    4. Add title

    Add title to column chart: proportion column chart, position on the left, set font style, as shown in the figure below:

     

    5. Achieve cylindrical overlap

    Under column chart style > series, set the series interval to - 100, as shown in the following figure:

     


    6. Custom label

    Add a new condition attribute of label type under Special Effects >Condition Display, and customize the text content, as shown in the following figure:

    The JavaScript code is as follows:

    function(){ 
     var result=(this.points[1].value/this.points[0].value*100).toFixed(2);
     result=result+"%";
     return result}


    7. Effect preview

    1) PC terminal

    Save the report and click pagination preview. The effect is as follows:

    2) Mobile terminal

    Both app and H5 preview are supported, and the effect is shown in the following figure:



    III. Template download

    Completed template, see 

     %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\ColumnAndBar\Proportion_Column_Chart.cpt

    Click to download template:

    Proportion_Column_Chart.cpt

    Attachment List


    Theme: Chart
    • Helpful
    • Not helpful
    • Only read

    Doc Feedback