Pie Charts
Pie charts are percentage-based. A pie chart models percentage-based data as individual slices of pie. Each data set must be defined as a new instance of the SingleValueColumn
object. Follow these steps to configure your portlet to use pie charts.
Import the chart taglib along with the
PieChartConfig
andSingleValueColumn
classes into your bundle’sinit.jsp
file:<%@ taglib prefix="chart" uri="http://liferay.com/tld/chart" %> <%@ page import="com.liferay.frontend.taglib.chart.model.percentage.pie.PieChartConfig" %> <%@ page import="com.liferay.frontend.taglib.chart.model.SingleValueColumn" %>
Add the following Java scriptlet to the top of your
view.jsp
:<% PieChartConfig _pieChartConfig = new PieChartConfig(); _pieChartConfig.addColumn( new SingleValueColumn("data1", 85.4) ); %>
Add the
<chart>
taglib to theview.jsp
, passing the_pieChartConfig
as theconfig
attribute’s value:<chart:pie config="<%= _pieChartConfig %>" />
Awesome! Now you know how to create pie charts for your apps.