Custom Tooltip

The new chart can also customize the display content of the cue points. Data point tooltips and labels provide complete customization of content and styles. Users can even set them as HTML content. The data point prompts set here are the same as the label settings. 

1.1 Cue Point Custom Style

The effect is as follows:

1.2 Cue Point Custom Picture

The effect is as follows:

1.3 Cue Point Custom Content

Sometimes our data prompt points need to display the proportion of each month and the year-on-year change value of the corresponding block. The effect is as follows:

1.4 Cue Point Custom Content Format

The Gantt chart’s built-in cue points may not be concise enough. At this time, you can use a custom method to remove unnecessary "start", "end" and other text descriptions, modify the data format, and the effect is as follows:

1.5 Cue Point Custom Classification Under Series Sum

Stacked column chart. Move the mouse to the top column to display the series sum. When moving to other columns, the actual value of the column itself is displayed. The effect is as shown in the figure below:

1.6 Cue Point Custom Display Parent Node

Multi-layer pie chart, move the mouse to the outermost node, display the parent node names of all current nodes, the effect is as follows:

2.1 Prepare Data

Create a new normal report, add the built-in dataset Embedded1, and record the number of visits on different days, as shown in the following figure:

2.2 Insert Chart

Take the floating chart as an example, click Insert>Floating Element>Chart Type, and select Column Chart-Column Chart.

2.3 Chart Data Setting

Select the chart and select Data on the right, as shown in the figure below:

2.4 Chart Style Setting

Select Style>Toolptip, check Use Tooltip, click Custom, enter JS code, and choose Use HTML parsing text content, as shown in the figure below:

The HTML code is as follows:

function() {
return '<h2 align="center">' + this.category + 
'</h2><table border="1"cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr><td style="color:white;">type</td><td style="color:white;">' + this.seriesName + 
'</td></tr><tr><td style="color:white;">amount</td><tdstyle="color:white;">' + this.value + '</td></tr></table>';
}

2.5 Save and Preview

Save the template, click the Pagination Preview, the effect is as above 1.1.

Can refer to the completed template%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\Cue_point_custom_column_chart.cpt

Cilck to download：

Cue_point_custom_column_chart.cpt

3.1 Open Template

Open%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\Normal_Pie_Chart.cpt

Cilck to download：

Normal_Pie_Chart.cpt

3.2 Chart Attributes Setting

Select the pie chart, check the Use Tooltip, click Custom, enter the JS code, and choose to Use HTML parsing text content, as shown in the figure below:

The JS code is as follows:

function() {
return '<p><img src ="../../help/picture/weather-02.png" align="middle"></p>';
}

3.3 Save and Preview

Save the template, click the Pagination Preview, the effect is as above 1.2.

Can refer to the completed template%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\Custom_cue_point_image_pie_chart.cpt

Cilck to download:

Custom_cue_point_image_pie_chart.cpt

4.1 Open Template

Open%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\Float_element_pie_chart.cpt

Cilck to download:

Float_element_pie_chart.cpt

Now the data point prompt also needs to display the same period ratio.

4.2 Report Design

First drag the field to the cell, as shown below:

Note: The default field is vertically expanded, here needs to be set not to expand, because it needs to be displayed in an array format.

4.3 Chart Style

Click Style>Tooltip, check Use Tooltip, click Custom, enter JS code, and choose Use HTML parsing text content, as shown in the figure below:

The specific code is as follows:

function() {
var m = contentPane.getCellValue(0, 0, 2);
var z = contentPane.getCellValue(0, 1, 2);
var t = contentPane.getCellValue(0, 2, 2);
var j = m.length;
for (var i = 0; i < j; i++) {
if (this.seriesName == m[i]) {
return '<div style="color:white;">Month：' + m[i] + 'Percentage：' + z[i] + 'Over the same period：' + t[i] + '</div>'
}
}
}

Get the Month, Percentage and Over the same period, get the length of the month array, pass the for loop, if judgment, when the series name is equal to the month, the data point prompts to return to the previously obtained cell field. For the sake of beauty, the color of the word is also set to white through the div.

At the same time, in order to display beautifully, hide 123 lines:

Set the title of the chart, as shown below:

Note: The text in the circle is realized by inserting floating elements: Text

4.4 Save and Preview

Save the template, click Data Entry Preview, the effect is as above 1.3.

Can refer to the completed template%FR_HOME%\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\Custom_cue_point_content_pie_chart.cpt

