Charts

​

Quick Start

Let’s learn how to use the chart plugin through two simple examples.

​

Example 1: Creating a Simple Bar Chart

Suppose we want to display sales quantities for different products:

1. Click the “Go to Configuration” button to enter the chart configuration interface

2. In the data query configuration:

   • Select “Product Sales Table” as the data source
   • Add “Product Name” and “Sales Quantity” fields in the “Select” section
   • Add “Sort” to arrange data from highest to lowest sales quantity

3. In the chart interface configuration:

   • Select “Bar Chart” as the chart type
   • Set “Product Name” as the X-axis
   • Set “Sales Quantity” as the Y-axis
   • Enable “Show Value Labels on Chart” for better data visibility

Now you have a clear comparison chart of product sales quantities!

​

Example 2: Creating a Pie Chart for Proportions

To show the sales proportion of different product categories:

1. In the data query configuration:

   • Select the same data source
   • Choose “Product Category” and “Sales Quantity” fields
   • Use the “Aggregate” function to calculate the sum of sales quantities

2. In the chart interface configuration:

   • Select “Pie Chart” as the chart type
   • Set “Product Category” as the category field
   • Set “Sales Quantity” as the value field
   • Enable “Show Percentages” option

You now have a pie chart showing the sales proportion of each product category!

​

Advanced Configuration

After mastering the basics, let’s explore more powerful features…

After adding a chart plugin to the dashboard, we first need to configure the data query, then configure the chart based on the queried data.

​

Data Query Configuration

The chart plugin’s data query configuration is used to set data sources and query conditions, including these main features:

​

Source

Select the source table for data. Click the “Add” button to add new data sources.

​

Select

Choose fields to query from the data source.

​

Join

Configure relationships between multiple data sources. Click the ”+” button to add join configurations.

​

Data Filtering

​

Filter Conditions

• Click “Add Condition”: Add a single filter condition
• Click “Add Condition Group”: Add a group of filter conditions
• Support setting logical relationships (AND/OR) between multiple conditions

​

Sorting

Set data sorting rules, multiple sort fields supported.

​

Grouping

Group data for statistics, supports multi-level grouping.

​

Data Processing

​

Query Limit

Limit the number of returned data records.

​

Skip

Set the number of records to skip, used for pagination.

​

Aggregation

Supports various aggregation calculations:

• Sum
• Average
• Minimum
• Maximum
• Count
• Empty
• Not Empty
• Unique Values
• Empty Ratio
• Not Empty Ratio
• Unique Value Ratio

​

Chart Interface Configuration

Configure chart display style and visual effects, including:

​

Chart Types

Supports multiple chart types:

• Bar Chart: Suitable for comparing categorical data
• Line Chart: Show data trends over time
• Pie Chart: Display part-to-whole relationships
• Area Chart: Emphasize cumulative changes in data
• Table: Display detailed data in tabular format

​

X-axis and Y-axis Configuration

• X-axis: Select fields to display on the X-axis
• Y-axis: Select metrics to display on the Y-axis
• Add multiple series for comparative analysis

​

Display Settings

​

Line Styles (for Line Charts)

• Normal: Standard lines
• Linear: Smooth curves
• Step: Step-like lines

​

Y-axis Position

• Auto: System automatically determines
• Left: Y-axis displays on the left
• Right: Y-axis displays on the right

​

Data Labels

• Set chart title
• Show value labels on chart
• Customize value label format

​

Range Settings

• Minimum: Set Y-axis minimum scale
• Maximum: Set Y-axis maximum scale

​

Padding

Adjust chart internal padding:

• Top padding
• Right padding
• Bottom padding
• Left padding

​

Auxiliary Features

• Target Line: Add horizontal reference lines for target values
• Value Labels: Display specific values on the chart
• Stacking: Enable data series stacking (for bar and area charts)

​

Usage Tips

1. Select data source first, then configure specific query conditions
2. Use filters to narrow down data range
3. Use aggregation functions appropriately for data statistics
4. Optimize data presentation through sorting and grouping
5. Choose appropriate chart types based on data characteristics
6. Set axes properly to highlight key data points
7. Adjust padding for aesthetic appearance
8. Use data labels to enhance readability
9. Add target lines to assist data analysis