Skip to content

[WC-3209]: mark Any Chart pages as deprecated and refresh Charts configuration docs #11719

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rahmanunver wants to merge 2 commits into
base: development
Choose a base branch
from
Open

[WC-3209]: mark Any Chart pages as deprecated and refresh Charts configuration docs #11719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b852167
docs(charts): mark Any Chart pages as deprecated in refguide9 and ref…
rahmanunver Aug 11, 2026
e2f47c5
docs(charts): update Charts configuration pages to match the current …
rahmanunver Aug 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 17 additions & 20 deletions content/en/docs/marketplace/platform-supported-content/widgets/charts/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
* [Use Custom Chart](/appstore/widgets/charts-custom-usage/)
* [Fine-Tune a Chart with Chart Playground](/appstore/widgets/chart-advanced-tuning/)
* [Use the Charts Theme](/appstore/widgets/charts-theme/)
* [Create a Dynamic Series Chart](/appstore/widgets/charts-dynamic-series/)
* [Create a Multiple Series Chart](/appstore/widgets/charts-dynamic-series/)
* [Use a Chart with a REST Data Source](/appstore/widgets/charts-basic-rest/)

{{% alert color="info" %}}
Expand Down Expand Up @@ -389,16 +389,15 @@

A **Line chart** (scatter chart) should have one or more series, each displaying commonly grouped data points.

A series' data can be retrieved from the database, by a microflow, or from a REST endpoint:
A series' data can be retrieved from the database or by a microflow:

1. Place the widget in a page within the context of an entity.
2. Select the either **Static** or **Dynamic** for the **Series**.
3. Select a **Data entity** for the chart values.
4. Select the **Data source**:
* If the **Data source** selected is **Database**, optionally change the **XPath constraint**
* If the **Data source** selected is **Microflow,** select a **Microflow** that returns the series values
* If the **Data source** selected is **REST endpoint**, enter the **REST URL**
5. If you set a **Dynamic** series, this will retrieve all the chart series in one configuration. Add configurations for them on the **Dynamic series** tab.
1. Place the widget in a page.
2. On the **General** tab, in the **Data source** section, add a **Series** item.
3. Select either **Single series** or **Multiple series** for **Data set**.

Check failure on line 396 in content/en/docs/marketplace/platform-supported-content/widgets/charts/_index.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Mendix.CompoundWords] Use 'dataset' instead of 'Data set'

Raw Output:
{"message": "[Mendix.CompoundWords] Use 'dataset' instead of 'Data set'", "location": {"path": "content/en/docs/marketplace/platform-supported-content/widgets/charts/_index.md", "range": {"start": {"line": 396, "column": 65}}}, "severity": "ERROR"}
4. Select the **Data source** for the chart values:
* If the **Data source** selected is **Database**, select the entity and optionally change the **XPath constraint**
* If the **Data source** selected is **Microflow**, select a **Microflow** that returns the series values
5. If you set **Multiple series**, one data source provides the data points for every series. Select the attribute to split them on in **Group by**: data points that share a value form one series.

{{% alert color="info" %}}
The line chart's X-axis provides support for dates, and thus the line chart can be configured as a [time series chart](#time-series).
Expand All @@ -418,17 +417,15 @@

#### Pie Chart {#pie-chart}

Unlike the chart types above, the **Pie chart** requires no series.
Unlike the chart types above, the **Pie chart** takes a single data source instead of a list of series.

These are the properties for configuring Pie chart data:
These are the properties for configuring Pie chart data, in the **Data source** section of the **General** tab:

* **Data source** tab
* **Entity** (required) – the entity from which the data values will be retrieved
* **Data points** tab
* **Name attribute** (required) – the attribute that contains the data point captions
* **Value attribute** (required) – the attribute that contains the data point values
* **Color attribute** (required) – the attribute that contains the data point colors
* **Sort attribute** – the attribute to use for sorting the X-axis data
* **Series** (required) – the data source from which the slices are retrieved
* **Series name** (required) – the text template that renders the slice captions
* **Value attribute** (required) – the attribute that contains the slice values
* **Sort attribute** – the attribute to use for sorting the slices, combined with **Sort order**
* **Slice color** – an expression that returns the color of the slice

