The charts widget provides a basic implementation of dynamic series. This allows you to vary the number of data series (for example lines on a line chart) in your chart at runtime, based on the data in your app.
This how-to will teach you how to do the following:
- Create a chart with dynamic series
Before starting this how-to, make sure you have completed the following prerequisites:
- Download the latest Charts Widget from the Mendix Marketplace
3 Setting up Chart Data
3.1 Setting up the Domain Model
In order to create the Charts widget with dynamic series, a specific data structure is set up.
- Configure your domain model to contain an entity Value with attributes xValue and yValue.
- Add another entity, Series, with attributes name, color, and fillColor.
- Add an association Value_Series between the two entities.
3.2 Entering Data for the Chart
Now you need to enter data for the chart.
Right-click the Series entity.
Choose Generate overview pages….
Select both Series and Value as the entities for which to generate pages.
Connect the Series_Overview page to the navigation.
Run the app (locally).
Enter some sample data.
4 Configuring the Charts Widget
4.1 Adding a Chart Page
Now you need to create a page containing the chart.
Create a new page.
Add a data view which uses a microflow to make a context which is the first object of the Value.
Add an Area chart widget inside the data view.
4.2 Configuring the Area Chart with Dynamic Series
To configure a Charts widget with a dynamic series, follow these steps:
Right-click the area chart widget and select Properties.
In the tab Chart properties, add a new Series property.
In the tab Data source, select Dynamic.
Set the Data entity to Value. This is the entity from which the data values will be retrieved.
Set the Data source as Database (note that REST endpoints are not supported for dynamic series).
In the tab Data Points, set:
X-axis data attribute to Value/xValue
Y-axis data attribute to Value/yValue
In the tab Dynamic series, set:
Series entity to Series
Series name attribute to Series/name
Line color attribute to Series/color
Area color attribute to Series/fillcolor
Add the charts page to user navigation.
5 Viewing the Chart
To view the chart, follow these steps:
Run the project (locally).
Open the page containing the dynamic series chart.