I. Overview
1. Problem description
Take the bar chart as an example. The Y-axis data obtained by the query is sorted in ascending order. Now when you want to display on the front end, change the sort to descending order to achieve the effect shown in the following figure:
2. Implementation ideas
Under Chart Properties Panel Style>Axis>Y Axis>Position, just turn on the Axis Reverse, as shown in the figure below:
II. Example
1. Prepare data
Create a New Normal Report, add the ds1 data set, the SQL statement is as follows:
SELECT EMPNAME as Name,round(sum(QUANTITY*PRICE),1) as Sales
FROM EMPLOYEE,ORDERS,ORDERSDETAIL
where EMPLOYEE.EMPID=ORDERS.EMPID and ORDERS.ORDERID=ORDERSDETAIL.ORDERID
group by EMPNAME
order by sum(QUANTITY*PRICE) desc limit 10
2. Insert chart
Take the cell chart as an example. To merge a cell, click Insert>Cell Element>Insert Chart, and select Bar Chart-Bar Chart.
In addition, drag in the data column name and sales in the H1 and I1 cells, as shown in the figure below:
The sales must be sorted in descending order. You can see that the operation has been performed in SQL.
After setting, hide the H and I columns.
3. Chart data settings
Select the chart, and select the Chart Attribute Table-Data in the chart attribute table on the right, as shown in the figure below:
4. Set the axis
Select Style>Axis>Y Axis, click to turn on the Axis Reverse, and select Custom format, as shown in the figure below:
Customize the axis label style, the JavaScript code is as follows:
function()
{var a; if (this == $("td[id^=H1-]").text()){
a="Top1"+$("td[id^=H1-]").text();} else if (this
==$("td[id^=H2-]").text()){ a="Top2"+ $("td[id^=H2-]").text();} else
if(this==$("td[id^=H3-]").text()){ a="Top3"+$("td[id^=H3-]").text(); }
else { a=this} return a; }$("td[id^=H1-]").text()Get the contents of a cell；
Top1, 2, 3 correspond to the expanded values of H1, 2, and 3 respectively, that is, when the defined coordinate value is H1, the coordinate axis is displayed as Top1+H1, and so on.
5. Set label
Choose Style>Label, customize the label text content, enter the JavaScript code, click Use HTML parsing text content, fill the label with pictures, and visually display the ranking, as shown in the following figure:
The JavaScript code is as follows:
function() {
if (this.value == $("td[id^=I1-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top1-18.png" ></td> </tr></table>';
else if (this.value == $("td[id^=I2-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top2-19.png" ></td> </tr></table>';
else if (this.value == $("td[id^=I3-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top3-20.png" ></td> </tr></table>';
else if (this.value == $("td[id^=I4-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>';
else if (this.value == $("td[id^=I5-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>';
else if (this.value == $("td[id^=I6-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';
else if (this.value == $("td[id^=I7-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>';
else if (this.value == $("td[id^=I8-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>';
else if (this.value == $("td[id^=I9-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';
else if (this.value == $("td[id^=I10-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top10.png" ></td> </tr></table>';
else return this.value;
}
6. Preview effect
1) PC
Save the template, click Pagination Preview, the effect is as follows:
2) Mobile
Both App and H5 are supported, but only axis reverse order is supported, and custom labels cannot be displayed, as shown in the following figure:
III. Template download
The completed template can be found in:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Advanced\Chart\NewColumnChart\CustomAxisLabel.cpt
Click to download the template:
Previous：Chart with Custom Multiple Axes
