Scatter Charts

Scatter charts contain multiple sets of data. A scatter chart models the data as individual points. Each data series (created with the addColumns() method) is defined with a new instance of the MultiValueColumn object, which takes an ID and a set of values. Follow these steps to configure your portlet to use scatter charts.

1. Import the chart taglib along with the ScatterChartConfig and MultiValueColumn classes into your bundle’s init.jsp file:

   <%@ taglib prefix="chart" uri="http://liferay.com/tld/chart" %>
   <%@ page import="com.liferay.frontend.taglib.chart.model.point.scatter.ScatterChartConfig" %>
   <%@ page import="com.liferay.frontend.taglib.chart.model.MultiValueColumn" %>
   

2. Add the following Java scriptlet to the top of your view.jsp:

   <%
   ScatterChartConfig _scatterChartConfig = new ScatterChartConfig();
   
   _scatterChartConfig.addColumns(
     new MultiValueColumn("data1", 100, 20, 30),
     new MultiValueColumn("data2", 20, 70, 100));
   }
   %>
   

3. Add the <chart> taglib to the view.jsp, passing the _scatterChartConfig as the config attribute’s value:

   <chart:scatter
     config="<%= _scatterChartConfig %>"
   />
   

Awesome! Now you know how to create scatter charts for your apps.

Related Topics

• Step Charts
• Line Charts
• Spline Charts

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center