Skip to content

Commit

Permalink
Merge pull request #5007 from DavidOMontenegro/LRDOCS-7645-and-LRDOCS…
Browse files Browse the repository at this point in the history 
…-7647-and-LRDOCS-7648-multiple-problems-in-charts

LRDOCS-7645 LRDOCS-7647 LRDOCS-7648 Multiple Issues in Charts 7.2
  • Loading branch information
@sez11a
sez11a authored Jan 30, 2024
2 parents e9bdf3d + 991aeba commit 1b72343
Show file tree
Hide file tree
Showing 13 changed files with 194 additions and 201 deletions.
14 changes: 7 additions & 7 deletions ...end/03-front-end-taglibs/08-chart-taglibs/01-using-chart-taglibs-intro.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ header-id: using-the-chart-taglib-in-your-portlets

[TOC levels=1-4]

Lines, splines, bars, pies and more, the Chart tag Library provides everything
you need to model data. Each taglib gives you access to the corresponding
[Clay component](https://github.com/liferay/clay/tree/2.x-stable/packages/clay-charts/src).
Lines, splines, bars, pies and more, the Chart tag Library provides everything
you need to model data. Each taglib gives you access to the corresponding
[Clay component](https://github.com/liferay/clay/tree/2.x-stable/packages/clay-charts/src).
These components contain the default configuration for the UI.

To use the Chart taglib in your apps, add the following declaration to your JSP:
Expand All @@ -17,8 +17,8 @@ To use the Chart taglib in your apps, add the following declaration to your JSP:
<%@ taglib prefix="chart" uri="http://liferay.com/tld/chart" %>
```

This section covers the types of charts you can create with the Chart taglibs.
Each article contains a set of chart examples along with sample Java data and a
figure displaying the rendered results.
This section covers the types of charts you can create with the Chart taglibs.
Each article contains a set of chart examples along with sample Java data and a
figure displaying the rendered results.

![Figure 1: You can create many different types of charts with the chart taglibs.](../../../../images/chart-taglib-sample-portlet.png)
![Figure 1: You can create many different types of charts with the chart taglibs.](../../../../images/chart-taglib-sample-portlet.png)
25 changes: 12 additions & 13 deletions ...icles/02-front-end/03-front-end-taglibs/08-chart-taglibs/02-bar-charts.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ header-id: bar-charts

[TOC levels=1-4]

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](@app-ref@/foundation/latest/javadocs/com/liferay/frontend/taglib/chart/model/MultiValueColumn.html),
which takes an ID and a set of values. Follow these steps to configure your
portlet to use bar charts.

1. Import the chart taglib along with the `BarChartConfig` and
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](https://docs.liferay.com/portal/7.2-latest/apps/frontend-taglib-2.0.2/javadocs/com/liferay/frontend/taglib/chart/model/MultiValueColumn.html),
which takes an ID and a set of values. Follow these steps to configure your
portlet to use bar charts.

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

```markup
Expand All @@ -32,11 +32,10 @@ portlet to use bar charts.
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
3. Add the `<chart>` taglib to the `view.jsp`, passing the `_barChartConfig` as
the `config` attribute's value:
```markup
Expand All @@ -47,10 +46,10 @@ portlet to use bar charts.
![Figure 1: A bar chart models the data in bars.](../../../../images/chart-taglib-bar.png)
Awesome! Now you know how to create bar charts for your apps.
Awesome! Now you know how to create bar charts for your apps.
## Related Topics
- [Line Charts](/docs/7-2/reference/-/knowledge_base/r/line-charts)
- [Scatter Charts](/docs/7-2/reference/-/knowledge_base/r/scatter-charts)
- [Spline Charts](/docs/7-2/reference/-/knowledge_base/r/spline-charts)
- [Donut Charts](/docs/7-2/reference/-/knowledge_base/r/donut-charts)
- [Combination Charts](/docs/7-2/reference/-/knowledge_base/r/combination-charts)
28 changes: 14 additions & 14 deletions ...cles/02-front-end/03-front-end-taglibs/08-chart-taglibs/03-line-charts.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ header-id: line-charts

[TOC levels=1-4]

Line charts contain multiple sets of data. A Line chart displays the data
linearly. Each data series (created with the `addColumns()` method) is defined
with a new instance of the
[`MultiValueColumn` object](@app-ref@/foundation/latest/javadocs/com/liferay/frontend/taglib/chart/model/MultiValueColumn.html),
which takes an ID and a set of values. Follow these steps to configure your
portlet to use line charts.

1. Import the chart taglib along with the `LineChartConfig` and
Line charts contain multiple sets of data. A Line chart displays the data
linearly. Each data series (created with the `addColumns()` method) is defined
with a new instance of the
[`MultiValueColumn` object](https://docs.liferay.com/portal/7.2-latest/apps/frontend-taglib-2.0.2/javadocs/com/liferay/frontend/taglib/chart/model/MultiValueColumn.html),
which takes an ID and a set of values. Follow these steps to configure your
portlet to use line charts.

1. Import the chart taglib along with the `LineChartConfig` and
`MultiValueColumn` classes into your bundle's `init.jsp` file:

```markup
Expand All @@ -30,12 +30,12 @@ portlet to use line charts.
_lineChartConfig.addColumns(
new MultiValueColumn("data1", 100, 20, 30),
new MultiValueColumn("data2", 20, 70, 100));
}
new MultiValueColumn("data2", 20, 70, 100)
);
%>
```
3. Add the `<chart>` taglib to the `view.jsp`, passing the `_lineChartConfig`
3. Add the `<chart>` taglib to the `view.jsp`, passing the `_lineChartConfig`
as the `config` attribute's value:
```markup
Expand All @@ -46,10 +46,10 @@ portlet to use line charts.
![Figure 1: A Line chart displays the data linearly.](../../../../images/chart-taglib-line.png)
Awesome! Now you know how to create line charts for your apps.
Awesome! Now you know how to create line charts for your apps.
## Related Topics
- [Bar Charts](/docs/7-2/reference/-/knowledge_base/r/bar-charts)
- [Scatter Charts](/docs/7-2/reference/-/knowledge_base/r/scatter-charts)
- [Spline Charts](/docs/7-2/reference/-/knowledge_base/r/spline-charts)
- [Step Charts](/docs/7-2/reference/-/knowledge_base/r/step-charts)
- [Predictive Charts](/docs/7-2/reference/-/knowledge_base/r/predictive-charts)
25 changes: 12 additions & 13 deletions ...s/02-front-end/03-front-end-taglibs/08-chart-taglibs/04-scatter-charts.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ header-id: scatter-charts

