chart.js :: Pie Chart

• Property Editor - DATA PROPERTIES
• Property Editor - STYLE PROPERTIES
• Events
• Actions

Property Editor

• Data Properties
• Style Properties

Property Editor - DATA PROPERTIES

Pick data source

• Bubble
  • For rendering data from the Bubble database

Category data list Only required when rendering data from the Bubble database This field carries your 'category' data - in a pie chart this list will translate to the labels that appear on the chart, or in the legend.

This should be a list of Text data items. Most commonly this will be dynamically sourced data found either through a Search of database items, or retrieved from a Custom state that is storing a list of values. Alternatively this could be populated through an API call.

If a Search is used, filters and search constraints can be applied in the normal way.

If Date data is being used then the values must be presented in yyyymmdd format. This can be done by adding :formatted as at the end of the data query, and using a Custom format of yyyymmdd (see below).

Name of Category

• If using Bubble data

  • Set as default to "Category name", this name will be used within your chart's labels. It should be changed to a generic title for your category data - e.g. "Fruits", "Trading days", "Customer names" etc.

• If using Google Sheets data

  • This should match exactly the name of the column heading within Google Sheets that contains your category data. So a column full of dates might have the heading "Dates" in cell A1 - "Dates" would be entered into Name of Values in this case.

Values data list Only required when rendering data from the Bubble database This field carries your numerical data for the chart. You should fetch this data using the same method and constraints as those used to fetch your Category data.

For instance, if your Category data list is a Search for Person's name, then your Values data list should be something like Search for Person's height. Importantly, the number of search results, and the order of correspondence, would match for both of these Searches. This should always be the case.

If a constraint had been added to the Category data list Search above, Age > 25, then this same constraint should be added to the Search for the Values data list.

This data should be a list of Number items only. As with category data, this will most commonly be dynamically sourced data found either through a Search of database items, or retrieved from a Custom state that is storing a list of values. Alternatively this could be populated through an API call.

Note: A Values list must always be provided, unless Use Category data as values checkbox has been ticked.

Name of Values

• If using Bubble data

  • Set as default to "Name of Values", this name will be used within your chart's labels. It should be changed to a generic title for your Values date - e.g. "Volume", "Revenue", "Conversion time" etc.

• If using Google Sheets data

  • This should match exactly the name of the column heading within Google Sheets that contains your values data. So a column full of revenue data might have the heading "Revenue" in cell B1 - "Revenue" would be entered into Name of Values in this case.

Use Category data as values Only works when rendering data from the Bubble database This can be used where there are no numerical values available to render a chart, but instead a count should be performed on the Category data list.

So if a chart was being rendered of 'Yes' or 'No' responses to a survey question the resultant data table may look like this:

There are no numerical values available from which to create a chart. However, by selecting Use Category data as values a value of 1 will be ascribed to each piece of Category data, before the similar values are then summed.

In the example given above, this would effectively create a table like this:

Note: When this option is selected you do not need to provide a Values data list.

Enable data grouping Will look for matching values in the Category data list and sum / aggregate the corresponding values from the Values data list.

This is useful where there are multiple values against a single entity - for instance, transactions within one day, or purchases by one customer - but you are interested in charting the sum of those values.

Example data before Enable data grouping:

Example data after Enable data grouping:

Property Editor - STYLE PROPERTIES

Legend enabled

Enables or disables a pie chart legend. Legend is disabled by default.

Legend position

If legend is enabled, controls its position relative to the chart.

Doughnut %

Sets the size of hole inside a pie chart - set to 0% by default.

Fill color 1 - 6

Here you can specify a list of colors that will be used to fill your segments. Fill color 1 will be attributed to the first data point, Fill color 2 to the second, and so on. If there are more than 6 data segments comprising your pie chart then the color list will be repeated.

Events

None

Actions

None