Component dynamic title

1. Overview

1.1 Version

1.2 Application scenarios

By default, the component title is static. In order to enhance the readability of the chart, by setting a dynamic title, the title changes with data changes, which can quickly display key information and improve communication efficiency. Dynamic title changes are divided into two scenarios by whether to add indicators. As shown in the following table:

1.2.1 Scenario 1: Dynamic title without adding indicators

Introduce how to implement dynamic title without adding indicators to the title. For example, click "DHL" of the word cloud component and select "January 2008-June 2008" for the year-month interval filter component, and the title of the line chart will automatically follow the change and display "DHL2008-01to2008-06detail". The effect is as follows:

1.2.2 Scenario 2: Dynamic title with adding indicators

How to implement dynamic title when users want to add indicators to component title. As shown below:

1.3 Solutions

1.3.1 Scenario 1: Dynamic title without adding indicators

After the component is made, edit the title of the component, add dimension fields in the dashboard and filter component values in the title to establish linkage. After clicking on the dashboard interface to generate linkage or adding filter conditions, the title will change accordingly to achieve the dynamic title effect.

1.3.2 Scenario 2: Dynamic title with adding indicators

After the component is made, hide the title of the component first, replace the title with a text component, add any field or control such as indicators in the dashboard to the title, click on the relevant field or enter the value of the widget, and the title will follow the change to produce a linkage effect.

2. Scenario 1: Dynamic title without adding indicators

2.1 Make a dashboard

You need to make the dashboard before setting the dynamic title.

2.1.1 New a dashboard

Open "Dashboard> New Dashboard", enter the "Name" and "Location" of the dashboard, name it "Dynamic title", and click "OK" to complete the creation. As shown below:

2.1.2 Add line chart component

1) Click "Add component", as shown in the figure below:

2) Select the "ORDERS" dataset to add component. As shown below:

3) Drag the "SIGNDATE" and "AMOUNT" under the area to be analyzed into the horizontal and vertical axis on the right, and select "Partitioned Line Chart" as the chart type to complete the production of the line chart. As shown below:

2.1.3 Add word cloud component

1) Click "+" to add component, as shown in the figure below:

2) Also select the "ORDERS" dataset to add component, as shown in the figure below:

3) Add "SHIPMETHOD" and "Counter" to the dimension area, and select "Word Cloud" for the chart type. As shown below:

4) After completing the word cloud component creation, click "Enter the Dashboard", as shown in the figure below:

2.1.4 Add time filtering component

Add "Year Month Interval Filter Component" in the "Time Filtering component" to filter the line chart component of the dashboard.

1) Click "Filter Component>Year Month Interval Filter Component" to add a year-month interval filter component. As shown below:

2) The filter component is bound to the "SIGNDATE" field under "ORDERS", click "OK" to complete the filter component production. As shown below:

2.2 Set dynamic title

After the dashboard is created, the next step is to set the dynamic title of the line chart as an example to explain the solution of the dynamic title without adding indicators.

Select the line chart component and "double-click the component title" to enter the title editing interface to set the dynamic title. As shown below:

2.2.1 Add fields

Add fields to the title. Click "Custom> + >SIHPMETHOD", and successfully add the "SHIPMETHOD" field to the title content, as shown in the following figure:

2.2.2 Add filter component value

Click " + >Year Month Interval" to add the "Year Month Interval" filter component value, as shown in the figure below:

2.2.3 Add text content

Enter the custom text content in the "SHIPMETHOD" field and the "Year Month Interval" filter component value. As shown below:

2.2.4 Edit title style

Select the title content and edit the title style. Set font size "16", "Bold", font color "red", "Align center", click "OK" to complete the title setting. As shown below:

2.3 Preview effect

The effect can refer to section 1.2.1 of this article.

3.1 Make a component

Only after the component is made, can the component title be made.

3.1.1 Create component

Open "ORDERS" under "Data Preparation>Package", click "Create component", fill in the relevant information, and click "OK" to complete the operation. As shown below:

3.1.2 Add calculation indicator

Calculate the rate of actual amount.

1) Click "+" to add calculation indicator. As shown below:

2) Add the "Rate" indicator. Enter the formula SUM_AGG(PAID)/SUM_AGG(AMOUNT) to obtain the "Rate" indicator, enter the name of the calculation indicator, and click "OK" to complete the operation. As shown below:

Formula description:

• SUM_AGG(PAID)/SUM_AGG(AMOUNT): This example represents the grouping and summation of "PAID" and "AMOUNT" according to the "SIGNDATE" dimension, and calculate the proportion of "PAID" to "AMOUNT".

• SUM_AGG: According to the current analysis dimension, the summary and sum value of the indicator fields are dynamically returned, and the result is a dynamic data column, the number of rows is consistent with the number of rows of the current analysis dimension.

Note: The formula content of the aggregate function SUM_AGG() needs to be selected in the left field to take effect. This example adds "PAID" and "AMOUNT" fields.

3.1.3 Add group table

Add a group table. Select "group table" and drag corresponding fields into the dimension column on the right to complete the group table creation. The dragged corresponding fields are shown in the figure below:

3.1.4 Set numeric format

Set "Rate" as a percentage.

1) Click "Rate(Aggregation)>numeric format" to set the display format of the field value. As shown below:

2) Set the numeric field "Rate" to the "percentage" form, the "Decimal Place" is "2", and click "OK". As shown below:

3) Check the "Rate" field to become a percentage, and click "Enter the dashboard". As shown below:

3.1.5 Hide the title

Since it is not possible to add indicators to the component title, you need to hide the title first and add a text component to replace the title position.

Select the component, click the "drop-down box", and uncheck the "Show Title" to hide the title. As shown below:

3.2 Make text component

Edit the content and effect you want to show in the title in the text component.

3.2.1 Add text component

Click "Other>Text Component" to add text component. As shown below:

3.2.2 Add fields

Click the text component to add content. Click "+" to add the field "SIGNDATE" and the calculation indicator "Rate" in sequence, and the added fields will be displayed in the text component. As shown below:

3.2.3 Add text content

The cursor selects the middle of the two fields and enters the text. As shown below:

3.2.4 Set text style

Select the text content and edit the style of the text component. Set the font size to "20", "Bold", and set the background color to "yellow", adjust the position and size. The final effect is shown in the figure below:

3.3 Set default value

If the user needs to view the dashboard, the title will be displayed as "2008" by default. You need to click "2008" in the editing state to complete the linkage, as shown in the following figure:

Then click "Preview Dashboard", and the default value in the preview state becomes "2008 year's amount rate is 80.40%".

3.4 Preview effect

Refer to section 1.2.2 of this article for the effect.