[TOC levels=1-4]

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](@app-ref@/foundation/latest/javadocs/com/liferay/frontend/taglib/chart/model/MultiValueColumn.html),
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
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](https://docs.liferay.com/portal/7.2-latest/apps/frontend-taglib-2.0.2/javadocs/com/liferay/frontend/taglib/chart/model/MultiValueColumn.html),
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:

```markup
Expand All @@ -31,11 +31,10 @@ portlet to use scatter charts.
_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`
3. Add the `<chart>` taglib to the `view.jsp`, passing the `_scatterChartConfig`
as the `config` attribute's value:
```markup
Expand All @@ -46,10 +45,10 @@ portlet to use scatter charts.
![Figure 1: A scatter chart models the data as individual points.](../../../../images/chart-taglib-scatter.png)
Awesome! Now you know how to create scatter charts for your apps.
Awesome! Now you know how to create scatter charts for your apps.
## Related Topics
- [Step Charts](/docs/7-2/reference/-/knowledge_base/r/step-charts)
- [Line Charts](/docs/7-2/reference/-/knowledge_base/r/line-charts)
- [Spline Charts](/docs/7-2/reference/-/knowledge_base/r/spline-charts)
- [Step Charts](/docs/7-2/reference/-/knowledge_base/r/step-charts)
- [Predictive Charts](/docs/7-2/reference/-/knowledge_base/r/predictive-charts)
34 changes: 17 additions & 17 deletions ...es/02-front-end/03-front-end-taglibs/08-chart-taglibs/05-spline-charts.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ header-id: spline-charts

[TOC levels=1-4]

Spline charts contain multiple sets of data. A spline chart connects points of
data with a smooth curve. Each data series
(created with the `addColumns()` method) is defined with a new instance of the
[`MultiValueColumn` object](@app-ref@/foundation/latest/javadocs/com/liferay/frontend/taglib/chart/model/MultiValueColumn.html),
which takes an ID and a set of values. Follow these steps to configure your
portlet to use spline charts.

1. Import the chart taglib along with the `SplineChartConfig` and
Spline charts contain multiple sets of data. A spline chart connects points of
data with a smooth curve. Each data series
(created with the `addColumns()` method) is defined with a new instance of the
[`MultiValueColumn` object](https://docs.liferay.com/portal/7.2-latest/apps/frontend-taglib-2.0.2/javadocs/com/liferay/frontend/taglib/chart/model/MultiValueColumn.html),
which takes an ID and a set of values. Follow these steps to configure your
portlet to use spline charts.

1. Import the chart taglib along with the `SplineChartConfig` and
`MultiValueColumn` classes into your bundle's `init.jsp` file:

```markup
Expand All @@ -30,12 +30,12 @@ portlet to use spline charts.
_splineChartConfig.addColumns(
new MultiValueColumn("data1", 100, 20, 30),
new MultiValueColumn("data2", 20, 70, 100));
}
new MultiValueColumn("data2", 20, 70, 100)
);
%>
```
3. Add the `<chart>` taglib to the `view.jsp`, passing the `_splineChartConfig`
3. Add the `<chart>` taglib to the `view.jsp`, passing the `_splineChartConfig`
as the `config` attribute's value:
```markup
Expand All @@ -46,21 +46,21 @@ portlet to use spline charts.
![Figure 1: A spline chart connects points of data with a smooth curve.](../../../../images/chart-taglib-spline.png)
You can also use an area spline chart if you prefer. An area spline chart
You can also use an area spline chart if you prefer. An area spline chart
highlights the area under the spline curve.
```markup
<chart:area-spline
config="<%= _splineChartConfig %>"
<chart:area-spline
config="<%= _splineChartConfig %>"
/>
```

