In this article, I’m going to show you how to visualize data in your application using the Simplifier Charts Widget.
In this article, I’m going to show you how to visualize data in your application using the Simplifier Charts Widget.
For this tutorial, you should already know how to create Applications, set Widget properties in the UI Designer, map data from Business Objects to Widgets in the Process Designer, create Business Objects and create Data Types. If this does not sound familiar to you at all: learn how to create an Application and read about the basic concepts (UI Designer, Process Designer, Business Objects, Data Types).
The Charts Widget basically consists of Labels and Datasets.
Labels are the description of the displayed data, whereas Datasets contain the DataPoints that are displayed.
This is easier to understand in an example:
The bar chart above shows, let’s say, how many chocolate bars were eaten by four persons (Clara, Jeff, Anna, Bill) per month (January, February, March).
The Labels here are ‘January’, ‘February’ and ‘March’ on the x-axis.
The Datasets are the persons, ‘Clara’, ‘Jeff’, ‘Anna’ and ‘Bill’, indicated by their respective colour.
The DataPoints of a DataSet are the concrete values that are displayed in the chart, e.g. for the Dataset ‘Bill’, the DataPoints are 1 (in January), 5 (in February) and 15 (in March).
In the UI Designer, you can use three options to add a Chart Widget to your Application:
To use the basic Chart Widget, go to the UI Designer, select the widgets tab and search for ‘chart’. We will use this basic Chart Widget in the Use Cases 1 and 2 described in this article to display static and dynamic data in our application.
Instead of using a basic Chart Widget and add the labels/datasets manually, you can also use a Chart Widget Group where the labels and datasets are already pre-filled. In the UI Designer, select the widget group tab and search for ‘chart’. You can find widget groups for several chart types. Select the type that you want and adapt the pre-filled data to your use case.
If you want to display multiple charts on one screen, consider using the ChartDashboard template. This UI template contains a grid layout with several panels, each panel containing a Chart Widget with pre-filled data. In the UI Designer, select the widget group tab and search for ‘chart’. Add the template ‘ChartDashboard’ to your screen and adapt the pre-filled charts and their data to your use case.
In this step, we will build the bar chart above with static data entirely in the UI Designer.
Now, click on ‘Deploy’, open your Application and navigate to the screen with the bar chart. That’s it! In the next step, you will learn how to create a chart with dynamic data.
In most use cases, you want to have a chart that displays data that is loaded from the backend. For this, we need to use templates in our Chart Widget and bind our data to the chart.
For this example, I created a server-side Business Object function ‘getChartsData’ that returns the data that we want to display in the chart. It is similar to the chart data that we saw above. Notice how the data is structured into Labels and Datasets, and the Datasets contain arrays of DataPoints.
Your Business Object function needs two output parameters: ‘labels’ and ‘datasets’. For both, set the Data Type to ‘Any’.
Now, we want to generate specific data types for these parameters so that we can map them in the Process Designer. To do so, click on ‘Save & Test’. In the dialog, click on ‘Test’ first, then on ‘Generate data type’. By doing so, Simplifier automatically creates data types for the JSON data that you see in the results window.
Close the test dialog and set the data type of your output parameters to the newly created data types (in my case: ‘getChartsData_labels_Col’ for the labels and ‘getChartsData_datasets_Col’ for the datasets).
For dynamic data binding, we have to create a Chart Widget that makes use of templates instead of static data. We can bind the Label data directly in the Process Designer. However, since the Dataset structure is nested (a Dataset contains one or more DataPoints), we cannot map them in the Process Designer. So, we have to store the datasets in a Global Variable and use the paths to this variable in the UI Designer to generate a mapping. Here’s what you have to do:
Almost done! We now have to create a Global Variable to store the data and then switch to the Process Designer to implement the data mapping.
Finally, click on ‘Deploy’, open your Application and navigate to the screen with the bar chart. You should see the chart with the data loaded from the Business Object.
That’s it, you’re done! You can now adapt the type of your chart (see next chapter), add/remove data in your Business Object, modify the colors, add more charts to your screen etc.
The Chart that we have created in the use cases above is a bar chart. There are several types of charts that you can select for the Charts Widget:
In the image below, you can see examples for some of the types. Just select the type that is appropriate for the data in your use case.
Note that the data structure can vary from type to type. You can find an overview on the different types and their data structures here: https://www.chartjs.org/docs/latest/charts/