amCharts :: Bar/line chart

• Property Editor - DATA PROPERTIES
• Property Editor - STYLE PROPERTIES
• Property Editor - VERTICAL AXIS PROPERTIES (LEFT)
• Property Editor - HORIZONTAL AXIS PROPERTIES
• Property Editor - VERTICAL AXIS PROPERTIES (RIGHT)
• Property Editor - GRID PROPERTIES
• Property Editor - OTHER SERIES 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 the Google Sheets # will be +1 incrementally from first to last (moving left to right along your tabs).

Format data as dates

Once selected, the plugin will read the Category data list as date data which impacts chart labelling and the relative spacing of data points.

Take a look at the example below:

• Building this chart without using Format data as dates will render four columns, one for each entry in the list. The chart will not acknowledge the gap that occurs between 2nd - 5th January, and 5th - 8th January.
• Building this chart using Format data as dates will render four columns but insert spaces for the days in which no revenue occurred - 3rd, 4th, 6th, 7th January.

When using Format data as dates, labelling will also adjust dynamically to the scope of the view. So, if a Scrollbar is being used to allow zooming in and out of a time period, the time labels shown will scale in-line with the period being displayed. A very macro view might be labelled as '2017', whilst a very micro view might be labelled '14:50, 10th December'.

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:

Time period grouping

Must be used in combination with Enable data grouping to become active Using this, you can summarise / rollup your date for periods of time. So, if you are interested in summing / averaging all transactions within a Week, Month or Year then you can specify that here. Once selected, all values within that period will be merged into one representative value.

This option will apply to all Series universally, although you can specify within each Series what the Data grouping mode should be - i.e. Sum, Average etc.

Chart stacking mode

Multi-series charts can be stacked, provided that the graph type is matching across all series. So a two series stacked column chart would need column selected within Graph type for both Series 1 and Series 2to be effective.

Two types of chart stacking are available:

• Regular: the value of each series, per category data item, is added sequentially to the previous to create a sub-total by category item
• 100%: columns / areas all total 100%, and the size of each series sub-column / sub-area is proportionate to the sum of all values for that category item

Interval refresh

Changes to any Bubble values will automatically trigger a chart refresh, however Google Sheets updates will not. Irrespective of the data source being used, enabling Interval refresh will force a data fetch and refresh at the interval specified below.

One application of this might be fetching stock / market prices from a Google data source.

Refresh interval (s)

If Interval refresh is enabled, this controls the gap between each data fetch and refresh is seconds.

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 - SERIES 1 / 2 PROPERTIES

Series 2 enabled Only available within SERIES 2 PROPERTIES

This checkbox will need to be enabled in order to bring a second series into a chart.

Graph type

Each chart is build up of one or multiple graph elements. Here you can specify, for each Series, the type of graph that should represent the Series data.

Category data list

Only required when rendering data from the Bubble database This field carries your 'category' data - in a vertically orientated bar/line chart these values would translate to the labels that appear along the horizontal axis.

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).

Category data name

• 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.

Values data name

• 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.

Data grouping mode

Only becomes effective when Enable data grouping is active, or there are multiple series in the chart

If you are building a chart that rolls-up and summarises a larger data set then there are several options available for doing this:

• Sum: will sum together all values that are associated with each piece of category data and present as one total value per category item
• Average: will produce a mean average of all values that are associated with one piece of category data
• Cumulative: will firstly sum together all values that are associated with each piece of category data, before sequentially adding each item (from first in the data set to last) to the values that precede it. This makes most sense when you need to create a cumulative total over time.

Plotting axis

Series can be plotted to either a left or right axis. By default, all Series will plot to the left axis. Selecting Right axis will create a second axis with a new numerical range and scale, proportionate to the series values being plotted to it.

Fill color

Controls the fill area within columns (column graph), or the area beneath the line (line graph). Transparency can be controlled via the slider on the right hand side of the color console.

Line color

Controls the line color around each column (column graph), or the color of the plotting line (line graph). Transparency can be controlled via the slider on the right hand side of the color console.

Line thickness

A number value that sets the thickness of line around each column (column graph), or the thickness of the plotting line (line graph). Setting this to 0 will remove the line altogether.

Line dash length

Where a dashed line is needed, will set the length of the dash line as well as the interval spacer. When left blank, or set to 0 the line will be solid.

Bullet type

Will place a marker at each data intersection point. Dropdown options control settings and color settings will mirror the Series.

Bullet size

A number value that controls the size of the data markers for that Series.

Color data: Google

Only works 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.

Color data: Bubble

You can specify here a list of color values from the database, or some other dynamic data source, for the column fill area / line area. Color values should be in #hexcode 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.

Balloon labels

When enabled, a 'balloon' / callout label will appear as the cursor hovers over a data point. The text within a chart's Balloon labels can be controlled within Style & Layout Properties.

Property Editor - STYLE & LAYOUT

Chart overall 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.

Chart orientation

When changed to Horizontal, will render move all the chart elements through 90 degrees to create a horizontal bar / line chart.

Loading graphic

Enabled by default, this shows / hides the holding graphic whilst a chart is compiling and before it has rendered.

Loading graphic color

Sets the color of the loading graphic.

Animation type

Sets the type of animation shown whilst the chart renders. This can be set to none where no animation is needed.

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.

3D depth Extrudes a column or line chart downwards to create a 3D effect. This controls the depth of that extrusion.

