Create a Dynamic Series Chart

Last update: Download PDF Edit

1 Introduction

The charts widget provides a basic implementation of dynamic series. This allows you to vary the number of data series (for example lines on a line chart) in your chart at runtime, based on the data in your app.

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

  • Create a chart with dynamic series

2 Prerequisites

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 Configuring the Charts Widget

3.1 Setting up the Domain Model

In order to create the Charts widget with dynamic series, a specific data structure is set up.

  1. Configure your domain model to contain an entity Value with attributes xValue and yValue.
  2. Add another entity, Series, with attributes name, color, and fillColor.
  3. Add an association Value_Series between the two entities. Values entity

3.2 Adding Chart Configuration

To configure a Charts widget with a dynamic series, follow these steps:

  1. Open the page containing 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 Dynamic. select Dynamic
  5. Set the Data entity to Value. This is the entity from which the data values will be retrieved.
  6. Set the Data source as Database or Microflow.
  7. In the tab Dynamic series, set the Series entity to Series.
  8. Set the Series name attribute to Series/name and Line color attribute to Series/color. select Data Points
  9. Add the charts page to user navigation.

3.3 Viewing the Chart

To view the chart, follow these steps:

  1. Run the project.
  2. Open the page containing the dynamic series chart.

    Dynamic Series Chart