Create a Basic Chart

Last update: Download PDF Edit

1 Introduction

The charts widget provides the basic implementation of charts: area, line, bar, column, pie, heatmap in a mendix application.

This how-to will teach you how to do the following:

  • Create a chart with basic sample data
  • Configure chart display options

2 Prerequisites

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

  • Install latest mendix modeler
  • Download latest Charts Widget from the Mendix App Store

3 Implement the Charts widget in an existing project

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

3.1 Set up the Domain model

In order 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 Values with attributes xValue, yValue

Values entity

3.2 Create 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
  3. Add the Value_NewEdit page to user navigation

Values entity

3.3 Add 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 Values entity and has a microflow as a data source
  4. Create a new microflow named DSS_NewValues to fill the data view
    Values entity
  5. Right click on the data view and select Go to microflow
  6. In the new DSS_NewValues microflow, create a new Values object and set that object as the return
    New Values microflow
  7. On the ShowChart page, add the chart - Area Chart using the Add widget menu Select widget
  8. The final page should look like this
    Final widget Page

3.4 Configure the Charts Widget

To configure a Charts widget, follow these steps:

  1. Open the page with the Charts widget
  2. Right click, select properties
  3. In the tab Chart properties, add a new series property
    Chart Series
  4. In the tab Data source, select Entity
    select Entity
  5. Set the Data source as Database
  6. In the tab Data points, select the X-axis data attribute and the Y-axis data attribute
    select Data Points

3.5 View chart

To view the chart, follow these steps:

  1. Run the project
  2. In your browser, open the data entry page
  3. Enter data values for x value and y value
    Enter Data
  4. Click on the Save button
  5. Open the Show chart page to view the chart created Show Chart