diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/_index.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/_index.md index 1a3d479c96a..f2899443fce 100644 --- a/content/en/docs/marketplace/platform-supported-content/widgets/charts/_index.md +++ b/content/en/docs/marketplace/platform-supported-content/widgets/charts/_index.md @@ -2,6 +2,9 @@ title: "Charts" url: /appstore/widgets/charts/ description: "Describes the configuration and usage of the Charts widget, which is available in the Mendix Marketplace." +aliases: + - /appstore/widgets/charts-plotly-images-rest/ + - /howto/front-end/charts-plotly-images-rest/ #If moving or renaming this doc file, implement a temporary redirect and let the respective team know they should update the URL in the product. See Mapping to Products for more details. --- @@ -18,7 +21,6 @@ For more examples of what Charts widgets can do, see the following documents: * [Use the Charts Theme](/appstore/widgets/charts-theme/) * [Create a Dynamic Series Chart](/appstore/widgets/charts-dynamic-series/) * [Use a Chart with a REST Data Source](/appstore/widgets/charts-basic-rest/) -* [Use the Plotly Images REST Service Endpoint](/appstore/widgets/charts-plotly-images-rest/) {{% alert color="info" %}} This document assumes that you are using Charts widget v3.0.0 or above. To read documentation for older versions, see the [Legacy Chart Widget Documentation](#legacy-widget-docs) section below. diff --git a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-plotly-images-rest.md b/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-plotly-images-rest.md deleted file mode 100644 index d83dc17c298..00000000000 --- a/content/en/docs/marketplace/platform-supported-content/widgets/charts/charts-plotly-images-rest.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: "Use the Plotly Images REST Service Endpoint" -linktitle: "Plotly Images REST Endpoint" -url: /appstore/widgets/charts-plotly-images-rest/ -weight: 70 -aliases: - - /howto/front-end/charts-plotly-images-rest/ ---- - -## Introduction - -The [Plotly API images endpoint](https://api.plot.ly/v2/images) turns a plot into an image of the desired format. A set of body parameters and headers are passed to the endpoint, which returns an image when a request is made. - -This how-to teaches you how to do the following: - -* Call *Plotly API Images*' REST Endpoint - -* Save images returned from generated by the endpoint - -## Prerequisites - -Before starting this how-to, make sure you have completed the following prerequisites: - -* Create an account on **plot.ly**: you can sign up to plot.ly here: [Plotly Sign Up](https://plot.ly/accounts/login/?action=signup#/) -* Retrieve the plotly API key which goes with your account; your API key can be found on the settings page when you are logged in to the site - -## Setting up the Domain Model - -To set up the domain model for use with the plotly REST service endpoint, follow these steps: - -1. Create two entities: **Image** and **DataSource**. - -1. **Image** should be a specialization of the **System.Image** entity, so set **Generalization** to *System.Image*. - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-image-entity.png" alt="image entity" class="no-border" >}} -1. **DataSource** should be non-persistable with **Data** and **Layout** string attributes. - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-data-source-entity.png" alt="DataSource entity" class="no-border" >}} - -## Calling the 'Plotly API Images' REST Endpoint - -To make a call to *Plotly API images* REST endpoint, follow these steps: - -1. Add a blank page to the existing module. - -1. Add a **Data view** with data source as a microflow that returns a new **DataSource** object. - -1. In the **Data view**, place input elements with source attribute as **Data** and **Layout**. - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-data-view.png" alt="Data view" class="no-border" >}} - -1. In the footer of the *Data view*, add a **Call microflow button**. - -1. Link the button to a new microflow: *ACT_Call_REST*. - -1. Rename the button *Call Plotly REST Service*. - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-button.png" alt="Configured microflow" class="no-border" >}} - -1. Right click the button, select to **Go to on click microflow...**. - -1. Build the microflow as shown below. - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-microflow.png" alt="Configured microflow" class="no-border" >}} - -1. The **Call REST service** activity is configured as follows: - - * In the tab **General**, the **Location** should be set to *https://api.plot.ly/v2/images* - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-location.png" alt="Location" class="no-border" >}} - * Select the **HTTP Method** as *POST* - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-method.png" alt="HTTP Method" class="no-border" >}} - - * In the tab **HTTP Headers**, Enter your plotly user name and API key (more information on plotly authentication can be found here: [plotly Authentication](https://api.plot.ly/v2/#authentication)) - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-authorization.png" alt="Authorization" class="no-border" >}} - - {{% alert color="warning" %}}Custom HTTP headers 'Content-Type' and 'Plotly-Client-Platform' must be provided{{% /alert %}} - - * In the tab **Request**, select *Custom request template*; the request is a 'JSON' object with the structure - - ``` JSON - { - "figure": { - "data": [{"y": [10, 10, 2, 20]}], - "layout": {"width": 700} - }, - "format": "png", - "encoded": false - } - ``` - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-request.png" alt="Request tab" class="no-border" >}} - - For more request parameter details, see the documentation here: [Plotly REST API, v2](https://api.plot.ly/v2/images#fields). - - {{% alert color="warning" %}}When `encoded` is set to `true`, a base64 image url is returned.

