The charts widget provides a basic implementation of different types of chart (for example: area, line, bar, column, and pie) in a Mendix application.
This how-to will teach you how to do the following:
Create a chart with basic sample data
Configure the chart display options
Before starting this how-to, make sure you have completed the following prerequisites:
- Download the latest Charts Widget from the Mendix Marketplace
3 Implementing the Charts Widget in an Existing App
In this section, you will create a chart with basic sample data.
3.1 Setting up the Domain Model
To use the Charts widget, a specific data structure is set up. This is defined by entities and attributes in the domain model.
- Create a new module called charts.
Configure your domain model to contain an entity Value with a string attribute xValue and a decimal attribute yValue.
3.2 Creating a Data Entry Page
To create a basic data entry page from which the Charts widget will fetch data, follow these steps:
- Right Click on value entity.
Select Generate overview pages.
Add the Value_NewEdit page to user navigation.
3.3 Adding the Charts Widget to a New Page
- Create a page named ShowChart.
- Add it to the user navigation.
- Add a Data view to this page that contains the Value entity and has a microflow as a data source.
Create a new microflow named DS_NewValue to fill the data view.
Right-click the data view and select Go to microflow.
In the new DS_NewValue microflow, create a new Value object and set that object as the return.
On the ShowChart page, add the widget Area chart.
The final page should look like this.
3.4 Configuring the Charts Widget
To configure a Charts widget, follow these steps:
- Open the page with the Charts widget.
- Right-click the Area chart and select Properties.
In the tab Chart properties, add a new Series property.
In the tab Data source, select Value as the Entity.
Set the Data source as Database.
In the tab Data points, select xValue as the X-axis data attribute and yValue as the Y-axis data attribute.
3.5 Viewing the Chart
To view the chart, follow these steps:
- Run the app.
- In your browser, open the data entry page.
Enter data values for x value and y value.
Click the Save button.
Open the ShowChart page to view the chart created.