This screen element, found under the Display group, is aimed at streamlining the creation of visualizations, charts, and widgets on Fuuz screens. The element is completely self-contained - no need to worry about forms - and all configuration is done through a streamlined wizard!

Example

Let’s walk through an example of building a visualization to see how this new element works. Let’s say we want to see a breakdown of active inventory by status: whether it’s OK, loaded, suspect, or another status. We start by dragging a Chart element from the toolbox into our screen. It’ll render initially with a message saying we need to select a chart type. Inside the Properties panel for the element, we’ll find a Chart Configuration field we can click to open the configuration wizard.

 

The Chart element as it displays in a screen

 

The Chart Configuration input in the element Properties panel

 

The first two screens in the wizard will ask us to select a chart type and a data model. (Don’t worry, you can change these later if you need to!) We want a Pie chart, and we want to pull our data from the Inventory data model, so we’ll select those options.

 

The first wizard screen, asking what chart type to build

 

The second wizard screen, asking what data model to use for the chart data

 

When we select a data model, the wizard switches to a panel layout. From here, we’ll work left-to-right to configure the chart.

Chart configuration with only a chart type and data model selected.

We’ll start with the Data panel. We first need to decide if we’re using One to One or Aggregated data for this chart. One to One data will render one data point for each record in the data model; that’s often helpful for plotting transactional data over time, but in this case, we want to aggregate (sum) the inventory quantities by status, so we’ll flip the switch from One to One to Aggregate.

Next, we select which fields we want to Group By. Since we want to view inventory quantities by status, we’ll find the inventoryStatus relation field, expand it, and select the name field inside it to group by the inventory status name.

Finally, we need to select which fields we’re aggregating and how we’re aggregating them. Since we want a total of inventory quantity, we’ll find the quantity measure field and expand it, then expand the _aggregate field to list the fields we can apply aggregations to. We want to compute a sum of the inventory quantity value, so we’ll expand value, find the sum operator, and select it.

The quantity._aggregate.value path expanded.

The sum operator selected.

When we do that - assuming we have inventory records in the system - we’ll immediately see a preview of the pie chart we want. If we were happy with this, we could close the configuration dialog and we’d be done - but we have a few more tweaks we want to make.

Chart configuration with group by and aggregate fields selected.

First of all, we specified we wanted to see a breakdown of active inventory by status. That means we need to use the Filters panel to apply a filter to the data set. Thankfully, this is simple: just click the button, then select the Active field in the first Field dropdown and “is true” in the second Operator dropdown - and that’s it!

A filter to only include Active inventory in our chart.

When the filter is applied, you’ll see the preview update to drop out any inactive inventory. There are now a lot fewer statuses in our pie chart, removing some of the noise.

Chart configuration with a filter applied.

Finally, we can fill out some cosmetic configuration options to add a caption or sub-caption, change whether we display percentage or numerical values, and more.

Chart configuration with captions applied.

Once we’re satisfied with our visualization, we can close the dialog and save our screen. When we run the screen, we’ll see our chart!

The rendered chart on a running screen.

While this new element already simplifies creating widgets and simple charts, we have lots of improvements planned to make it even more useful - like expanding the cosmetic configuration options available in the wizard and displaying a more accurate preview of the chart in the screen designer canvas.

Chart Configuration Wizard

Clicking on the button in the “Chart Configuration” property will open up the chart configuration dialog, shown below. Here you can configure what type of chart/graph you want, what Fuuz data model to query the data from, and then the specific fields/aggregates/filters for that data.

Chart Type

In the top-left corner, the selected chart type is displayed. You can change to a different chart type here.

Module

Near the top-left corner, the selected Fuuz data model is displayed. You can change to a different data model here.

Data

The left-most section is for configuring what fields on the selected data model should be used for the chart/graph. For most chart types, there are two main modes: One to One and Aggregate.

One to One mode will display an input for the Value Field, where you can select what field will be used as the data in the chart/graph. For most chart types, this should be a numeric value. There can also be an input for the Label Field, which will be the associated label for each value. This should generally be a text value.

Aggregate mode will display an input for the Aggregate Field, where you can select what field will be aggregated on to use as the data for the chart/graph. Here you can select a data model field, then select its _aggregate selector, then under that you can select what aggregate type to use. This will generally be a numeric value. This is used in conjunction with the Group By Field(s) input, where you can select what data model field(s) to group the aggregate query by. This is generally a text value.

Filters

The middle section is for configuring the filters to the Fuuz query. Here, you can add rules via the “Rule” button and select data model fields, then select how you want to filter them.

You can get more advanced by adding more groups and using the “Or” operator for a group instead of the default “And”.

Configuration

In the top-right section, you can configure different properties specific to the type of chart/graph you are creating. These properties are for the cosmetics of the chart/graph.

Preview

In the bottom-right section, you’ll see a live preview of the chart/graph you are configuring. This preview is limited to the first 100 records, but otherwise will be identical to the chart/graph that renders on your screen.