Chart component examples
These are examples on using the Chart component on Experience Designer.
Sorting buyers by purchase order count
A data service returns 100 purchase orders when Max number of records is set to 100. The chart uses By count to group the purchase orders by buyer (BUYE). The result is 12 unique buyers. Specific settings are configured for the chart:
| Setting | Value |
|---|---|
| Aggregation type | By count |
| Label field | BUYE - Buyer |
| Sort by | Aggregated value |
| Sort order | Descending |
| Max values to display | 5 |
The chart shows the 5 buyers with the highest purchase order counts, sorted by count among all 12 buyers. The counts are based on all 100 retrieved records.
| Buyer | Purchase orders | Displayed |
|---|---|---|
| BUYE-003 | 18 | Yes |
| BUYE-007 | 15 | Yes |
| BUYE-001 | 12 | Yes |
| BUYE-011 | 10 | Yes |
| BUYE-005 | 9 | Yes |
| Other seven buyers | 36 total | No |
Effect of changing sorting options
You can show the same buyer counts by group in different ways based on the sort options that you select. If you change Sort order to Ascending, the 12 buyers are ordered from lowest count to highest count, and the chart shows the 5 buyers with the fewest purchase orders.
| Buyer | Purchase orders | Displayed |
|---|---|---|
| BUYE-010 | 3 | Yes |
| BUYE-008 | 4 | Yes |
| BUYE-012 | 5 | Yes |
| BUYE-004 | 6 | Yes |
| BUYE-002 | 7 | Yes |
| Other seven buyers | 75 total | No |
If Sort by is changed to Field and the label field BUYE - Buyer is selected, the chart is ordered alphabetically by buyer instead of by count. With Sort order set to Ascending, the first five buyer IDs are displayed.
| Buyer | Purchase orders | Displayed |
|---|---|---|
| BUYE-001 | 12 | Yes |
| BUYE-002 | 7 | Yes |
| BUYE-003 | 18 | Yes |
| BUYE-004 | 6 | Yes |
| BUYE-005 | 9 | Yes |
| Other seven buyers | 48 total | No |