amCharts :: Pie Chart

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

Property Editor

Property Editor - DATA PROPERTIES

Pick data source

• Bubble
  • For rendering data from the Bubble database
• Google Sheets
  • For rendering data from a Google Sheet

Google Key

Only required when rendering data from a Google Sheet Paste here the unique ID for your Google sheet - this can be found in its URL, and will be the long code of letters and numbers (see below).

You will also need to have Published your Google Sheet - either the Entire Document, or just the individual sheet that will act as source data. This is done through File > Publish to the web and then using the dialog box shown below.

Google Sheet #

If you have shared just one sheet then this value will be 1. If you have shared multiple then each sheet will be +1 incrementally from first to last (moving left to right along your tabs).

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 yyyy mm dd format. This can be done by adding :formatted as at the end of the data query, and using a Custom format of yyyy mm dd (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:

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.

Decimal places

Sets the number of decimal places to be shown on labels and within the legend.

Data export

Allows users to download the chart data set via a drop-down menu in the top right of the chart area.

Download formats are PNG, JPG, PDF, SVG, JSON, XLSX.

Property Editor - STYLE PROPERTIES

Chart theme

Some preset chart formatting options. Each one controls multiple styling options on the chart.

If additional changes are made to individual chart properties then that change will over-ride the corresponding property value from the theme.

Color data - Bubble

You can specify here a list of color values from the database, or some other dynamic data source, for the segments of a pie chart. Color values should be in #Hex value format.

You could use this to attribute color values to particular Things and then run a Search for that data:

Or you can point to a standalone list of color values:

If there are more segments than color values, the colors will be looped until all segments have a value.

Color data - Google

Only required when rendering data from a Google Sheet If a Google Sheet contains color data then it can be used to control the segment color choices. Enter exactly here the name of the column header that contains the #hex values.

Outer labels

Controls whether callout labels are shown for each segment of the pie chart.

Outer labels gap

Controls the distance between the callout label and the edge of the chart. Negative numbers will position the callout within the perimeter of the chart.

Outer labels color

Sets the text color of the callout labels.

Show balloon labels

Controls whether 'balloon' labels are shown on mouse hover over the chart.

Animation type

Controls the type of animation shown on initial rendering of a chart. By default, this is set to none for pie chart.

Animation duration

For setting the duration of the initial animation - unit is seconds.

Animate in sequence

Controls whether segments should be animated sequentially, one after the other, or simultaneously.

Animate on click

Sets the callout distance of a segment when it is clicked. A second click returns the segment into the pie.

Setting this to 0% will stop an animated callout altogether.

Doughnut hole %

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

3D depth

Extrudes a pie chart downwards to create a 3D cylinder effect. This controls the depth of that extrusion.

Angle of chart

Narrows the viewing angle to create an oval effect. This works well with 3D depth to setup a more natural 3D effect.

Events

The following chart events can trigger workflows in your apps - if you create a new Workflow you will find them within Elements.

Chart is clicked

This can be used as a When condition to trigger workflows or control conditional properties.

When a user clicks on a segment of a pie chart three custom states will populated as below:

• Click category - returns the category value of the clicked segment
• Click value - returns the numerical value of the clicked segment
• Click percent - returns the percentage value of the clicked segment

Chart is loaded

Once the chart has fully loaded the custom state Loaded will be set to true.

Actions

None