Chart Widget

The Chart widget displays form data visually — as bars, columns, lines, pies, donuts, or heatmaps. Use it when you want users to see patterns and distributions in form responses without having to read individual entries.

When to use this

• You want to show the distribution of responses across categories or over time
• You need to compare sums of numeric fields per group
• You want to complement lists and metrics with a visual overview
• You want to show data as a sortable table

How it works

The chart fetches data from a selected form and groups responses along the X-axis (categories or time). The Y-axis sets the value — either the count of responses or the sum of a numeric field. Filters limit which responses are included. The Chart type controls how the data is presented, and a color palette controls the look.

Add a chart

1. Open the Design editor for your applet.
2. Add the Chart widget to the page.
3. Open the widget settings.
4. Select the Form the chart should use.
5. Choose a Chart type.
6. Configure the X-axis, Y-axis, and Filtering.
7. Save your changes.

Widget settings

Form

Select the form you want to display data from. The remaining settings — field selection and filters — depend on the form you choose here.

Chart type

Choose how the data is presented:

Type	Description
Table	The data is shown as a sortable table.
Bar	Horizontal bars — good for categories with long names.
Column	Vertical bars — the most common option for comparing categories.
Radial Bar	Bars arranged in a circle — a visual alternative to column charts.
Pie	Pie chart — shows shares of a whole.
Donut	Donut chart — like a pie, but with a hole in the middle.
Line	Line chart — good for trends over time.
Stacked Column	Columns stacked on top of each other — shows both totals and distribution.
Heatmap	Shows values in a matrix using color intensity.

Title

Enter a title for the chart. The title is shown together with the chart. If you group the X-axis on a field, AppStudio fills in the field's name as the title unless you set one yourself.

X-axis

The X-axis is the horizontal line in a chart and shows categories or time. You can group data in one of three ways — only one option can be active at a time:

Setting	Description
Group by created date	Groups responses by when the form response was created.
Group by modified date	Groups responses by when the form response was last modified.
Group by field	Groups responses by the value in a selected form field.

Y-axis

The Y-axis is the vertical line in a chart and shows the value. You can summarize in one of two ways — only one option can be active at a time:

Setting	Description
Count responses	Counts the number of form responses in each X-axis group.
Sum over field	Sums the values of a selected numeric field across the responses in each X-axis group.

Filtering

Field filter

Open Field filter and choose Add condition to limit which responses are included in the chart. Add conditions by selecting a field and an operator. The available operators depend on the field type:

Operator	Meaning
=	Equal to
!=	Not equal to
=<empty>	The field is empty
!=<empty>	The field is not empty
=<includes>	Includes
!=<includes>	Does not include
<=lessOrEqual	Less than or equal to
>=greaterOrEqual	Greater than or equal to
=<within>	Equal to within
!=<within>	Not equal to within

After selecting an operator, enter a Term to complete the condition. Add multiple conditions to fine-tune the filter. All conditions must be met for a response to be included in the chart.

Date filter

Enter the start and end date and time for the period you want to filter form responses on. The dates refer to when the form response was created, not the value in a date field.

Color palette

The color palette controls which colors are used for the chart's series.

Presets

Pick a ready-made palette from the Color range presets list. AppStudio ships with several palettes:

• Primary color — colors that match the applet's primary color
• Secondary color — colors that match the applet's secondary color
• Light Lollipop / Dark Lollipop
• Red Roses / Ochre Sand / Yellow Lime / Green Mint / Ice Cube / Blue Ocean / Dark Chocolate
• Reset — restores the default values

When you pick a preset, the Hue, Chroma, and Lightness sliders are set automatically.

Color range

Adjust the palette manually with the sliders:

Slider	Range
Hue	0 – 360
Chroma	0 – 134
Lightness	0 – 100

The sliders are dual-knobbed — pick a range by moving both handles.

Seed

The seed controls the random generation of colors within the color range. Using the same seed and the same color range in multiple widgets gives you the same color sequence — useful when you want several charts to follow the same color scheme.

Click the magic-wand icon to generate a new random seed.

TIP

For more on how the color range and seed work, see iWantHue — the info button next to Color palette links there.

Example

Scenario: You want to show the number of incoming cases per status in a column chart.

1. Add a Chart widget to the overview page.
2. Select the Case form as the data source.
3. Set Chart type to Column.
4. Set the title to Cases per status.
5. Under X-axis, choose Group by field and pick the Status field.
6. Under Y-axis, enable Count responses.
7. Under Color palette, pick the Primary color preset to match the applet's look.

The chart now shows the number of cases grouped by status, in the same colors as the applet.

Tips

TIP

Use Group by created date combined with Line to show trends over time — for example, the number of incoming responses per day or month.

TIP

For charts that should look the same in multiple places, use the same seed and color range in every widget. The series will then get the same colors even if the underlying data differs.

Common mistakes

WARNING

If the chart is empty, check the filters. All conditions must be met at the same time for a response to be counted.

WARNING

You can only have one X-axis grouping active at a time — turning on Group by field hides the date options, and vice versa. The same applies to the two Y-axis options.

WARNING

The date filter applies to when the form response was created, not the value in a date field. To filter on a date field, add it as a regular condition under Field filter instead.