Use a Chart with a REST Data Source

Last modified: November 19, 2024

Introduction

With the Charts widgets, you can use data from a REST Service to plot graphs.

This how-to teaches you how to do the following:

  • Publish a REST API
  • Use a REST endpoint as a data source for the Charts widget

Prerequisites

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

  • Create an app
  • Import the latest Charts Widgets from the Mendix Marketplace

Setting up Data to be Exposed by a REST Endpoint

Mendix allows you to publish REST Web services natively from Studio Pro. Using these capabilities you can publish a REST service and use it in our Charts widget to plot graphs.

To create an Area Chart with data from a REST service, follow these steps:

  1. Create a new Module in your app.
  2. Rename the module to ChartsREST.
  3. Open the Domain model.
  4. Create Value and Series entities with the attributes and association shown in the picture below.
    Chart Rest Domain
  5. Right-click Value and select Generate overview pages….
    Chart Rest Enter Data
  6. Add the Value_NewEdit page generated to your navigation.
  7. Run the app.
  8. In your browser, open the NewEdit page.
  9. Add values and series by entering data in the appropriate fields.

Publishing the Service

To use data from a model in the REST service, you need to create a JSON structure.

Creating the Structure

  1. Create a JSON Structure
    Charts Rest MD

Configuring the REST Service

To configure the REST service, follow these steps:

  1. Add Published REST service.

    Charts Rest Publish

  2. Add REST Service Microflow.

    Charts Rest Microflow

  3. Add Export mapping.

    Charts Rest Export Mapping

Using REST as a Data Source

To use the REST Data source endpoint in your chart, follow these steps:

  1. Create a page in your app containing an Area chart widget.

  2. Double-click the Area chart widget.

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

  4. Add Series name and Entity.

  5. Select Data source REST endpoint.

    Chart Rest Series

  6. Add the REST URL.

    Chart Rest URL

  7. In the tab Data points, select the X-axis data attribute and the Y-axis data attribute.

    select Data Points

  8. Add Parameters to the REST Request. The contextId, series name are provided by default.

    select Data Points

  9. Run your app and view the chart.

    Show Chart

Read More