Click to download:

Custom_cue_point_content_pie_chart.cpt

If it is a frm template, the format of the cell to be obtained needs to be changed, and the code needs to be changed to this section

function(){
var a=$("td[id^=A3-]").text();var aa= a.split(",");
var b=$("td[id^=B3-]").text();var bb= b.split(",");
var c=$("td[id^=C3-]").text();var cc = c.split(",");
var d=$("td[id^=D3-]").text();var dd= d.split(",");
var j= aa.length;for(var i=0;i<j;i++){
if (this.seriesName == aa[i]){
return  'level customer:\n'+aa[i] + 'Actual month:' + bb[i] + '\nPlan of the month:' + cc[i] + '\nAchievement rate:' + dd[i];
}
}
}

5.1 Open Template

Open%FR_HOME%\webapps\webroot\WEB-INF\reportlets\ doc-EN\Chart\CustomHTMLFuction\Machine_status_Gantt_chart.cpt

Click to download:

Machine_status_Gantt_chart.cpt

5.2 Chart Attributes Setting

Select the Gantt chart, click Style> Tooltip, check Use Tooltip, click Custom, enter the JS code, and choose Use HTML parsing text content, as shown in the following figure:

The JS code is as follows:

function() {
var processes = this.processes.map(function(p) {
return p.name
}).join(' - ');
var startTime = FR.contentFormat(+this.startTime, 'Dyyyy-MM-dd HH:mm:ss');
var finishTime = FR.contentFormat(+this.finishTime, 'Dyyyy-MM-dd HH:mm:ss');
var duration = this.duration.as('day');
return processes + '</br>' + startTime + '</br>' + finishTime + '</br>' + duration
}

1) The parameters supported by the Gantt chart include this.seriesName, this.processes[] (in the form of an array), this.startTime, this.finishTime, this.duration, this.progress, this.id, this.processesId.

2) this.startTime and this.finishTime use the FR time format, and you need to pay attention to the + sign in front.

3) this.duration.as('day') represents the duration plus the unit, which can be year, month, day, hour, minute, second.

5.3 Save and Preview

Save the template, click the Pagination Preview, the effect is as above 1.4.

Can refer to the completed template

%FR_HOME%webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\Cue_point_custom_Gantt_chart.cpt

Click to doenload:

Cue_point_custom_Gantt_chart.cpt

6.1 Open Template

Open%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\Custom_labels_for_series_and_column_chart.cpt 

Click to download: 

Custom_labels_for_series_and_column_chart.cpt

6.2 Chart Attributes Setting

Select the Gantt chart, click Style> Tooltip, check Use Tooltip, click Custom, enter the JS code, and choose Use HTML parsing text content, as shown in the following figure:

The JS code is as follows:

function() {
var vanchart = this.series.vanchart,
series = vanchart.series;
if (!vanchart.seriesOfType) {
series = series.column;
}
var ser;
for (var i = series.length - 1; i >= 0; i--) {
if ((ser = series[i]).visible && this.points[i].getTargetValue() != 0) {
break;
}
}
if (ser && ser == this.series) {
var points = this.points,
value = 0; 
for (var i = 0, len = points.length; i < len; i++) {
if (points[i].series.visible) {
value += points[i].getTargetValue() 
}
}
return value;
}
else {
return this.value;
}
} 

Note: It is recommended to remove the comments after copying the code to avoid confusion in the sentence format.

6.3 Save and Preivew

Save the template, click the Pagination Preview, the effect is as above 1.5.

7.1 Open Template

Open%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\Multi-layer_pie_chart.cpt

Click to download: 

Multi-layer_pie_chart.cpt

7.2 Chart Attributes Setting

Select the Gantt chart, click Style> Tooltip, check Use Tooltip, click Custom, enter the JS code, and choose Use HTML parsing text content, as shown in the following figure:

The JS code is as follows:

function() {
var currentNode = this,
root = currentNode.series.root,
nodePath = currentNode.name;
while ((currentNode = currentNode.parent) && currentNode != root) {
nodePath += (" parent node is " + currentNode.name)
}
return nodePath;
}

7.3 Save and Preview

Save the template, click the Pagination Preview, the effect is as above 1.6.

Can refer to the completed template%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\Cue_point_custom_display_parent_node_multi-layer_pie_chart.cpt。

Click to download:

Cue_point_custom_display_parent_node_multi-layer_pie_chart.cpt