Use the Plotly Images REST Service Endpoint

Last update: Download PDF Edit

1 Introduction

The Plotly API images endpoint turns a plot into an image of the desired format. A set of body paramters and headers are passed to the endpoint, which returns a image when a request is made.

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

  • Call ‘plotly api images’ REST end point
  • Save images returned from generated by the end point

2 Prerequisites

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

  • Install the Latest mendix modeler
  • Create a plot account
  • A plotly username and API key
  • Setup a mendix app, see How to create a mendix app

3 Set up domain model

To set up the domain model for use with plotly REST service end point, follow these steps:

  1. Create two entities: Image and DataSource
  2. Image should inherit from the System.Image entity
    image entity
  3. DataSource should be non-persistent with Data and Layout attributes
    DataSource entity

4 Call ‘Plotly API images’ REST end point

To make a call to Plotly API images REST end point, follow these steps:

  1. Add a blank page to the existing module
  2. Add a Data view with data source as a microflow that returns DataSource object.
  3. In the Data view, place input widgets with source atttribute as Data and Layout Data view
  4. In the footer of the Data view, Add a Call microflow button
  5. Select New, name the microflow ACT_Call_REST
  6. Rename the button to Call Plotly REST Service Configured microflow
  7. Right click on the button, select to Go to onclick microflow
  8. Configure the microflow as:
    Configured microflow
  9. Call REST Service activity is configured as follows:
    In the tab General, the Location shoud be set as
    Select the HTTP Method as POST
    HTTP Method
    In the tab HTTP Headers, Enter your plotly user name and API key

In the tab Request, Select Custom request template The request is a ‘JSON’ object with the structure

    "figure": {
        "data": [{"y": [10, 10, 2, 20]}],
        "layout": {"width": 700}
    "format": "png",
    "encoded": false

For more request parameter details, see here

Request tab)

In the tab Response, response handling is set to Store in a file document
Response tab
Output -> Type is set to Image entity

5 Save image

To save images generated by the REST service, follow these steps:

  1. Add a Show page activity to the ACT_Call_REST microflow
  2. Select a new page
  3. Pass the generated image as object to the page
  4. Set the layout of the page as a popup
  5. Place a Data view in the page and populate it
    Display image page
  6. Run the project
  7. In the browser, open the page with Call Plotly REST Service button
    Fill in data
  8. Fill in the Data and Layout fields
  9. Click on the Call Plotly REST Service button
    Save image
  10. An image is displayed, Click Save button