With the Charts widgets, you can use data from a REST Service to plot graphs.
This how-to will teach you how to do the following:
- Publish a REST API
- Use a REST endpoint as a data source for the Charts widget
Before starting this how-to, make sure you have completed the following prerequisites:
- Create an app
- Import the latest Charts Widgets from the Mendix Marketplace
3 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.
To create an Area Chart with data from a REST service, follow these steps:
For more information on publishing a REST API refer to this Mendix document: Published REST Operation
- Create a new Module in your app.
- Rename the module to ChartsREST.
- Open the Domain model.
- Create Value and Series entities with the attributes and association shown in the picture below.
- Right-click Value and select Generate overview pages….
- Add the Value_NewEdit page generated to your navigation.
- Run the app.
- In your browser, open the NewEdit page.
- Add values and series by entering data in the appropriate fields.
4 Publishing the Service
To use data from a model in the REST service, you need to create a JSON structure.
4.1 Creating the Structure
- Create a JSON Structure
4.2 Configuring the REST Service
To configure the REST service, follow these steps:
Add Published REST service.
Add REST Service Microflow.
Add Export mapping.
5 Using REST as a Data Source
To use the REST Data source endpoint in your chart, follow these steps:
Create a page in your app containing an Area chart widget.
Double click the Area chart widget.
In the tab Chart properties, add a new chart Series property.
Add Series name and Entity.
Select Data source REST endpoint.
Add the REST URL.
In the tab Data points, select the X-axis data attribute and the Y-axis data attribute.
Add Parameters to the REST Request. The contextId, series name are provided by default.
Run your app and view the chart.