Step Charts

Step charts contain multiple sets of data. A step chart steps between the points of data, resembling steps. 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 step charts.

Import the chart taglib along with the StepChartConfig 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.step.StepChartConfig" %>
<%@ page import="com.liferay.frontend.taglib.chart.model.MultiValueColumn" %>

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

<%
StepChartConfig _stepChartConfig = new StepChartConfig();

_stepChartConfig.addColumns(
  new MultiValueColumn("data1", 100, 20, 30),
  new MultiValueColumn("data2", 20, 70, 100));
}
%>

Add the <chart> taglib to the view.jsp, passing the _stepChartConfig as the config attribute’s value:
```
<chart:step
  config="<%= _stepChartConfig %>"
/>
```

A step chart steps between the points of data, resembling steps.

You can also use an area step chart if you prefer. An area step chart highlights the area covered by a step graph.

<chart:area-step
  config="<%= _stepChartConfig %>"
/>

An area step chart highlights the area covered by a step graph.

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

Step Charts

Step Charts

Related Topics

Not finding what you're looking for?