Gauge Charts
Gauge charts are percentage-based. A gauge chart shows where percentage-based data falls over a given range. Each data set must be defined as a new instance of the SingleValueColumn
object. Follow these steps to configure your portlet to use gauge charts.
Import the chart taglib along with the
GaugeChartConfig
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.gauge.GaugeChartConfig" %> <%@ page import="com.liferay.frontend.taglib.chart.model.SingleValueColumn" %>
Add the following Java scriptlet to the top of your
view.jsp
:<% GaugeChartConfig _gaugeChartConfig = new GaugeChartConfig(); _gaugeChartConfig.addColumn( new SingleValueColumn("data1", 85.4) ); %>
Add the
<chart>
taglib to theview.jsp
, passing the_gaugeChartConfig
as theconfig
attribute’s value:<chart:gauge config="<%= _gaugeChartConfig %>" />
Awesome! Now you know how to create gauge charts for your apps.