When we add a Chart component, we can display data from either:
- A sheet in your spreadsheet
- A Relation column in the data editor
Once we choose the source, the chart will automatically present our data. We can now choose a style of chart and affect how the data is calculated and displayed.
Presenting the data
Whether we choose a sheet or a relation for the source, the chart will default to presenting the data for all the rows based on the first column. However, we can use the Label and Quantity properties to change this.
For example, suppose we have a sheet which shows three orders for a shop.
|Apple pie muffin||20||Sam Smith|
|Bread pudding||1||Lana Del Ray|
|Honey Chia||8||Barry Manilow|
|Apple pie muffin||3||Freddy Mercury|
If we have only the Label property connected to the Orders column, then the chart will count all of the rows with the same value in that column and group those in the chart as three segments, each with a count of one. The chart then shows the total in the middle.
Now the chart shows how many of that particular item were ordered. We could also change the label to show the name of the customer instead.
Using a relation as a data source
A relation column can also be the data source for a chart. This allows you to make the chart component show the relevant data for different list items. For example, in this task management app, each user's chart shows their personal stats on their tasks.