How to load data into a Chart using UI Bakery

In this how-to guide, you'll discover how to seamlessly load your data to a Chart built in the UI Bakery visual app builder.

Let's start from creating a chart.

Open the Builder, and call for a Component picker by clicking on a grey plus inside the space.

Select a Doughnut chart.

Now, delete all the data hardcoded in the "Data" field placed on the sidebar.

Once you delete the data, connect the real data from a URL. Open the Data tool in UI Bakery, and create an action. The first step of the action is an HTTP GET method request. Use a proper URL to load the data, for example – https://run.mocky.io/v3/eddfb26f-685e-46fb-9203-130fe7eb27cb.

Save the data to the App State Manager, and create a variable named "donut", and set its type as "array".

Open the Builder, click on the Chart component, and add the variable created earlier to the "Data" field. Use a Ctrl+Space shortcut to see the list of variables.

Now, let's set an action. Click on the Chart, open its Data settings, and set the "On Init" action that loads data and saves it to the App State Manager.

Click "Preview" to see what you have now.

Hopefully this guide helps!

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.