AG Studio: Build dashboards using native components in web apps. Join us for a webinar on 28th July at 2pm UTC+1 Register

JavaScript Embedded AnalyticsBuilding Widgets

Once a Widget is on the layout, configure its data and appearance in the Edit Panel.

In Edit Mode, clicking a Widget on the layout puts it into focus. When a Widget is focused, the Edit Panel updates to show Widget configuration, split into two tabs:

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

The example below shows a bar chart displaying Net Sales by Region. Clicking on the chart updates the Edit Panel to show the Setup and Format tabs for that Widget.

Widget Setup Copy Link

Data can be dragged and dropped into an empty Widget or the Setup data section. The UI guides visually to the appropriate drop targets. If an item cannot be used in a slot, AG Studio prevents the drop and guides to a valid slot. This might be because no relationship between data is defined or Widget data requirements are not met.

Where possible, items can be reordered within a slot by dragging them into the required order, which determines the order of Fields being displayed. For detailed information on managing data fields, see Data Setup.

To remove an item, its remove action can be used from the data menu accessible in the data pill. Aggregation and sorting options are also in the same menu. Read more on Aggregation and Sorting.

Widgets can be changed to a different type via the Setup Panel dropdown. AG Studio will preserve field configurations during Widget type switching where possible. Where the new input requirement needs less data, additional fields will be dropped into Tooltip.

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.

Additional customisation is supported on interactivity features such as crosshair, navigator, and zoom. The options available for customisation depend on the application preset and will vary depending on what is permitted.

Working with Date & Time 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.

Using a Date Field Copy Link

Drop a date field onto a chart or table and the axis spans the dates found in that field. It groups by a default period - day for a date field, minute for a field that also carries a time of day.

To change the period, select the Widget to open the Setup panel on the right, then open the date field's menu from its pill in the data section and pick another period - year, quarter, month, week, or day. The periods on offer are configured by the developer. 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; you don't need to remove it and drag 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.

Using a Calendar Copy Link

A calendar is a named date range defined in the dashboard's data, with a fixed start and end. Its 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 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.

Drag a calendar period such as Month onto a Widget and 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.

Group By Legend Copy Link

The Legend field splits a single chart into multiple coloured series by a categorical dimension - for example, sales broken down by region. It is available on Bar, Column, Scatter, and Bubble charts.

Charts that support a legend expose a Legend slot in the Setup panel. Assign a categorical field to break the chart down by that field's distinct values: each value gets its own colour, and the legend updates automatically. Removing the field reverts to a single series.

Group by Legend is not yet supported with Server-Side Data. The Legend slot is hidden when a widget is backed by a server-side data source.

Bar and Column Charts Copy Link

How a Legend field segments each bar or column depends on how many measures are present.

Single measure. The Legend field splits each bar or column by the field's distinct values, arranged according to the chart variant:

  • Clustered - values appear as separate bars side by side within each category.
  • Stacked - values appear as stacked segments within one bar.
  • 100% Stacked - segments are proportional, each bar normalised to 100%.

Multiple measures, no Legend field. Each measure becomes its own series, defined by the measure name.

Multiple measures with a Legend field. Measures form the primary (outer) grouping and legend values the secondary (inner) grouping. Colours stay consistent per legend value across every measure group. For example, plot Net Sales and Gross Sales by region with Segment in the Legend slot - X-Axis: Region, Y-Axis: Net Sales and Gross Sales, Legend: Segment. Each region then carries six values - Net Sales and Gross Sales, each split across Enterprise, Mid-Market, and SMB - arranged according to the chart variant:

  • Clustered - six bars per region, grouped by measure first (the three Net Sales bars, then the three Gross Sales bars).
  • Stacked - two bars per region (Net Sales, Gross Sales), each split into Enterprise, Mid-Market, and SMB segments.
  • 100% Stacked - as Stacked, normalised to 100%.

The example below plots Net Sales and Gross Sales by region with Segment assigned to the Legend slot, so each measure splits into one coloured series per segment - Enterprise, Mid-Market, and SMB - with colours consistent across both measures. Open the Setup panel to change or clear the Legend field, or change the chart type to another bar or column variant to see how the arrangement differs.

Scatter and Bubble Charts Copy Link

The Legend field splits plotted points into one coloured series per distinct value, with consistent colours and tooltips reflecting the hovered point's legend value. Bubble charts behave identically: the Size measure still drives bubble area within each series.

The example below plots average quantity against average discount as a bubble chart, with bubble size driven by net sales and Category assigned to the Legend slot, so each point belongs to one coloured series per product category.