#### Time Series Chart {#time-series}

Expand All @@ -450,7 +447,7 @@

The charts in this widget are based on the [mendixlabs/charts](https://github.com/mendixlabs/charts/issues) library. As such, the widget provides support for advanced users to extend or overwrite the basic settings by adding the chart properties as JSON.

To enable this feature, go to the **Mode** option in the **Advanced** properties tab. For the [Line chart](#line-chart) and [Column chart](#column-chart), each series has its own **Advanced** tab for specialized configurations.
To enable this feature, select **Enable advanced options** on the **General** tab. You can then enter JSON in **Custom layout** and **Custom configurations** on the **Advanced** tab. Each series also has a **Custom series options** property in its own **Advanced** section for specialized configurations.

The available advanced options and their usage are described below.

Expand Down
21 changes: 7 additions & 14 deletions ...cs/marketplace/platform-supported-content/widgets/charts/charts-basic-create.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,18 +75,10 @@

1. Open the page with the Charts widget.
2. Right-click the **Area chart** and select **Properties**.
3. In the tab **Chart properties**, add a new **Series** property.

{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-series.png" alt="Chart Series" class="no-border" >}}

4. In the tab **Data source**, select *Value* as the **Entity**.
5. Set the **Data source** as **Database**.

{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/chart-add-entity.png" alt="select Entity" class="no-border" >}}

6. In the tab **Data points**, select *xValue* as the **X-axis data attribute** and *yValue* as the **Y-axis data attribute**.

{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-data-points.png" alt="select Data Points" class="no-border" >}}
3. On the **General** tab, in the **Data source** section, add a new **Series** item.
4. In the **General** section of the series, leave **Data set** set to **Single series**.

Check failure on line 79 in content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-create.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Mendix.CompoundWords] Use 'dataset' instead of 'Data set'

Raw Output:
{"message": "[Mendix.CompoundWords] Use 'dataset' instead of 'Data set'", "location": {"path": "content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-create.md", "range": {"start": {"line": 79, "column": 54}}}, "severity": "ERROR"}
5. Set **Data source** to **Database** and select the *Value* entity.
6. Select *xValue* as the **X axis attribute** and *yValue* as the **Y axis attribute**.

### Viewing the Chart

Expand All @@ -105,6 +97,7 @@

## Read More

* [Use a Chart With a REST Data Source](/howto/front-end/charts-basic-rest/)
* [Create a Multiple Series Chart](/appstore/widgets/charts-dynamic-series/)
* [Use a Chart With a REST Data Source](/appstore/widgets/charts-basic-rest/)
* [Use Any Chart](/appstore/widgets/charts-any-usage/)
* [Use Charts Themes](/howto/front-end/charts-theme/)
* [Use Charts Themes](/appstore/widgets/charts-theme/)
58 changes: 30 additions & 28 deletions ...docs/marketplace/platform-supported-content/widgets/charts/charts-basic-rest.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,22 @@
title: "Use a Chart with a REST Data Source"
url: /appstore/widgets/charts-basic-rest/
weight: 60
description: "Describes how to plot data from a REST service in a chart by retrieving the data in a microflow and using that microflow as the chart's data source."
aliases:
- /howto/front-end/charts-basic-rest/
---

## Introduction

With the Charts widgets, you can use data from a REST Service to plot graphs.
With the Charts widget, you can plot data that comes from a REST service.

The widget does not call a REST service itself. Its data source accepts a database query, a microflow, a nanoflow, or an association, so you retrieve the REST data in a microflow and point the chart at that microflow.

This how-to teaches you how to do the following:

* Publish a REST API
* Use a REST endpoint as a data source for the Charts widget
* Retrieve the data from a REST service in a microflow
* Use that microflow as the data source for the Charts widget

## Prerequisites

Expand All @@ -24,7 +28,7 @@

## Setting up Data to be Exposed by a REST Endpoint

Mendix allows you to publish REST Web services natively from Studio Pro. Using these capabilities you can publish a REST service and use it in our Charts widget to plot graphs.
Mendix allows you to publish REST web services natively from Studio Pro. This how-to publishes a service first, so that there is an endpoint to consume in the next sections.

To create an Area Chart with data from a REST service, follow these steps:

Expand Down Expand Up @@ -68,40 +72,38 @@
1. Add **Export mapping**.
{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-rest/charts-rest-export-mapping.png" alt="Charts Rest Export Mapping" class="no-border" >}}

## Using REST as a Data Source

To use the REST Data source endpoint in your chart, follow these steps:

1. Create a page in your app containing an **Area chart** widget.

1. Double-click the **Area chart** widget.

1. In the tab **Chart properties**, add a new chart **Series** property.

1. Add **Series name** and **Entity**.
## Retrieving the REST Data in a Microflow

1. Select **Data source** REST endpoint.
To make the published data available to the chart, consume the service and return its results from a microflow:

{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-rest/charts-rest-series.png" alt="Chart Rest Series" class="no-border" >}}
1. Add a [consumed REST service](/refguide/consumed-rest-service/) for the endpoint you published.
1. Add an [import mapping](/refguide/import-mappings/) that maps the JSON response to the **Value** entity.
1. Create a microflow named *DS_ValuesFromREST*.
1. In the microflow, add a [Call REST service](/refguide/call-rest-action/) activity that calls the endpoint and applies the import mapping.
1. Set the list of **Value** objects produced by the mapping as the return value of the microflow.

1. Add the **REST URL**.

{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-rest/charts-rest-url.png" alt="Chart Rest URL" class="no-border" >}}

1. In the tab **Data points**, select the **X-axis data attribute** and the **Y-axis data attribute**.

{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-create/charts-data-points.png" alt="select Data Points" class="no-border" >}}
{{% alert color="info" %}}
The mapping can return non-persistable objects. The chart only reads the attributes you select for the axes, so the objects do not have to be committed to the database.
{{% /alert %}}

1. Add Parameters to the REST Request. The **contextId**, **series name** are provided by default.
## Using the Microflow as a Chart Data Source

{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-rest/charts-rest-parameters.png" alt="select Data Points" class="no-border" >}}
To plot the retrieved data, follow these steps:

1. Create a page in your app containing an **Area chart** widget.
1. Double-click the **Area chart** widget to open its properties.
1. On the **General** tab, in the **Data source** section, add a new **Series** item.
1. In the **General** section of the series, leave **Data set** set to **Single series**.

Check failure on line 96 in content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-rest.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Mendix.CompoundWords] Use 'dataset' instead of 'Data set'

Raw Output:
{"message": "[Mendix.CompoundWords] Use 'dataset' instead of 'Data set'", "location": {"path": "content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-basic-rest.md", "range": {"start": {"line": 96, "column": 54}}}, "severity": "ERROR"}
1. Set **Data source** to **Microflow** and select *DS_ValuesFromREST*.
1. Set **Series name** to the text that should appear in the legend.
1. Select the **X axis attribute** and the **Y axis attribute**.
1. Run your app and view the chart.

{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-rest/charts-rest-area-chart.png" alt="Show Chart" class="no-border" >}}
{{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-basic-rest/charts-rest-area-chart.png" alt="Area chart plotting data retrieved from a REST service" class="no-border" >}}

## Read More

* [Use Chart Data Source REST](/howto/front-end/charts-basic-create/)
* [Create a Basic Chart](/appstore/widgets/charts-basic-create/)
* [Create a Multiple Series Chart](/appstore/widgets/charts-dynamic-series/)
* [Use Any Chart](/appstore/widgets/charts-any-usage/)
* [Use Theme Charts](/howto/front-end/charts-theme/)
* [Use Charts Themes](/appstore/widgets/charts-theme/)
Loading