Create a Dynamic Series Chart

Last modified: November 19, 2024

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

  • Create a chart with dynamic series

Prerequisites

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

Setting up Chart Data

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

Entering Data for the Chart

Now you need to enter data for the chart.

  1. Right-click the Series entity.

  2. Choose Generate overview pages….

  3. Select both Series and Value as the entities for which to generate pages.

    Generate Series and Value overview and data entry pages

  4. Connect the Series_Overview page to the navigation.

  5. Click Run Locally ( ) to run the app locally.

  6. Enter some sample data.

    Enter data for chart

Configuring the Charts Widget

Adding a Chart Page

Now you need to create a page containing the chart.

  1. Create a new page.
  2. Add a data view which uses a microflow to make a context which is the first object of the Value.
  3. Add an Area chart widget inside the data view.

Configuring the Area Chart with Dynamic Series

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

  1. Right-click the area chart widget and select Properties.

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

    Chart Series

  3. In the tab Data source, select Dynamic.

  4. Set the Data entity to Value. This is the entity from which the data values will be retrieved.

  5. Set the Data source as Database (note that REST endpoints are not supported for dynamic series).

    select Dynamic

  6. In the tab Data Points, set:

    • X-axis data attribute to Value/xValue
    • Y-axis data attribute to Value/yValue
    select Data Points

  7. In the tab Dynamic series, set:

    • Series entity to Series
    • Series name attribute to Series/name
    • Line color attribute to Series/color
    • Area color attribute to Series/fillcolor
    select Data Points

  8. Add the charts page to user navigation.

Viewing the Chart

To view the chart, follow these steps:

  1. Run the app (locally).

  2. Open the page containing the dynamic series chart.

    Dynamic Series Chart

Read More