Displaying All Series in Tooltips

Version

Application Scenario

For a category with multiple series in a chart, you may want to display prompt information for all series within the category. If Common is selected under Prompt > Content, you can tick Display All Series under Prompt > Display Strategy to realize the effect.

However, if you want to modify other prompt styles, for example, setting different units for different series as shown in the following figure, you need to customize the prompt style.

Implementation Method

Select Custom under Style > Prompt > Content, and use IF conditional statements in the code to set different prompt content for each series. When using HTML statements to define the prompt style in the code, you need to select Use HTML to Parse Text Content.

Data Preparation

This example uses the template in Chart with Custom Multiple Axes. You can download the template Column Chart with Custom Multiple Axes.cpt and then open the template in the designer, as shown in the following figure.

Displaying All Series in the Common Prompt

The following shows the effect after you select Common for Content and tick Displaying All Series in Display Strategy.

Select the chart and choose Cell Element > Style > Prompt on the right property panel. Select Common for Content and tick Category Name, Series, and Value in Text. Tick Display All Series in Display Strategy, as shown in the following figure.

Save the report and click Pagination Preview. The following figure shows the effect. The series in the chart have no units.

Note:

If the units of all series are the same, you can set the text format, as shown in the following figure.

Custom Prompt

Select Custom for the prompt content and enter the following code.

function(){
var points = this.points; // It represents different series for the same category.    
var a =this.category;     
var b;     
for(var i = 0, len = points.length; i < len; i++) {          
if(points[i].series.visible){               
if(this.points[i].seriesName=="Rainfall")           
b = FR.contentFormat(this.points[i].value, '#0mm');            
else  if(this.points[i].seriesName=="Sea-LevelPressure")               
b = FR.contentFormat(this.points[i].value, '#0mb');    
else
b = FR.contentFormat(this.points[i].value, '#0℃');    
a += '<br/>'+"<font color='"+points[i].color+"'>●</font>"+points[i].seriesName+':'+b;
}   
}     
return a;
}
Show Code

Select Use HTML to Parse Text Content, as shown in the following figure.

Effect Display

PC

Save the template and click Pagination Preview. The section "Application Scenario" shows the effect.

Note:

On the mobile terminals, whether Display All Series is ticked or not, all series will be displayed by default.

Mobile Terminal

The template 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 Prompts for Charts with Multiple-Series.cpt.