Entry-Level Chart Example

  • Last update:February 20, 2025
  • Overview

    Version

    Report Server Version
    11.0

    Expected Effect

    The following figure shows the effect.

    The upper left of the figure shows the table of sales of all salespersons.

    The upper right of the figure shows the column chart of sales in each region. To realize the effect, you need to insert a column chart as a cell element, and select cell data as the data source.

    The lower part of the figure shows the pie chart of total sales by two regions. To realize the effect, you need to insert a pie chart as a floating element, and select dataset data as the data source.

     图表入门1.png

    Example

    Data Preparation

    Choose File > New General Report in the upper left of the designer, click Database Query, and enter the SQL statement SELECT * FROM Sales_Volume to create a database query ds1.

     图表入门2.png

    Theme Selection

    Click the theme name above the report, and select Refresh Technology in the Template Theme selecting pop-up box, as shown in the following figure.

     图表入门3.png

    Chart Design

    Table Design

    1. Enter the information of the chart header into cell A1 to cell C1 respectively, select the cells, choose Cell Attribute > Style on the right property panel, select Theme as Style Setting, and select the Header style, as shown in the following figure.

     图表入门4.png

    2. Drag the fields in the dataset into the corresponding cells (cell A2 to cell C2), select the cells, and select the Main Text style, as shown in the following figure.

     图表入门5.png

    3. Select cell C2, and choose Cell Element > Basic on the right property panel. Select Summary and Sum as Data Setting.

     图表入门6.png

    So far, the table of sales is completed. Save the report, and click Pagination Preview to view the effect.

    图表入门7.png 

    Column Chart Insertion

    Then, create the column chart on the right side of the table.

    1. Merge cells D1 to H1, and enter the header Statistics Column Chart into the merged cell. Merge cells D2 to H2 as the insertion location of the column chart. Select cell C1, click the Format Painter icon above the report, and then you can copy the format of cell C1 to cell D1 by just clicking cell D1. You can set the format of cell D2 in the same way, as shown in the following figure.

     图表入门8.png

    2. Select the merged cell D2, click the Insert Chart icon, and insert a column chart.

     图表入门9.png

    3. Select cell D2 where the column chart is located, and choose Cell Element > Data on the right property panel. The following table shows the data setting.

    SettingsContentDescription
    Data Source Cell DataChart data is derived from cells.
    Category Name=B2Select the Salesperson field in the cell B2 as the category name.
    Series  Sales Select Sales as the series name.
    Value=C2 Select the sales data in cell C2 as the series value.

    iconNote: 
    You can enter text into the edit boxes as the content of Category NameSeries Name and Value, or click the F(x) button on the right side to enter formulas in the Formula Definition page. Take the category name as an example. You can enter =B2 into the edit box on the right side of Category Name, and you can also enter B2 on the formula definition page to realize the same effect.

    The steps are shown in the following figure.

     图表入门10.png

    4. As the title of the column chart has been set in cell D1, the title equipped by the column chart in cell D2 should be cancelled. Select cell D2 where the column chart is located, choose Cell Element > Style > Title on the right property panel, and deselect Show Title which is selected by default.

     图表入门11.png

    5. The toolbar of the chart is removed for a better effect during preview.

    Select cell D2 where the column chart is located, and choose Cell Element > Special Effect > Interaction > Toolbar > Content. Deselect Sort, Export Image, and Display in Full Screen which are selected by default.

     图表入门12.png

    6. Set the column chart to expand with cell A2 where the Region field is located to show one column chart for each region. Select cell D2 where the column chart is located, and choose Cell Attribute > Expansion. Select No Expansion as Expansion Direction, select Custom from the drop-down list of the left parent cell, and set Left Parent Cell to A2.

     图表入门13.png

    7. Save the report, and click the Pagination Preview icon to view the effect.

     图表入门14.png

    Pie Chart Insertion

    Finally, inserting the pie chart as a floating element.

    1. Select Floating Elementon the right property panel, and insert a pie chart, as shown in the following figure.

     图表入门15.png

    2. Bind the data to the pie chart, as shown in the following table.

     

    Setting ItemContent  Description
    Data Source  Dataset DataChart data is derived from the dataset.
    CategoryNone There is no category name for the chart.
    Series Name Field Value Select the field value of the dataset as the series name.
    Series  Region Select the value of the field Region (such as New York and California) as the series name.
    ValueSales_Volume Select the value in the field Sales_Volume as the series value.
    SummarySum  Get the sales volume of each region and sum it up.

    The steps are shown in the following figure.

    图表入门16.png 

    3. Choose Floating Element > Style, set the title to Total Sales by Region and set the position to left, and select Theme as Character, as shown in the following figure.

     图表入门17.png

    Effect Display

    PC

    Save the report and click Pagination Preview. The section "Expected Effect" shows the effect. 

    Mobile Terminal

    For details about viewing the report on the mobile terminal, see Quick Single Template Preview Through DataAnalyst.

    The pie chart in this example is set with floating elements which can not displayed on the mobile terminal. The following figure shows the effect.

     图表入门18.jpg

    Template Download

    Click to download the template Entry-Level Chart Example.cpt


    Attachment List


    Theme: Chart
    Already the First
    Already the Last
    • 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