Use a Chart with a REST Data Source

Last update: Download PDF Edit

1 Introduction

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

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

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

2 Prerequisites

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

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

3 REST endpoint setup

Mendix allows you to publish REST Web services natively in the modeler, and using these capabilities we 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 the charts project
  2. Rename the module to ChartsREST
  3. Open the Domain model
  4. Create entities with an association between Values and Series
    Chart Rest Domain
  5. Right Click on Value and select generate overview pages Chart Rest Enter Data
  6. Add the Value_NewEdit page generated to your navigation.
  7. Run the project
  8. In your browser, open the NewEdit page
  9. Add values and series by entering data in the appropriate fields

4 Publishing the Service

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

4.1 Creating the Structure

Create a JSON Structure
Charts Rest MD

4.2 Configure the REST Service

To configure the REST service, folllow 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

5 Data source

To create a REST Data source end point, follow these steps:

  1. Open the page with the Charts widget
  2. Double click on the Charts widget
  3. In the tab Chart properties, add new Chart Series property
    Chart Rest Series
  4. Add Series name and Entity
    Values entity
  5. Select Data source REST endpoint
  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. View Chart
    Show Chart