Angle of chart

Controls the angle of a column or line extrusion, as set within 3D depth.

Decimal places

Sets the number of decimal places to be shown on chart labels.

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.

Legend hover emphasis

Controls the highlight behaviour of the legend during a mouse hover.

Balloon label text

Controls the text and formatting within a chart's Balloon labels. Use HTML to style the content and the special terms below can be used to bring in dynamic values:

• [[value]] : this is the value for the given data point
• [[title]] : this is the same as Values data name
• [[percents]] : the value of a given data point as a percentage
• [[category]] : the is the Category value for the given data point

Scrollbar enabled

Shows / hides a scrollbar that provides zoom and focus controls where category data is expansive.

Scrollbar Series

A scrollbar will provide a Series outline within itself to orientate the user - control here which Series should be shown.

Scrollbar height

By default set to 40, this number can be adjusted to proportion the scrollbar to a chart.

Scrollbar position

Controls whether a scrollbar is stationed beneath a chart or above it.

Scrollbar offset

Offsets the scrollbar from the base / top of the chart by the distance specified here.

Property Editor - VERTICAL AXIS PROPERTIES (LEFT)

Minimum value

By default the minimum range value for the vertical axis will be calculated based on the values in the Series that are mapped to it. You can override this here by specifying a minimum value for the axis.

Maximum value

As above, by default the maximum range value for the vertical axis will be calculated based on the values in the Series that are mapped to it. You can override this here by specifying a maximum value for the axis.

Line color

Controls the line color for the vertical axis.

Line thickness

Controls the line thickness for the left vertical axis (or both, if a second axis is being used).

Labels enabled

Shows / hides labels on the vertical axis.

Labels color

Controls the text color of the labels on the vertical axis.

Labels unit

Here, a unit of measurement can be introduced to the labels on the vertical axis - '$' for instance.

Labels unit position

Controls whether a unit of measurement should be appended before or after the numerical value on the vertical axis.

Labels offset (px)

Offsets the axis labels from the axis itself by the distance specified here.

Property Editor - HORIZONTAL AXIS PROPERTIES

Axis position

Controls whether the horizontal axis sits below or above the chart.

Line color

Controls the line color for the horizontal axis.

Line thickness

Controls the line thickness for the horizontal axis.

Labels enabled

Shows / hides labels on the horizontal axis.

Labels rotation

Rotates the labels on the horizontal axis through the specified angle.

Labels color

Controls the text color of the labels on the horizontal axis.

Labels offset distance

Offsets the axis labels from the axis itself by the distance specified here.

Property Editor - VERTICAL AXIS PROPERTIES (RIGHT)

Line color

Controls the line color for the second vertical axis.

Labels unit

Here, a unit of measurement can be introduced to the labels on the second vertical axis - '$' for instance.

Labels unit position

Controls whether a unit of measurement should be appended before or after the numerical value on the second vertical axis.

Property Editor - GRID PROPERTIES

Horiz line color

Sets the color of the horizontal grid. Lines will originate from each value point on the vertical axis.

Horiz line thickness

Sets the line thickness of the horizontal grid.

Horiz dash length

Where a dashed line is needed, will set the length of the dash line as well as the interval spacer. When left blank, or set to 0 the line will be solid.

Horiz fill color

Sets the color of a stripe pattern filling alternate rows within the horizontal grid. Transparency can be set using the slider on the right-hand edge of the console.

Vert line color

Sets the color of the vertical grid. Lines will originate from each value point on the horizontal axis.

Vert line thickness

Sets the line thickness of the vertical grid.

Vert dash length

Sets the length of the dash line and the interval spacer to create a dashed line in the vertical grid. When left blank, or set to 0 the line will be solid.

Vert fill color

Sets the color of a stripe pattern filling alternate rows within the vertical grid. Transparency can be set using the slider on the right-hand edge of the console.

Property Editor - OTHER SERIES PROPERTIES

There are 8 available series within the bar/line amCharts element. Series 3 - 8 are controlled through these final batches of settings. Not all properties are available for editing on Series 3 - 8. The properties outlined below can be specified, and the remaining properties will be mirrored from either Series 1 or Series 2. Shared settings will let you determine which of Series 1 or 2 these outstanding settings are duplicated from.

The most common use case that requires a deliberate setup of this is where a chart made up of multiple column graphs and line graphs is needed. In this case, you will need Series 1 and Series 2 to have a different Graph type and for Series 3 - 8 to share each of these setups where needed.

Enabled

Enables the new Series.

Category data list

Works exactly as described in SERIES 1 PROPERTIES

Values data list

Works exactly as described in SERIES 1 PROPERTIES

Values data name

Works exactly as described in SERIES 1 PROPERTIES

Data grouping mode

Works exactly as described in SERIES 1 PROPERTIES

Fill color

Works exactly as described in SERIES 1 PROPERTIES

Shared settings

Defines whether undefined properties are mirrored across from Series 1 or Series 2.

Plotting axis

Works exactly as described in SERIES 1 PROPERTIES

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

Triggers 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

Chart is loaded

Triggers once a chart has fully loaded. The custom state Loaded will also be set to true.

Actions

The following chart actions can be triggered within workflows to bring about changes to the chart or its behaviour once it has already been built.

Show / Hide series

Will show or hide a Series that has already been defined within the chart setup. You will need to specify the Series and whether you need to show it or hide it.