Create a Basic Chart

1 Introduction

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

2 Prerequisites

Before starting this how-to, make sure you have completed the following prerequisites:

Download the latest Charts Widget from the Mendix App Store

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.

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.

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.