In the field **Template**, escape the opening brace, `{`, by using a double opening brace, `{``{`.{{% /alert %}} - - * In the tab **Response**, set **Response handling** to *Store in a file document* - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-response.png" alt="Response tab" class="no-border" >}} - - * Set **Output > Type** to the **Image** entity - -## Saving the Image - -To save images generated by the REST service, follow these steps: - -1. Add a **Show page** activity to the *ACT_Call_REST* microflow. - -1. Select a new page. - -1. Set the generated image object as the **Object to pass** to the page. - -1. Set the layout of the page as a popup. - -1. Place a **Data view** in the page and populate it as shown below: - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-display-image.png" alt="Display image page" class="no-border" >}} - -1. Run the app. - -1. In the browser, open the page with the **Call Plotly REST Service** button. - -1. Fill in the **Data** and **Layout** fields. An example is shown in the image below. - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-fill-data.png" alt="Fill in data" class="no-border" >}} - -1. Click the **Call Plotly REST Service** button. - - {{< figure src="/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-image-save.png" alt="Save image" class="no-border" >}} - -1. Click the **Save** button to save the image which is displayed. - -## Read More - -* [Plotly images endpoint](https://api.plot.ly/v2/images) -* [Call a REST Service Action](/refguide/call-rest-action/) diff --git a/content/en/docs/refguide/modeling/pages/chart-widgets/_index.md b/content/en/docs/refguide/modeling/pages/chart-widgets/_index.md index 4d5d465247a..758212803a4 100644 --- a/content/en/docs/refguide/modeling/pages/chart-widgets/_index.md +++ b/content/en/docs/refguide/modeling/pages/chart-widgets/_index.md @@ -10,7 +10,7 @@ description_list: true Charts allow you to display data series visually on your app pages in a wide range of charts. -[Basic Charts](#basic-charts) are included in Mendix app templates based on Atlas UI. They can be included in other Mendix apps by downloading them from the Mendix Marketplace (for more information on various charts and their configurations, see [Charts](/appstore/widgets/charts/)). Basic charts are based on version 1.47.4 of plotly.js. +[Basic Charts](#basic-charts) are included in Mendix app templates based on Atlas UI. They can be included in other Mendix apps by downloading them from the Mendix Marketplace (for more information on various charts and their configurations, see [Charts](/appstore/widgets/charts/)). Basic charts are based on plotly.js 3.x as of Charts widget version 6.0.0. For the exact plotly.js version in the release you are using, see the [Charts](https://marketplace.mendix.com/link/component/105695/) listing in the Mendix Marketplace. [Any Chart](#any-chart) gives much more control and allows more flexible use of the features of [plotly.js](https://plot.ly/). The [Any Chart](/appstore/modules/any-chart/) widget can be included in your app. See the widget description in the Marketplace to see what version of plotly.js is supported. @@ -31,7 +31,7 @@ The widgets contain several settings which can be changed in Studio Pro to custo If the standard chart settings are not sufficient for your purposes, see [Chart Advanced Cheat Sheet](/refguide/charts-advanced-cheat-sheet/) for information on advanced configuration of your basic charts. -Note that only features up to version 1.47.4 of plotly.js can be used when configuring charts. +Only plotly.js features available in the version bundled with your Charts widget release can be used when configuring charts. **Dynamic Series Chart** diff --git a/content/en/docs/refguide/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md b/content/en/docs/refguide/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md index 9a38562f134..211b4ffbc1e 100644 --- a/content/en/docs/refguide/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md +++ b/content/en/docs/refguide/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md @@ -12,7 +12,7 @@ Standard charts provide the most common settings through the widget configuratio This cheat sheet with JSON snippets will provide some samples of advance configuration. -The full reference can be found at [https://plot.ly/javascript/](https://plot.ly/javascript/). Charts support plotly.js version 1.47.4. +The full reference can be found at [Plotly JavaScript Open Source Graphing Library](https://plotly.com/javascript/). Charts support plotly.js 3.x as of Charts widget version 6.0.0. When the advanced configuration does not suffice have a look at the [Any Chart](https://marketplace.mendix.com/link/component/106437/Mendix/Any-Chart) widget in the Marketplace. diff --git a/content/en/docs/refguide10/modeling/pages/chart-widgets/_index.md b/content/en/docs/refguide10/modeling/pages/chart-widgets/_index.md index 585f77895c4..bbb55209278 100644 --- a/content/en/docs/refguide10/modeling/pages/chart-widgets/_index.md +++ b/content/en/docs/refguide10/modeling/pages/chart-widgets/_index.md @@ -10,7 +10,7 @@ description_list: true Charts allow you to display data series visually on your app pages in a wide range of charts. -[Basic Charts](#basic-charts) are included in Mendix app templates based on Atlas UI. They can be included in other Mendix apps by downloading them from the Mendix Marketplace (for more information on various charts and their configurations, see [Charts](/appstore/widgets/charts/)). Basic charts are based on version 1.47.4 of plotly.js. +[Basic Charts](#basic-charts) are included in Mendix app templates based on Atlas UI. They can be included in other Mendix apps by downloading them from the Mendix Marketplace (for more information on various charts and their configurations, see [Charts](/appstore/widgets/charts/)). Basic charts are based on plotly.js 3.x as of Charts widget version 6.0.0. For the exact plotly.js version in the release you are using, see the [Charts](https://marketplace.mendix.com/link/component/105695/) listing in the Mendix Marketplace. [Any Chart](#any-chart) gives much more control and allows more flexible use of the features of [plotly.js](https://plot.ly/). The [Any Chart](/appstore/modules/any-chart/) widget can be included in your app. See the widget description in the Marketplace to see what version of plotly.js is supported. @@ -31,7 +31,7 @@ The widgets contain several settings which can be changed in Studio Pro to custo If the standard chart settings are not sufficient for your purposes, see [Chart Advanced Cheat Sheet](/refguide10/charts-advanced-cheat-sheet/) for information on advanced configuration of your basic charts. -Note that only features up to version 1.47.4 of plotly.js can be used when configuring charts. +Only plotly.js features available in the version bundled with your Charts widget release can be used when configuring charts. **Dynamic Series Chart** diff --git a/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md b/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md index adb7d2d4261..9ceb96f3014 100644 --- a/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md +++ b/content/en/docs/refguide10/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md @@ -12,7 +12,7 @@ Standard charts provide the most common settings through the widget configuratio This cheat sheet with JSON snippets will provide some samples of advance configuration. -The full reference can be found at [https://plot.ly/javascript/](https://plot.ly/javascript/). Charts support plotly.js version 1.47.4. +The full reference can be found at [Plotly JavaScript Open Source Graphing Library](https://plotly.com/javascript/). Charts support plotly.js 3.x as of Charts widget version 6.0.0. When the advanced configuration does not suffice have a look at the [Any Chart](https://marketplace.mendix.com/link/component/106437/Mendix/Any-Chart) widget in the Marketplace. diff --git a/content/en/docs/refguide9/modeling/pages/chart-widgets/_index.md b/content/en/docs/refguide9/modeling/pages/chart-widgets/_index.md index 60b422cb848..a487fb018f0 100644 --- a/content/en/docs/refguide9/modeling/pages/chart-widgets/_index.md +++ b/content/en/docs/refguide9/modeling/pages/chart-widgets/_index.md @@ -10,7 +10,7 @@ description_list: true Charts allow you to display data series visually on your app pages in a wide range of charts. -[Basic Charts](#basic-charts) are included in Mendix app templates based on Atlas UI. They can be included in other Mendix apps by downloading them from the Mendix Marketplace (for more information on various charts and their configurations, see [Charts](/appstore/widgets/charts/)). Basic charts are based on version 1.47.4 of plotly.js. +[Basic Charts](#basic-charts) are included in Mendix app templates based on Atlas UI. They can be included in other Mendix apps by downloading them from the Mendix Marketplace (for more information on various charts and their configurations, see [Charts](/appstore/widgets/charts/)). Basic charts are based on plotly.js 3.x as of Charts widget version 6.0.0. For the exact plotly.js version in the release you are using, see the [Charts](https://marketplace.mendix.com/link/component/105695/) listing in the Mendix Marketplace. [Any Chart](#any-chart) gives much more control and allows more flexible use of the features of [plotly.js](https://plot.ly/). The [Any Chart](/appstore/modules/any-chart/) widget can be included in your app. See the widget description in the Marketplace to see what version of plotly.js is supported. @@ -31,7 +31,7 @@ The widgets contain several settings which can be changed in Studio Pro to custo If the standard chart settings are not sufficient for your purposes, see [Chart Advanced Cheat Sheet](/refguide9/charts-advanced-cheat-sheet/) for information on advanced configuration of your basic charts. -Note that only features up to version 1.47.4 of plotly.js can be used when configuring charts. +Only plotly.js features available in the version bundled with your Charts widget release can be used when configuring charts. **Dynamic Series Chart** diff --git a/content/en/docs/refguide9/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md b/content/en/docs/refguide9/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md index 8f6bedca18c..d0cbd86cba9 100644 --- a/content/en/docs/refguide9/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md +++ b/content/en/docs/refguide9/modeling/pages/chart-widgets/charts-advanced-cheat-sheet.md @@ -12,7 +12,7 @@ Standard charts provide the most common settings through the widget configuratio This cheat sheet with JSON snippets will provide some samples of advance configuration. -The full reference can be found at [https://plot.ly/javascript/](https://plot.ly/javascript/). Charts support plotly.js version 1.47.4. +The full reference can be found at [Plotly JavaScript Open Source Graphing Library](https://plotly.com/javascript/). Charts support plotly.js 3.x as of Charts widget version 6.0.0. When the advanced configuration does not suffice have a look at the [Any Chart](https://marketplace.mendix.com/link/component/106437/Mendix/Any-Chart) widget in the Marketplace. diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-authorization.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-authorization.png deleted file mode 100644 index 9b828fcd492..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-authorization.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-button.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-button.png deleted file mode 100644 index f94d066bea4..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-button.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-data-source-entity.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-data-source-entity.png deleted file mode 100644 index a5cb7002cab..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-data-source-entity.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-data-view.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-data-view.png deleted file mode 100644 index 85acb80aad4..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-data-view.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-display-image.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-display-image.png deleted file mode 100644 index c59b5d0d3c9..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-display-image.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-fill-data.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-fill-data.png deleted file mode 100644 index 746fb46ada7..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-fill-data.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-image-entity.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-image-entity.png deleted file mode 100644 index b283b3fdd08..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-image-entity.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-image-save.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-image-save.png deleted file mode 100644 index b64e5754ac3..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-image-save.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-location.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-location.png deleted file mode 100644 index aa3c09151d6..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-location.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-method.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-method.png deleted file mode 100644 index 6877078d6aa..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-method.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-microflow.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-microflow.png deleted file mode 100644 index 8e33e9217a6..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-microflow.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-request.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-request.png deleted file mode 100644 index f6db22239c5..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-request.png and /dev/null differ diff --git a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-response.png b/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-response.png deleted file mode 100644 index ca37ceb7e9f..00000000000 Binary files a/static/attachments/appstore/platform-supported-content/widgets/charts/charts-tutorials/charts-plotly-images-rest/charts-call-rest-response.png and /dev/null differ