How to map data & load it in a Chart right in UI Bakery

From this article, you'll learn how to map and load data of various formats in a Chart in the UI Bakery app builder.

Let's start from creating a new action for loading and mapping data.

Open the Builder, and add a new action.

Set the first step – an HTTP GET method request – using a proper URL to load the data. You can use this URL: https://run.mocky.io/v3/893ee4e7-c27b-4a6d-99af-787f395e6f84

The data is loaded from the URL, however, its format differs from the format of the data in the chart.

To map the data into the chart, you need to use a Code step to add custom code.

Now, save your data to the App State Manager, set a name for a variable, and choose its type: "array".

Once everything's done, you'll see the action like this:

Now, go back to the Builder, select the chart, insert a variable "chartdata" in the data field in the chart.

And finally, enjoy the result.

To see how it works:

  1. Register, or log in UI Bakery.
  2. Create a new project, or open the existing one.
  3. Follow the steps in the guide above to get the result.