chart.js :: Bar/line chart

• 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

Format data as dates

Note: this feature is still in beta mode with the charts.js elements

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:

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

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.

Property Editor - CHART STYLING

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.

Display Y-Axis

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

Display X-Axis

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

Property Editor - LAYOUT PROPERTIES

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.

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.

Events

None

Actions

None