Custom Labels as Images

Version

Expected Effect

When creating charts, you may want to use images as chart labels that can be displayed with graphics.

For example, when you use a bar chart to show the rankings, the following figure shows the expected effect.

Implementation Method

You can select Custom for chart labels and enter HTML codes to achieve this effect.

Data Preparation

Choose File > New General Report in the upper left corner of the designer, and select Refresh Technology as the template theme.

Create a database query named ds 1 with the SQL statement SELECT Salesperson,SUM(Sales_Volume) as Sales FROM Sales_Volume GROUP BY Salesperson ORDER BY Sales_Volume DESC, as shown in the following figure.

Paper Size Setting

Since the chart used in this example is slightly larger, increase the paper size under Template > Page Setting to prevent the template from being displayed on multiple pages during the preview, as shown in the following figure.

Report Design

Chart Insertion

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

Data Binding

Select the chart, choose Cell Element > Data on the right attribute panel, and bind the data, as shown in the following figure.

Cell Data Setting

Drag the Salesperson and Sales fields from the dataset ds1 to the cell I1 and J1 respectively. After dragging, select and right-click the two columns to hide them, as shown in the following figure.

Chart Label Setting

Select the chart and choose Cell Element > Style > Label on the right attribute panel. Complete the setting, as shown in the following figure.

The code is as follows:

function() {
if(this.value==_g().getCellValue("J1")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top1-18.png" width="62" height="50"></td> </tr></table>';
else if(this.value==_g().getCellValue("J2")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top2-19.png" width="62" height="50"></td> </tr></table>';
else if(this.value==_g().getCellValue("J3")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top3-20.png" width="62" height="50"></td> </tr></table>';
else if(this.value==_g().getCellValue("J4")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>';  
else if(this.value==_g().getCellValue("J5")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>';
else if(this.value==_g().getCellValue("J6")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';
else if(this.value==_g().getCellValue("J7")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>';
else if(this.value==_g().getCellValue("J8")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>';
else if(this.value==_g().getCellValue("J9")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';
else return this.value;}

Note:

1. When previewing a template in the designer or via a URL, you can obtain image resources using the relative path img src="../../help/picture/xxx.png" in the above code. However, after the template is mounted to the decision-making system, you need to use an absolute path, for example, img src="http://IP address:Port number/webroot/help/picture/XXX.png" (where IP address:Port number specifies the IP address and port number of your project), to obtain images.

2. this.value == _g().getCellValue("J1") is used to obtain the content in cell J1. When the label value equals the content in J1, the label is displayed as a fixed image named top1-18.png. Such a rule also prevails when the label value equals the content in other cells.

3. You can use HTML to center the label content both horizontally and vertically within a specified size range. If the label content cannot be displayed completely within the specified size range, the label content will be truncated until it can be displayed.

The images used in the code are saved in %FR_HOME%\webapps\webroot\help\picture. Since the images used for the top three are much larger than the other images, width="62" height="50" has been used in the code for these top three images.

Y Axis Reverse Order Setting

After customizing the labels, save the template and preview the effect, as shown in the following figure.

The bar chart is sorted in the ascending rather than descending order from top to bottom during preview. This is because the categories in the bar chart are sorted from bottom to top. Therefore, you need to enable Axis Reverse Order for the Y axis, as shown in the following figure.

Other Style Setting

1. Select the chart, choose Cell Element > Style > Title, and enter Ranking by Sales in Text, as shown in the following figure.

2. Deselect Show Legend. Since only one series exists and the title includes Sales, the legend does not need to be displayed in the chart.

Effect Display

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

Note:

The effect cannot be previewed on mobile terminals.

In FVS templates, you can use charts and data together within a single table component or use them separately. However, the method for obtaining cell values in HTML code here differs from that in general reports and needs to be this.value == duchamp.getWidgetByName("Table1").getCellValue(row, col). You just need to rename tables and rows/columns where cells are located according to the actual situation.

For example:

function() {
if(this.value==duchamp.getWidgetByName("Table1").getCellValue(1,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top1-18.png" width="62" height="50"></td> </tr></table>';
else if(this.value==duchamp.getWidgetByName("Table1").getCellValue(2,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top2-19.png" width="62" height="50"></td> </tr></table>';
if(this.value==duchamp.getWidgetByName("Table1").getCellValue(3,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top3-20.png" width="62" height="50"></td> </tr></table>';
else if(this.value==duchamp.getWidgetByName("Table1").getCellValue(4,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>';  
else if(this.value==duchamp.getWidgetByName("Table1").getCellValue(5,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>';
else if(this.value==duchamp.getWidgetByName("Table1").getCellValue(6,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';
else if(this.value==duchamp.getWidgetByName("Table1").getCellValue(7,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>';
else if(this.value==duchamp.getWidgetByName("Table1").getCellValue(8,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>';
else if(this.value==duchamp.getWidgetByName("Table1").getCellValue(9,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';
else return this.value;}

For details, download the templates in section "Template Download."

In FRM dashboards, you can use charts and data together within a single report block or separately. However, the method of obtaining cell values in HTML code here differs from that in general reports and needs to be this.value==_g().getWidgetByName("report0").getCellValue("J1"). You just need to rename tables and cells according to the actual situation.

For example:

function() {
if(this.value==_g().getWidgetByName("report0").getCellValue("J1")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top1-18.png" width="62" height="50"></td> </tr></table>';
else if(this.value==_g().getWidgetByName("report0").getCellValue("J2")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top2-19.png" width="62" height="50"></td> </tr></table>';
else if(this.value==_g().getWidgetByName("report0").getCellValue("J3")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top3-20.png" width="62" height="50"></td> </tr></table>';
else if(this.value==_g().getWidgetByName("report0").getCellValue("J4")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>';  
else if(this.value==_g().getWidgetByName("report0").getCellValue("J5")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>';
else if(this.value==_g().getWidgetByName("report0").getCellValue("J6")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';
else if(this.value==_g().getWidgetByName("report0").getCellValue("J7")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>';
else if(this.value==_g().getWidgetByName("report0").getCellValue("J8")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>';
else if(this.value==_g().getWidgetByName("report0").getCellValue("J9")) return '<table style="width:100%;height:100%;"> <tr valign=middle> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';
else return this.value;}

Images in the above examples cannot be matched with category names directly. You need to obtain the cell values before the matching. When the name of the image referenced by the label is the same as the category name specified by this.category in the chart, you can enter the following code:

function(){return'<p><img src ="../../help/picture/emoji/'+this.category+'.gif" width="30" height="30"></p>';}

Taking the chart in FVS as an example, the following figure shows the effect.

Note:

1. When previewing a template in the designer or via a URL, you can obtain image resources using the relative path img src="../../help/picture/xxx.png" in the above code. However, after the template is mounted to the decision-making system, you need to use an absolute path, for example, img src="http://IP address:Port number/webroot/help/picture/XXX.png" (where IP address:Port number specifies the IP address and port number of your project), to obtain images.

2. The code can be used in FVS visualization dashboards, general reports, and FRM dashboards. You can also preview the templates using the code on mobile terminals.

For details, you can download the example templates.

Custom Labels as Images.cpt

Custom Labels as Images.fvs

Custom Labels as Images.frm