Charts

Manual for proper chart usage

Supported Charts

Currently we support five kinds of charts in your template

1. Bar chart - both horizontal and vertical with ability to stack y-axis

2. Line chart

3. Pie chart

4. Doughnut chart - uses pie chart menu with the ability to set the cutout percentage to create doughnut chart

5. Radar chart

Data structures

General structure

Generally, you would have JSON data that looks like this for your modification,

{
  "template": "bfba4ccf-7153-4ae4-9e2e-6c736eaffef5",
  "modifications": [
    {
      "name": "radar_chart_4",
      "labels": [
        "Speed",
        "Passing",
        "Dribbling",
        "Defense",
        "Attacking",
        "Heading"
      ],
      "datasets": [
        {
          "backgroundColor": "rgba(0, 112, 0, 0.5)",
          "data": [
            89,
            95,
            70,
            40,
            90,
            80
          ],
          "label": "Player #1"
        }
      ]
    }
  ]
}

Chart modification data consists of two main fields,

Field	Description
labels	List of labels for the data
datasets	List of dataset object

Dataset object

Dataset object consists of three fields,

Field	Description
data	List of numbers. The index of the number corresponds to the index of the labels
label	The label or title for the dataset
backgroundColor	Either a color formatted string or a list of color formatted strings

backgroundColor

The format depends on the type of chart.

Color formatted string,

• Bar chart

• Line chart

• Radar chart

List of color formatted strings,

• Pie chart

• Doughnut chart

Color must be formatted according to these formats,

• Hex - #FFFFFF

• RGBA - rgba(255, 255, 105, 0.8) which support alpha transparency

Pie and doughnut charts needs to take list of colors because each color represent each cut out, while the other type of charts only need a single color to represent the data.

Data validation

Our API will validate your modification and return a user friendly error message. However, it is useful to know what is considered as a valid chart modification because chart can be trickier than the rest of the template's objects.

Rules

1. labels must be unique

2. labels length must match the length of the data

3. Dataset's label must be unique

4. If backgroundColor requires list of colors, then the length must match the length of the labels

5. backgroundColor must have the right format i.e. either hex or RGBA value

Don't worry about the complexity. Our API will return proper error messages when any of the rules are not met.

Using Test API Console for guidance

Use our built-in Test API Console to know which modification are available

It is also a good idea to play around in our Test API Console page to get a feel about the correct modification. Only successful image generation will count towards your quota.

Using Data Editor

Template editor comes with an easy to use data editor in case you want to create a static chart (not modified through API) or to create a default chart which can be overridden through API.

Data editor user interface

Data editor comes in two modes,

• User friendly UI that validates the data as you type and will generate the proper JSON.

• JSON editor that allows you write the JSON yourself.

In both mode, data will always be validated so you don't have to worry about making mistake. The error will guide you on what to fix.

Overriding default chart

As mentioned, you can create a default chart with all the colors and styles using data editor.

When sending the image creation request, you can choose to override the data and use the colors set with by the data editor. To do this, send the request with the same dataset label that you want to override.

Sample JSON generated by data editor

{
  "labels": [
    "Passing",
    "Dribbling"
  ],
  "datasets": [
    {
      "label": "Player #1",
      "data": [
        95,
        70
      ],
      "backgroundColor": "rgba(0, 112, 0, 0.5)"
    }
  ]
}

You can send a modification request like so to override the data and use existing backgroundColor

Modification Request

{
  "template": "bfba4ccf-7153-4ae4-9e2e-6c736eaffef5",
  "modifications": [
    {
      "name": "radar_chart_4",
      "datasets": [
        {
          "data": [
            30,
            40,
          ],
          "label": "Player #1"
        }
      ]
    }
  ]
}

Response

{
  "labels": [
    "Passing",
    "Dribbling"
  ],
  "datasets": [
    {
      "label": "Player #1",
      "data": [
        30,
        40
      ],
      "backgroundColor": "rgba(0, 112, 0, 0.5)"
    }
  ]
}

It is important that you set the same dataset's label in the modification request so it knows which dataset to merge with.