Bar Charts

Bar charts contain multiple sets of data. A bar chart models the data in bars. 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. This tutorial shows how to configure your portlet to use bar charts.

Follow these steps:

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

    <%@ taglib prefix="chart" uri="" %>
    <%@ page import="" %>
    <%@ page import="com.liferay.frontend.taglib.chart.model.MultiValueColumn" %>
  2. Add the following Java scriptlet to the top of your view.jsp:

    BarChartConfig _barChartConfig = new BarChartConfig();
    	new MultiValueColumn("data1", 100, 20, 30),
    	new MultiValueColumn("data2", 20, 70, 100)
  3. Add the <chart> taglib to the view.jsp, passing the _barChartConfig as the config attribute’s value:

      config="<%= _barChartConfig %>"

Figure 1: A bar chart models the data in bars.

Figure 1: A bar chart models the data in bars.

Line Charts

Donut Charts

Combination Charts

« Using the Chart Taglib in Your PortletsLine Charts »
Was this article helpful?
0 out of 0 found this helpful