Line-Wrapping of Custom Prompts with Thousand Separators

Version

Expected Effect

During chart creation, when the series names or values are overlong, you may want numbers in the data tooltips to be displayed with thousand separators and rounded to two decimal places when hovering the cursor over the graphic, as shown in the following figure.

Solution

Select Custom for the prompt content and enter HTML codes. After entering the codes, select Use HTML to Parse Text Content, as shown in the following figure.

Data Preparation

Choose File > New General Report in the upper left corner of the designer, create a database query ds1, and enter the following SQL statement:

SELECT

ShipperCountry||' '||ShipperCity AS Address,

ROUND(SUM(ShippingCost*10000),2) AS 'Amount Payable (with Two Decimal Places)'

FROM Orders_new

/

GROUP BY ShipperCountry||ShipperCity

ORDER BY SUM(ShippingCost*10000) DESC

The following figure shows the setting method.

Chart Insertion

Merge required cells, click the Insert Chart icon on the upper toolbar, select Pie Chart, and click OK, as shown in the following figure.

Data Binding

Select the chart, choose Cell Element > Data on the right property panel, and bind the dataset data. Select None for Category, Field Value as Series Name, Address as Series, Amount Payable as Value, and Sum for Summary, as shown in the following figure.

Chart Style Setting

1. Title Setting

Select the chart, choose Cell Element > Style > Title, and enter Proportion of Amount Payable in Text, as shown in the following figure.

2. Label Setting

Select the chart, choose Cell Element > Style > Label, tick Use Label, select Common for the value label content, and tick Percentage to set the value format to Percentage, as shown in the following figure.

3. Series Setting

Select the chart, choose Cell Element > Style > Series, and modify the series color, as shown in the following figure.

4. Prompt Setting

Select the chart, choose Cell Element > Style > Prompt, select Custom for Content, and enter the following code.

function() {
var aa = (this.value).toString();//Convert data values into strings.
var str = aa.substring(0,aa.length-3);// Truncate the integer part.
var bb = aa.substring(aa.length-3,aa.length);// Truncate the decimal part.
var arr = [];
var num = str.length % 3;
if(num==0){
    for (var i = 0; i < str.length / 3; i++) {
        substr = str.substring(i*3, (i + 1) * 3);
        arr.push(substr);
    };
}else{
    substr = str.substring(0, num);
    arr.push(substr);
    for (var i = 0; i < Math.floor(str.length / 3); i++) {
        substr = str.substring(num + i * 3, num + (i + 1) * 3);
        arr.push(substr);
    };
//Add thousand separators to the integer part.
var cc = (this.seriesName+"</br>"+arr+bb+' Unit:10000 Yuan');//Wrap series names and convert them to numbers with thousand separators and unit suffixes.
return cc;}
Show Code

Effect Display

PC

Save the report and click Pagination Preview. The effect is the same as that shown in section "Expected Effect."

Mobile Terminal

Note:

FVS visualization dashboards and dashboards cannot be previewed on mobile terminals. General reports can be previewed on both the DataAnalyst app and the HTML5 terminal.

The following figure shows the effect.

For details, you can download the template: Custom Line-Wrapping of Tooltips with Thousands Separators.cpt