Chart Tools: Bar/line

• Property Editor - DATA PROPERTIES
• Property Editor - CHART STYLING
• Property Editor - LAYOUT PROPERTIES
• Events
• Actions

Property Editor

Property Editor - DATA PROPERTIES

Pick data source

• Bubble
  • For rendering data from the Bubble database

Chart uses date data

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

Note: If you are using date data then you will need to order your Data Source by dates in ascending order.

Take a look at the example below:

• Building this chart without using Chart uses date data 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 Chart uses date data will render four columns but insert spaces for the days in which no revenue occurred - 3rd, 4th, 6th, 7th January.

When using Chart uses date data, labelling will adjust dynamically to width and scope of the chart.

Default empty dates to Zero

When building a line chart along a timeline the line will, be default, connect each data point directly without returning to the X-Axis for dates in which no activity was recorded. Depending on a use case, this can paint a misleading picture.

Selecting Default empty dates to Zero will insert a zero value for every date that no other value was recorded, meaning that the charted line will return to the X-Axis after passing through each data point.

Property Editor - SERIES 1 PROPERTIES

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. The options are bar, line or horizontal bar.

If horizontal bar is selected for Series 1, _all _other Series will be set to horizontal bar. It is not possible to draw line graphs onto a horizontal bar chart.

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.

Thing to plot

Pick here the Bubble database Thing that contains the value data for Series 1 / 2 of the chart.

Data Source

Here, connect your chart to any available Bubble data source - as long as it matches the selected Thing to plot. Commonly, this will be a Search of the Bubble database, and so any search Constraints should also be added here.

If you are charting values from a Custom State or through an API then you should select number as your Thing to Plot and connect your Values data into the Data Source field. In the case of Custom State's and API, you should also connect a label data source into the Other Label Data field. The number of items returned from both your Value and Label searches should match.

Note: If you are using date data then you will need to order your Data Source by dates in ascending order.

If the chart should represent a _summary _of some data source then that should also be calibrated here. Once a data source has been selected then a :Group by...function can be added to control how the data will be summarized. As per the example below, both a Grouping and an Aggregation should be added - the Grouping will be used as Label data, and the Aggregation will create the values.

There are a wide variety of options possible with this Bubble functionality - consult the Bubble Reference guide and Forum for more information.

Label Field

Specify here the Field within the selected Thing that contains the information that should run along the X-Axis. For instance, if a time-based chart is being created, this would be the date field.

+ Label's nested Thing

In some cases, the Field containing the label data will be held within a linked object. For instance, a Transaction object/Thing might link to a Company object/Thing which contains a Company Name field. If this is the case, a 'Nested' Thing should be selected - in this example, that would be the Company Thing.

+ Nested Label Field

If a + Label's nested Thing has been selected, then this secondary option will become available. Here, the specific Field containing the Label data should be selected.

Note: It is not possible to use a Field that is contained within a Thing that is more than one step removed from the main chart Thing.

Name for Labels

A generic name for the Series labels should be added here. This will be used in chart labelling and tooltips.

Value Field

Specify here the Field within the selected Thing that contains the values that should be plotted on the chart.

+ Value's nested Thing

In some cases, the Field containing the value data will be held within a linked object. Here, that linked Thing should be selected.

+ Nested Value Field

If a nested Thing has been selected, then a Field within that object containing the value data should be identified here.

Name for Values

A generic name for the Series values should be added here. This will be used in chart labelling and tooltips.

Other Label Data

If a Custom State or API source is being used to plot your chart, number will already have been selected from Thing to Plot, and a source of Values will have been connected to Data Source. Other Label Data will only be read during this use case, and should be used to fetch Label data that will correspond to the Values data.

So, a source of Label data (text) should be connected here from any data source. Both the number of items and the order of the results should correspond to the Values data returned within the Data Sourcefield.

Fill Color A & B

Charts can be colored in a number of ways:

• _Solid / transparent color: _By _only _selecting aFill Color A, the chart will be rendered _only _in that color and at that transparency level. To achieve this, Fill Color B should be left blank.
• Gradient: _By selecting _both Fill Color A and Fill Color B, a gradient will be applied to the fill area of the chart. This gradient will include transparency properties, and so a gradient can simply be an adjustment of transparency levels between Fill Color A and Fill Color B for a subtle effect.

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.

Property Editor - SERIES 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.

Overview of Series 2

Series 2 setup operates in the same way as Series 1 although different data source options are available:

• Use Series 1 as data source: Makes available the same Fields that were setup for Series 1. Depending on whether Grouping is in place on Series 1, these Fields will either be the standard Fields of Series 1's Thing, or the Grouping and Aggregation fields defined within the :Group by... function.
• Use new data source: It is also possible to introduce a new data source to the chart for Series 2, although it is important to clearly understand the desired outcome first. The type of Label data used across Series 1 and Series 2 should be consistent, although the data itself can be different. In particular, if dates are being used in Series 1, then dates should also be used in Series 2. If label values appear in _both _Series 1 and Series 2, Chart Tools will consolidate the data into one, duplicate free, data set - shown below. Where data does not exist against a resultant label, the value null will be added to the data set. So, in the example below, Series 1 would have no values against 'Public Sector' - in this case, null would be added at the correct location to the data set.

Property Editor - CHART STYLING

Line tension

_Line charts only: _Controls the curve radius between data points when rendering a line chart. 0 will result in pointed, straight lines. Use numbers between 0 - 1 to introduce curve into the line.

Column width

Bar charts only: Controls the width of columns rendered on a bar chart. If left blank, a responsive column width will be used. When building some time based bar charts the column width will need adjusting in order for the bars to appear visible.

Show all labels

This option will over-ride the dynamic showing / hiding of labels in response to the chart size which is on as default. When enabled, all labels will be shown irrespective of space constraints.

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.

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.

Property Editor - LAYOUT PROPERTIES

Display X-Axis

The X-Axis can be shown or hidden - this will toggle the X-Axis on / off.

Display Y-Axis

The Y-Axis can be shown or hidden - this will toggle the Y-Axis on / off.

Y-Axis 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.

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

Y-Axis (L) & (R) unit

Adds a unit before the value shown on the left / right - corresponding to (L) and (R) - Y-Axis. So, entering $, would see '500' become '$500'.

Events

None

Actions

None

States