Dynamic Chart

Display charts with data from ACF, Metabox, etc through Brick’s Query loop feature. Supports multiple datasets, linear/logarithmic scales & easily customized and styled to match your site.

Building Interactive Charts in Bricks with Dynamic Data
Heads up - when clicked, this video is loaded from YouTube servers.

Intro

This element will be most useful for displaying relatively standard charts where the x-axis has text labels, and the y-axis value has numbers. The chart can either be used to display one data set, ie one line or one set of bars with different values, or multiple datasets, where dynamic data will be needed to fetch the values for each set.

For dynamic data, ideally, you’d be using an ACF repeater field, or similar, where you’d be looping through rows, with each row having new values from sub fields being plotted for each dataset.

Use Query Loop

There are now two query loop types –

  • Datasets (original)
  • Datapoints (new)

Datasets – If you’re wishing to use dynamic data to populate multiple datasets, set a query loop (for example an ACF repeater) to loop through rows for each set of data. This can then be added to the chart using Bricks’ built-in dynamic data options (this can be seen in the video above).

Datapoints – The datapoint type allows you to instead add new data points along the x-axis for each item inside the query loop. This ideal for showing data that is time based, which may need to be updated regularly and you want more dates across the x-axis added over time.

A common use for the ‘datapoints’ type would be showing company profits each quarter, where every new quarter you’ll be wanting to plot a new point on the existing chart. Each new item in the loop, whether it’s a new post or new repeater row, would plot a new data point on the chart.

Not using a Query Loop

If not using any dynamic data, you can just add the number/labels in manually in the settings to plot a chart.

Data

Here’s where to add the data points, add as many data points as you need and fill in the fields inside each one. The three fields are..

  • Label – this is the labels across the x-axis (Jan, Feb, Mar etc)
  • Value – the corresponding value to plot in the y-axis. (20%, 50%, 90%). if using dynamic data, this is where you’d insert the custom field to populate the number for each dataset.
  • Data point color – If you’re NOT using multiple data sets, you may wish to change the colour across each data point. (if using multiple data sets, the colours will be changed across each dataset instead, see the bottom of the docs for a visual guide).

Chart Style

At the time of writing, there are currently a few chart styles available..

  • Line charts
  • Bar charts
  • Pie / Doughnut charts

Line width/tension – the line style can be customised by changing the width, the colour and also the tension, which prevents the line from being straight and allows more of a curve.

AXES

Both the x-axis and y-axis can be customised, in terms of changing the grid colours, border colours and adding labels to the axis.

The y-axis has some extra settings relating to the data..

Y-axis type – Choose between linear (default) or logarithmic scale for the y-axis.

Begin at zero – By default the y-axis begins at zero, this may not be ideal depending on what data you’re showing and can be disabled.

Suggested min – Set a min value for the y-axis (only a suggestion, if there’s data lower than this number then it will adapt)

Suggested max – Set a max value for the y-axis (only a suggestion, if there’s data higher than this number then it will adapt)

Legends

If showing multiple datasets, legends can be added to the chart to show what each line/bar is referring to. The colours will automatically match the dataset colour. These can be positioned and aligned on any side of the chart.

Dataset Colours

When needing to add a different colour to each dataset, there are two options.

  • Using dynamic data – this is useful if you need the colour to be edited/added at the time that the data is added by custom fields. (ie the content editor has control)
  • Manually – this is useful if you instead which to create a colour palette for the chart to use, not connected to the datasets. This option means you can use your colour palette from inside Bricks rather than fetching the data.

A visual example to demonstrate the difference in applying colors either per data point or per dataset..

Using one dataset, it’s useful to change the colour per data point. For eg having a different colour for each month.

Using multiple datasets, it’s no longer useful to change the colour per data point. Instead, we change the colour per dataset. Here we have a different colour for each company, so the datasets can easily be compared visually. The legends use the dataset colours and can be used to filter the chart by clicking the legends.

This content is restricted to BricksExtras users. Login if you already have an account.