We just wrapped up AG Studio Launch Week See what we shipped

Building Widgets

You set up a Widget's data and appearance in the Compose Panel.

In Edit Mode, click a Widget on the layout to focus it. The Compose Panel then shows that Widget's settings, split into two tabs:

  • Setup - configures the data slots and interactivity.
  • Format - controls how the Widget looks.

The example below shows a bar chart of Net Sales by Region. Click the chart to see its Setup and Format tabs in the Compose Panel.

Widget Setup Copy Link

You can drag and drop data into an empty Widget or into the data section of the Setup tab, and the UI shows you where it can be dropped. If an item cannot be used in a slot, AG Studio stops the drop and guides you to a valid slot. This can happen when no relationship is defined between the data, or when the Widget's data requirements are not met.

Where possible, you can reorder the items in a slot by dragging them, and the Widget displays the Fields in that order. For more on managing data fields, see Data Panel.

To remove an item, open the data menu from its data pill and use the remove action. The same menu also holds the aggregation and sorting options. Read more in Aggregation and Sorting.

You can change a Widget to a different type from the dropdown in the Setup tab, and AG Studio keeps your fields set up as they were wherever it can. If the new type has fewer slots, fields that no longer fit move into its Tooltip slot, if it has one.

Widget Formatting Copy Link

Format settings vary by Widget type. Common settings include the Widget title and description, number formatting, labels and legends, and display options.

You can also customise interactive features such as the crosshair, navigator and zoom. Which options you can change depends on how your application is set up and what it allows.

Reset to Default Copy Link

When a Compose Panel setting differs from its default value, a reset to default button appears next to the section name. Click it to reset every setting in that section to its default value.

Default values are not the same as saved state. If your application has loaded a saved state, resetting returns the values to the Studio default values, not to the saved state. Your developer can configure the default values.

Dates and Times Copy Link

There are two ways to put dates on a Widget's axis, and they differ in the span of time the axis covers:

  • Drag a date field - the axis covers the range of dates present in that field's data.
  • Drag a calendar - the axis covers the date range defined for the calendar, regardless of which dates appear in the data.

In both cases the axis still narrows to match any filters applied to the Widget.

Date Fields Copy Link

When you drop a date field onto a chart or table, the axis spans the dates found in that field. It groups them by a default period: day for a date field, or minute for a field that also carries a time of day.

To change the period, select the Widget to open its Setup tab on the right. Open the date field's menu from its pill in the data section, then pick another period, such as year, quarter, month, week or day. Your developer configures which periods are on offer. The pill shows the field name and the period it's using, for example Order Date · Month, so you can always see how dates are grouped. Changing the period re-groups the same field in place, so you don't need to remove it and drag in a different one.

In the example below, the Order Date field is on the axis and grouped by year. Select the chart, open the field's menu from its pill, and switch the period to see the chart re-group.

Calendars Copy Link

A calendar is a named date range with a fixed start and end. Your developer sets up the calendars in the dashboard's data. Each calendar's time periods (Year, Quarter, Month and so on) appear in the Data Panel as their own group, named after the calendar.

Dragging a calendar period works just like dragging a date field. You place it on an axis and change its period from the pill in the same way. Two things differ: the periods on offer come from the calendar, and the axis spans the calendar's whole range rather than the dates in your data.

When you drag a calendar period such as Month onto a Widget, a chart's timeline stays continuous. Periods with no data show as gaps instead of being skipped, which keeps trends honest. The axis still responds to filters, narrowing to the filtered range.

The example below produces the same chart as above, but the axis comes from dragging in a calendar period rather than the date field. Select the chart and open the field's menu to switch the period.

Chronological and Cyclic Periods Copy Link

Periods come in two kinds: chronological and cyclic.

A chronological period keeps each year separate, so January 2023 and January 2024 are two different values. Use these to follow a trend over time:

  • Year, Half Year, Quarter, Month, Week, Day, Hour and Minute.

A cyclic period combines repeating periods into one value, whatever the year: all Januaries share one value, and so do all Mondays. Use these to compare seasons, such as which month or day of the week sells best:

  • Month of Year, Month of Quarter, Week of Month, Day of Week, Half of Year and Hour of Day.

Weeks start on Monday, following the ISO week standard. Hour, Minute and Hour of Day are only offered for a field that also carries a time of day.

Your developer can add periods of their own, such as fiscal weeks or pay periods. These appear in the same menu as the built-in periods.

Group By Legend Copy Link

The Legend slot splits a chart into several coloured series by the values of a category, for example sales broken down by region. Bar, Column, Line, Area, Combo, Scatter, Bubble, Radar Line, Radar Area, Radial Column and Radial Bar charts have a Legend slot.

To split a chart, add a category field to the Legend slot in the Setup tab. Each value of the field gets its own series, colour and legend entry, and removing the field returns the chart to a single series.

The series a chart draws depend on its numeric fields:

  • No Legend field. Each numeric field is its own series, named after the field.
  • One numeric field with a Legend field. The field splits into one series for each legend value, named after the value.
  • Several numeric fields with a Legend field. Each field splits into one series for each legend value. Each series is named with both parts, such as Net Sales · Enterprise.

The tooltip shows the legend value of the series under the pointer.

How the split series are arranged depends on the chart:

  • In a Grouped Bar or Column chart with several numeric fields, the bars for each category are ordered by field first, then by legend value.
  • In a Stacked Bar or Column chart with several numeric fields, each field has its own stack, split by legend value.
  • In a Stacked Area chart, every series stacks into one total.
  • In a 100% Stacked chart, each stack always reaches 100%.
  • Radar Area series overlay each other rather than stacking.
  • On a Combo chart, the Legend splits only the columns. The line still shows one total for each category.
  • On a Bubble chart, the Size field still sets the size of each bubble within its series.

The example below plots Net Sales and Gross Sales by region with Segment in the Legend slot, so each field splits into one series per segment: Enterprise, Mid-Market and SMB. Select the chart to change or clear the Legend field in the Setup tab, or change the chart type to another bar or column variant to see how the arrangement differs.

Each chart family's page in the Widget Catalogue has its own Legend example: Bar and Column Charts, Line and Area Charts, Combo Charts, Scatter Charts and Polar Charts.

Series Limit Copy Link

A Legend field with many distinct values would produce one series for each value, and a legend too large to read. To prevent this, a chart automatically keeps only the most significant series, but only when it would otherwise have more than 50. With 50 series or fewer, every series is drawn as normal.

The chart ranks legend values by their value, largest first, keeps the largest 50 series and leaves the rest out altogether. With several numeric fields, each legend value produces one series per field, so the fields share the limit. With two fields, for example, each field keeps the 25 largest legend values, ranked by the first field, so every field shows the same values.

Widget-Specific Options Copy Link

Some Widget families have setup slots and options of their own, such as the Rows, Columns and Values slots on a Pivot Table or the Hierarchy Levels on a Treemap. Each Widget family has its own page in the Widget Catalogue describing them.