![Figure 2: An area spline chart highlights the area under the spline curve.](../../../../images/chart-taglib-area-spline.png)

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

## Related Topics

- [Bar Charts](/docs/7-2/reference/-/knowledge_base/r/bar-charts)
- [Scatter Charts](/docs/7-2/reference/-/knowledge_base/r/scatter-charts)
- [Line Charts](/docs/7-2/reference/-/knowledge_base/r/line-charts)
- [Step Charts](/docs/7-2/reference/-/knowledge_base/r/step-charts)
- [Scatter Charts](/docs/7-2/reference/-/knowledge_base/r/scatter-charts)
34 changes: 17 additions & 17 deletions ...cles/02-front-end/03-front-end-taglibs/08-chart-taglibs/06-step-charts.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ header-id: step-charts

[TOC levels=1-4]

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](@app-ref@/foundation/latest/javadocs/com/liferay/frontend/taglib/chart/model/MultiValueColumn.html),
which takes an ID and a set of values. Follow these steps to configure your
portlet to use step charts.

1. Import the chart taglib along with the `StepChartConfig` and
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](https://docs.liferay.com/portal/7.2-latest/apps/frontend-taglib-2.0.2/javadocs/com/liferay/frontend/taglib/chart/model/MultiValueColumn.html),
which takes an ID and a set of values. Follow these steps to configure your
portlet to use step charts.

1. Import the chart taglib along with the `StepChartConfig` and
`MultiValueColumn` classes into your bundle's `init.jsp` file:

```markup
Expand All @@ -30,12 +30,12 @@ portlet to use step charts.
_stepChartConfig.addColumns(
new MultiValueColumn("data1", 100, 20, 30),
new MultiValueColumn("data2", 20, 70, 100));
}
new MultiValueColumn("data2", 20, 70, 100)
);
%>
```
3. Add the `<chart>` taglib to the `view.jsp`, passing the `_stepChartConfig`
3. Add the `<chart>` taglib to the `view.jsp`, passing the `_stepChartConfig`
as the `config` attribute's value:
```markup
Expand All @@ -46,21 +46,21 @@ portlet to use step charts.
![Figure 1: A step chart steps between the points of data, resembling steps.](../../../../images/chart-taglib-step.png)
You can also use an area step chart if you prefer. An area step chart highlights
the area covered by a step graph.
You can also use an area step chart if you prefer. An area step chart highlights
the area covered by a step graph.
```markup
<chart:area-step
config="<%= _stepChartConfig %>"
<chart:area-step
config="<%= _stepChartConfig %>"
/>
```

![Figure 2: An area step chart highlights the area covered by a step graph.](../../../../images/chart-taglib-area-step.png)

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

## Related Topics

- [Line Charts](/docs/7-2/reference/-/knowledge_base/r/line-charts)
- [Scatter Charts](/docs/7-2/reference/-/knowledge_base/r/scatter-charts)
- [Spline Charts](/docs/7-2/reference/-/knowledge_base/r/spline-charts)
- [Scatter Charts](/docs/7-2/reference/-/knowledge_base/r/scatter-charts)
24 changes: 12 additions & 12 deletions ...-front-end/03-front-end-taglibs/08-chart-taglibs/07-combination-charts.markdown
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ Combination charts have minor differences from other charts. In a combination
chart, you must define the representation type of each data set: `AREA`,
`AREA_SPLINE`, `AREA_STEP`, `BAR`, `BUBBLE`, `DONUT`, `GAUGE`, `LINE`, `PIE`,
`SCATTER`, `SPLINE`, or `STEP`. Each data set in a combination chart is an
instance of the `TypedMultiValueColumn` object. Each object receives an ID, the
representation type, and values for the data. Follow these steps to configure
your portlet to use combination charts.
instance of the [`TypedMultiValueColumn` object](https://docs.liferay.com/portal/7.2-latest/apps/frontend-taglib-2.0.2/javadocs/com/liferay/frontend/taglib/chart/model/TypedMultiValueColumn.html). Each object receives an ID, the
representation type, and values for the data. Follow these steps to configure
your portlet to use combination charts.

1. Import the chart taglib along with the `CombinationChartConfig`,
`MultiValueColumn`, and `MultiValueColumn.Type` classes into your bundle's
1. Import the chart taglib along with the `CombinationChartConfig`,
`MultiValueColumn`, and `MultiValueColumn.Type` classes into your bundle's
`init.jsp` file:

```markup
Expand All @@ -29,7 +29,7 @@ your portlet to use combination charts.
```java
<%
CombinationChartConfig _combinationChartConfig =
CombinationChartConfig _combinationChartConfig =
new CombinationChartConfig();
_combinationChartConfig.addColumns(
Expand All @@ -44,14 +44,14 @@ your portlet to use combination charts.
new TypedMultiValueColumn(
"data5", Type.BAR, 130, 120, 150, 140, 160, 150),
new TypedMultiValueColumn(
"data6", Type.AREA, 90, 70, 20, 50, 60, 120));
"data6", Type.AREA, 90, 70, 20, 50, 60, 120)
);
_combinationChartConfig.addGroup("data1", "data2");
%>
```
3. Add the `<chart>` taglib to the `view.jsp`, passing the
3. Add the `<chart>` taglib to the `view.jsp`, passing the
`_combinationChartConfig` as the `config` attribute's value:
```markup
Expand All @@ -62,10 +62,10 @@ your portlet to use combination charts.
![Figure 1: A combination chart displays a variety of data set types.](../../../../images/chart-taglib-combination.png)
Awesome! Now you know how to create combination charts for your apps.
Awesome! Now you know how to create combination charts for your apps.
## Related Topics
- [Bar Charts](/docs/7-2/reference/-/knowledge_base/r/bar-charts)
- [Donut Charts](/docs/7-2/reference/-/knowledge_base/r/donut-charts)
- [Pie Charts](/docs/7-2/reference/-/knowledge_base/r/pie-charts)
- [Line Charts](/docs/7-2/reference/-/knowledge_base/r/line-charts)
- [Geomap Charts](/docs/7-2/reference/-/knowledge_base/r/geomap-charts)
Loading

0 comments on commit 1b72343

Please sign in to comment.