Customize the Cursor Hovering Over the Chart

1. Expected effect

When the mouse is moved to the series of the chart, it is hoped that an eye-catching cursor will appear to prompt the user to operate, as shown in the following figure:

2. Implementation ideas

Use JS to set the cursor as a custom picture, rename the custom picture cursor.png to「cursor.cur」, and put it in the %FR_HOME%\webapps\webroot\help\picture directory.

Note: The image format must be .cur or .ani format.

1. New General Report

1) Create a New General Report, create a new data set ds1, the database query statement is: SELECT * FROM Sales_Volume

2) Merge a range of cells and insert a pie chart, as shown in the figure below to bind the chart data:

3) In the menu bar, select Template>Web Attributes>Pagination Preview>Individually set for the template, and then add a Loading End event, as shown in the following figure:

The JS code is as follows:

setTimeout(function(){
$("td[id^=A1-]").find("path").bind('mouseover',function(){ 
     this.style.cursor="url('../../help/picture/cursor.cur'),pointer";
})
},1000)

Note: A1 in td[id^=A1-] is the cell where the chart is located.

2. Decision-making Report

1) Drag the pie chart into the main body of the decision-making report design, and bind the chart data according to II.1.

2) Add a After Initialization event to the pie chart, as shown in the following figure:

The JS code is as follows:

setTimeout(function(){
$("div[widgetname=CHART0]").find("path").bind('mouseover',function(){ 
     this.style.cursor="url('../../help/picture/cursor.cur'),pointer";
})
},1000)

Note: CHART0 in div[widgetname=CHART0] is the component name of the chart block, pay attention to all capitals.

The completed template can be found in:

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Primary\Chart\Customize the Cursor Hovering Over the Chart Example 1.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Primary\Chart\Customize the Cursor Hovering Over the Chart Example 2.frm

Click to download the template:

Customize the Cursor Hovering Over the Chart Example 1.cpt

Customize the Cursor Hovering Over the Chart Example 2.frm

Custom picture download:

cursor.png