Charts Block – Showcase

Overview
Features
Entering Chart Data
Options
CSV Upload
How to
Technical Details

Overview

The Charts Block utilises the chart.js library to offer users the ability to create a variety of Charts within the block editor.

Github	https://github.com/bigbite/block-charts
Notion	https://www.notion.so/bigbite/Charts-Block-493f064ab9a14fe89d1a3f7b6c4e7bcf
Product Owner	Jonny Waters
Min. Version	5.8> (Not tested in prior versions)

Features

Offers multiple chart types
- Pie/Doughnut chart
- Line chart (horizontal and vertical)
- Bar chart (horizontal and vertical)
Enter multiple datasets (e.g. each line in a line chart is a dataset)
Simple data entry via text area or CSV upload
Instant previews when data is changed
Validation on uploaded files (no. of data items and numeric checks)

Entering Chart Data

NOTE: The amount of labels should always match the amount of data items in each dataset.

Data Format

Entering via input fields

Chart labels should be entered into the Chart labels input field as a comma-separated list:

label 1, label 2, label 3, label 4

Entering via CSV upload

CSV files should be in the following format:

Label 1, Label 2, Label 3,
Label 4
Dataset 1 Label, 10, 30, 20, 70
Dataset 2 Label, 30, 40, 90, 30

Where the first row is the labels for the data (if the first row is not labels, ensure the “First row is labels” checkbox is unchecked at the point of upload.

All subsequent rows will be the separate datasets (separated by line breaks).

the first item of a dataset should always be the dataset label.

Pie/Donut Chart

Pie and Doughnut charts only accept one dataset.

Labels:

WordPress,Shopify,Wix,Other

Dataset:

Average Users,65.1,6.5,2.9,25.5

Bar Chart

Labels:

Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec

Dataset:

Maximum Temperature,4.9,7,9.8,10.9,13.4,18.7,21.1,18.9,18.7,14,10,7.8
Minimum Temperature, -0.5,1.2,3,0.6,4.9,9.8,12.1,11.1,10.7,7.8,4,2.8

Bar Chart

Labels:

Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec

Dataset:

Maximum Temperature,4.9,7,9.8,10.9,13.4,18.7,21.1,18.9,18.7,14,10,7.8
Minimum Temperature, -0.5,1.2,3,0.6,4.9,9.8,12.1,11.1,10.7,7.8,4,2.8

Validation

CSV uploads are validated on the following criteria:

Number of data items in all dataset rows matches the number of labels entered.
All items of data are checked to ensure they are numeric values.

Options

Data

Chart Title
Select a chart type
Chart labels: A comma separated list of the labels (items of data) within the chart
Dataset:

CSV Upload

Select CSV File
First row is labels

Styling

Set colors for each label in the chart
Set a border color for each label in the chart

How to

How to: Include it in your project

The block is installed via a Plugin which you can include using Composer. To do so, ensure the following is included in your composer.json file:

{
  "repositories": [
    {
      "type": "vcs",
      "url": "git@github.com:bigbite/block-charts.git"
    }
  ],
  "require": {
    "bigbite/block-charts": {{RELEASE_NO}}
  },
  "extra": {
    "installer-paths": {
      "plugins/{$name}/": [
        "type:wordpress-plugin"
      ]
    }
  }
}

How to: Report a bug

To report a Bug:

Visit https://github.com/bigbite/block-charts/issues
Add a screenshot/video of the issue you are experiencing
Add a description of the issue you are experiencing
Add the label bug

How to: Suggest a feature

To suggest a feature, either:

Contact the Product Owner

Visit https://github.com/bigbite/block-charts/issues
Create a new Issue
Write your suggestion in as much as detail as possible – preferably detailing the problem you are trying to solve.
Add the label enhancement

Technical Details

There are currently no hooks or filters provided by this block.