Obtaining Cell Data by Tooltip

Version

Expected Effect

In addition to displaying the data used by the chart, the chart prompt is also expected to display the data not used by other charts. For example, a pie chart showing the monthly amount ratio is also expected to show month-on-month growth, as shown in the following figure.

Implementation Method

Method one: For the data existing in the dataset, you can see Obtaining Dataset Data by the Prompt and directly obtain the dataset data for display.

Method two: You can customize the prompt to get the data in the cell.

This document will introduce the setting steps of method two.

Template Design

Choose File > New General Report in the upper left corner of the designer, and select Refresh Technology as the template theme. Create a built-in dataset, modify the name to Monthlydata, and design the table as shown in the following figure.

Note:

The data is only used as an example with no actual meaning.

Report Design

Table Design

Drag the fields from the dataset into cells from cell A2 to cell C2, as shown in the following figure.

Set the Data Setting item of cell A2 to List. If it is grouped, data retrieval errors may occur when the same data exists.

Chart Insertion

Select required cells, click the Merge Cells icon to merge the cells, click the Insert Chart icon, and select Pie Chart, as shown in the following figure.

Data Binding

Select the chart, choose Cell Element > Data on the right attribute panel, and bind the data from the dataset to the chart. Select None for Category, Field Value for Series Name, Month for Series, and Proportion for Value, as shown in the following figure.

Chart Style Setting

1. Canceling Title and Legend

Select the chart, choose Cell Element > Style > Title, and deselect Show Title. Select Legend, and deselect Show Legend, as show in the following figure.

2. Setting Series

Choose Style > Series, select Off for Gradient Style, and set the Core value to 80%, as shown in the following figure.

3. Setting Label

Choose Style > Label and select Use Label. Notice that this example does not set Value Label. You can simply deselect the options in Text of Value Label. Set Category Label to Custom and enter the code:

function(){ return "Proportion/MoM Ratio";}

Set the Character style, and set Position to Center, as shown in the following figure.

4. Setting Prompt

Choose Style > Prompt, select Custom for Content, and enter the following code:

function() {
{  
//Obtain all values expanded from cell A2.
var a = []; 
//Configure i<14. You need to know how many values (12 values expanded from cell A2 in this case) are expanded from the cell. Therefore the maximum row number of the value expanded is 13. So you need to configure i<14.
for (i = 1; i < 14; i++) { 
var str = "A"; 
var id1 = str + i; 
var value1 = _g().getCellValue(id1); 
a.push(value1); 
} 
//Obtain all values expanded from cell B2.
var b = []; 
for (i = 1; i <14; i++) { 
var str = "B"; 
var id2 = str + i; 
var value2 = _g().getCellValue(id2); 
b.push(value2); 
} 
// Obtain all values expanded from cell C2.
var c = []; 
for (i = 1; i < 14; i++) { 
var str = "C"; 
var id3 = str + i; 
var value3 = _g().getCellValue(id3); 
c.push(value3); 
} 
var len = a.length; 
for (i = 0; i < len; i++) { 
//Check whether any value expanded from cell A2 is equal to the series name. If so, return the tooltip.
if (this.seriesName == a[i]) 
{ return 'Month: '+a[i]+' Proportion: '+b[i]+' Compared with Same Period: '+c[i]; } 
}
}
}
Show Code

Note:

this.seriesName is the name of the series where the current data point is located. If you need to change it to a category name, you can change it to this.category, as shown in the following figure.

Table Hiding

Select the row where the table is located after completing the report design, right-click the row number, and select Hide to hide the table, as shown in the following figure.

Effect Display

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

Note:

The effect cannot be previewed on mobile terminals.

FVS Visualization Dashboard Example

Notice that when you reference table cell data in FVS, the interface for obtaining cells in the code needs to be changed. The changes are as follows:

var value3 =duchamp.getWidgetByName("Chart1_Page1").getCellValue(i,3);

And the way of looping and taking values is also different. The complete code example is as follows:

function() {
{  
//Obtain all values expanded from cell A2.
var a = []; 
//Configure i<14. You need to know how many values (12 values expanded from cell A2 in this case) are expanded from the cell. Therefore the maximum row number of the value expanded is 13. So you need to configure i<14.
for (i = 1; i < 14; i++) { 
var value1 =duchamp.getWidgetByName("Table1_Page1").getCellValue(i,1); 
a.push(value1); 
} 
//Obtain all values expanded from cell B2.
var b = []; 
for (i = 1; i <14; i++) { 
var value2 =duchamp.getWidgetByName("Table1_Page1").getCellValue(i,2); 
b.push(value2); 
} 
//Obtain all values expanded from cell C2.
var c = []; 
for (i = 1; i < 14; i++) { 
var value3 =duchamp.getWidgetByName("Table1_Page1").getCellValue(i,3); 
c.push(value3); 
} 
var len = a.length; 
for (i = 0; i < len; i++) { 
if (this.seriesName == a[i]) 
{ return 'Month: '+a[i]+' Proportion: '+b[i]+' Compared with Same Period: '+c[i]; } 
}
}
}
Show Code

FRM Dashboard Example

Notice that when you reference cell data of report block in a dashboard, the interface for obtaining cells in the code needs to be changed. The changes are as follows:

var value1 = _g().getCellValue(id1)  needs to be modified to var value1 = _g().getWidgetByName("report0").getCellValue(id1)

The rest of the code is written in the same way. The complete code example is as follows:

function() {
{  
var a = []; 
for (i = 1; i <14 ; i++) { 
var str = "A"; 
var id1 = str + i; 
var value1 = _g().getWidgetByName("report0").getCellValue(id1); 
a.push(value1); 
}  
var b = []; 
for (i = 1; i <14 ; i++) { 
var str = "B"; 
var id2 = str + i; 
var value2 = _g().getWidgetByName("report0").getCellValue(id2); 
b.push(value2); 
} 
var c = []; 
for (i = 1; i <14 ; i++) { 
var str = "C"; 
var id3 = str + i; 
var value3 = _g().getWidgetByName("report0").getCellValue(id3); 
c.push(value3); 
} 
var len = a.length; 
for (i = 0; i < len; i++) { 
if (this.seriesName == a[i]) 
{ return 'Month: '+a[i]+' Proportion: '+b[i]+' Compared with Same Period: '+c[i]; } 
}
}
}
Show Code

For details, you can download the template.

You can download the example template.

Obtaining Cell Data by Tooltip.cpt

Obtaining Cell Data by Tooltip.fvs

Obtaining Cell Data by Tooltip.frm