Designing a User Interface to Visualise Information
Designing user interfaces to visualise data is a powerful way to derive meaningful insights. Depending on the data and the user's goals, designers choose appropriate visualisation types, which can include charts, graphs, maps and more.
This article shows how to design a user interface to visualise your data.
Note: Before you go ahead, ensure that a data source is ready in the system.
Designing a User Interface to Visualise Information
Before creating a user interface for data visualisation, the initial step is to select a data source. This involves choosing a suitable lucy action or database.
To illustrate the concept, we'll design a bar chart user interface that displays the maximum sales for each product line with the status 'Shipped' and we'll choose a database as the data source.
a) Selecting a Data source
To select a data source:
On the app homepage, go to the My Work tab on the left sidebar.
Search and select the folder you wish to open.
Go to the User Interfaces tab.
Click on the Add button.
Choose the Visualise Data option.
Select the data source. You can either select a lucy action or a database as the data source.
For instance, let’s select an existing database.
To select an existing database, head to the Databases tab. All the databases created in the system will be listed categorised by its folder.
Choose and click on the required database. Alternatively, you can use the search box to search and filter databases.
A preview displaying the available fields of the chosen database will be listed.
To confirm the selection, click Select this source .
A table preview of the selected database will be displayed.
b) Preparing Data to be Visualised
You can determine the specific data to display on the widget by utilising features like data filtering and aggregation. We'll apply a filter to isolate product lines with a 'Shipped' status and then display the maximum sales for each respective product line from the previously selected database.
Filtering Data
Filtering data is used to extract a subset of data that meets specific criteria or conditions. It helps in narrowing down the dataset to focus on a particular subset of interest.
On the table preview, click Filter Data.
Click Add button to add a new filter condition.
You can add multiple conditions to filter your data.
To add multiple filter conditions, click Add button e.g., To have two filter conditions, click the Add button twice.
To filter data by selecting one condition or any other condition, click Either button.
To filter data by selecting all the conditions added, click All button.
Select appropriate fields, operation and values for the respective condition (s).
After applying the condition (s), click Done.
Based on the conditions applied, the data will be filtered and listed.
Adding a Group of Conditions to Filter Data
When dealing with complex datasets, a single condition may not be sufficient. Grouping conditions enables you to create more sophisticated filters, combining multiple criteria to obtain the desired subset of data.
For our example, adding group of conditions is not needed.
On the table preview, click Filter Data.
Click the Filter button to add a new group of conditions. Tip: Repeat step 2 to add more group of conditions.
Within the newly added group of conditions, click Add button to add a new filter condition inside it. Tip: Repeat step 3 to add more conditions under respective group of conditions.
Within a group of conditions, you can include multiple group of conditions. Click the Filter button inside a group of conditions to add multiple group of conditions inside the respective group.
To filter data by selecting one condition or any other condition, click Either button.
To filter data by selecting all the conditions added, click All button.
After applying the conditions, click Done.
Based on the conditions applied, the data will be filtered and listed.
Within a group of conditions, you can include multiple conditions.
Aggregating Data
Aggregating data is used to summarise and condense data into a more compact form, often achieved by mathematical or statistical operations (e.g., Aggregating data to find the maximum sales for each product line).
On the table preview, click Aggregate Data.
Select appropriate filters to aggregate data.
Click Done. Based on the aggregation, the data will be aggregated and listed.
If you are happy with the aggregation, click Looks good.
c) Selecting a Widget Template
After selecting a data source and preparing data as needed, you can select a widget template to begin customisation. Based on the data selected, the system will display a list of matching templates that work with those data.
Find the article here to gain more knowledge on selecting a widget template.
For example, we'll select the Bar/Line chart template from the template list.
Under Default Templates tab, select the desired type of Template, e.g., Bar/Line chart.
Click Edit this template. The respective template will be displayed on widget designer page.
By default, the Design mode will be selected on the widget designer page.
There are two mode for a widget designer page:
1) Design mode - Used to create and customise the widget.
2) Preview mode - Used to view a live version of the widget.
d) Customising the Widget
A Bar/Line chart can be customised to meet the user's needs by adjusting its appearance, changing the way data is presented (e.g., selecting different chart types), customising legends, axis labels and other elements to provide context and improve the understanding of the presented information.
There are 3 main types of charts: line charts, bar charts, and area charts.
You can choose either a single chart type or multiple chart types to display on the same chart. For example, you can have both a bar chart and a line chart on a single chart.
Selecting a Single Chart Type
Click on the chart on the widget designer page, its Properties panel will open.
On the properties panel, go to Chart Elements section and click the Plus icon.
By default, the bar chart will be selected and displayed on the chart.
To select a different chart type, select the appropriate chart type e.g., Line chart.
The current chart type will be replaced with the newly selected chart type and the new chart will be displayed on the widget.
Selecting Multiple Chart Types
You can include multiple chart types within the same chart. For instance, if your primary chart is a line chart, you can add a bar chart, and both chart types will be displayed together.
After you have applied a chart as described under Selecting a Single Chart Type, you can select multiple if necessary.
On the properties panel, go to Chart Elements section.
Click Plus icon next to Chart Elements.
Select the appropriate chart type e.g., Bar chart.
Note: You need to have a data source bound to every chart type added.
Adding X-axis and Value Fields
Click on the Bar/Line chart on the widget designer page, its Properties panel will be displayed.
Head to X-axis Label section. In the X-axis Field list, select group option.
Go to Chart Elements section. In the Value Field list, select the value option.
Go to Appearance section, enable Show Y-axis option to display the y-axis on the chart.
Tip: The group column and the value column are taken from the data prepared to be displayed on the chart (See Preview of your data visualised on a chart image).
Customising the Appearance of the Chart
To change the appearance of the chart:
Click on the Bar/Line chart on the widget designer page, its Properties panel will be displayed.
Go to Appearance section. Do required changes to the appearance of the chart.
Adding a Chart Title
To add a chart title:
Click on the widget's Header section, and its Properties panel will be displayed.
Go to the Title section.
In the Text field, enter a suitable title for the chart. The chart title will dynamically update in real-time as you type.
The below image shows a preview of your designed chart in the Preview mode. (See how to preview your data visualised on a chart image).
Here is a video on creating a user interface to visualise information to further enhance your understanding.
Designing a Radial Gauge User Interface to Visualise Information
Here is an example of creating a user interface (Radial Gauge) to visualise information.
On the app homepage, go to the My Work tab on the left sidebar.
Search and select the folder you wish to open.
Go to the User Interfaces tab.
Click on the Add button.
Choose the Visualise Data option.
Choose a Data Source: Pick an existing Lucy action or a database.
For instance, let’s select an existing database.
To select an existing database, head to the Databases tab. All the databases created in the system will be listed categorised by its folder.
Choose and click on the required database. Alternatively, you can use the search box to search and filter databases.
A preview displaying the available fields of the chosen database will be listed.
To confirm the selection, click Select this source .
A table preview of the selected database will be displayed.
Prepare data: Filter and aggregate data as necessary.
A preview of your data will be displayed.
Once you are happy with the data, click Looks Good.
Select the desired type of Widget Template to display data e.g., Radial Gauge.
Click Edit this template. The respective template will be displayed on the widget designer page.
By default, the Design mode will be selected on the widget designer page.
Customising the Widget
After selecting a data source and selecting the widget template, you can customise the properties of the radial gauge.
Customising the Properties of the Radial Gauge
On the widget designer page, click on the Radial Gauge. The Properties panel will be displayed.
On the properties panel, set properties as required.
It is necessary to specify the Field of the data source to be bound and generally, it is a single field. In data binding, it is the Value field.
To set the Field:
Click on the Radial Gauge. The Properties panel will be displayed.
Head to Gauge section.
Choose the Field.
Customising the Appearance and Styling
Customising the appearance and style of a radial gauge widget involves making visual adjustments to its elements, including colours, scales, labels, and other design aspects.
On the widget designer page, click on the Radial Gauge, The Properties panel will be opened on the right.
On the properties panel, go to Colours section.
Customise the visual aesthetics of the radial gauge according to your preferences.
After setting the properties, provide a appropriate Name for the widget under General tab.
Customising the Properties of the Widget's Header Section
To customise the properties of the widget’s header section:
On the widget designer page, click on the widget’s header section to open its Properties panel.
Go to the Container section to pick a background colour for the header or you can select a background image.
In the Text field, enter the Title of the widget.
Select a colour for the title.
Type in the font size of the title. Instead, you can use the up and down arrows to increase or decrease the font size.
The below image shows a preview of your designed gauge in the Preview mode. (See how to preview your data on the gauge).
Previewing Your Widget
Preview mode can be used to view a live preview of the appearance and the behavior of the widget.
On the widget designer page, click Preview button to change the mode to Preview.
The widget will be displayed in the preview mode.
Saving Your Widget
After you have done required customisations, you can save the widget for future reference.
On the widget designer page, click Save Widget.
Under General tab, enter a Name for the widget (adding a name is mandatory).
Add a Description if necessary.
Click Save Widget.
The system stores all your saved widgets under the User Interfaces tab of the respective folder.
Sharing Your Widget
After you have designed a widget, you can share it with others. Find out more in the article below.
Here's a brief video on creating a user interface for data visualisation to enhance your understanding.
Last updated
