Create a Basic Chart

Last modified: November 19, 2024

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 teaches you how to do the following:

  • Create a chart with basic sample data

  • Configure the chart display options

Prerequisites

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

Implementing the Charts Widget in an Existing App

In this section, you will create a chart with basic sample data.

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.

  1. Create a new module called charts.

  2. Configure your domain model to contain an entity Value with a string attribute xValue and a decimal attribute yValue.

    Value entity

Creating a Data Entry Page

To create a basic data entry page from which the Charts widget will fetch data, follow these steps:

  1. Right Click on value entity.

  2. Select Generate overview pages.

    Generate overview pages for Value entity

  3. Add the Value_Overview page to user navigation.

Adding the Charts Widget to a New Page

  1. Create a page named ShowChart.

  2. Add it to the user navigation.

  3. Add a Data view to this page that contains the Value entity and has a microflow as a data source.

  4. Create a new microflow named DS_NewValue to fill the data view.

    Data view showing the Value entity

  5. Right-click the data view and select Go to microflow.

  6. In the new DS_NewValue microflow, create a new Value object and set that object as the return.

    New Value microflow

  7. On the ShowChart page, add the widget Area chart.

    Select widget

  8. The final page should look like this.

    Final widget Page

Configuring the Charts Widget

To configure a Charts widget, follow these steps:

  1. Open the page with the Charts widget.

  2. Right-click the Area chart and select Properties.

  3. In the tab Chart properties, add a new Series property.

    Chart Series

  4. In the tab Data source, select Value as the Entity.

  5. Set the Data source as Database.

    select Entity

  6. In the tab Data points, select xValue as the X-axis data attribute and yValue as the Y-axis data attribute.

    select Data Points

Viewing the Chart

To view the chart, follow these steps:

  1. Run the app.

  2. In your browser, open the data entry page.

  3. Enter data values for x value and y value.

    Enter Data

  4. Click the Save button.

  5. Open the ShowChart page to view the chart created.

    Show Chart

Read More