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:
Install the latest Mendix desktop modeler
Download the latest Charts Widget from the Mendix App Store
3 Implementing the Charts Widget in an Existing Project
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 Values 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 Values entity and has a microflow as a data source.
Create a new microflow named DS_NewValues to fill the data view.
Right-click on the data view and select Go to microflow.
In the new DS_NewValues microflow, create a new Values 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 Values 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 project.
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.