Chart Making - Pie Charts (Part 2)

Published on March 13, 2022

🏷️ Tags: #tutorials-and-guides

In the last guide, we used QuickChart API to create bar and line charts. In this guide, you will learn how to pie charts with QuickChart API. QuickChart API is a web API provider that helps people generate charts. Since this is an API, this will, along with a lot of chart extensions, require active internet connection.

Step 1. Going Over The Concepts.

The result of the procedure is simple, some parts are like the last guide, you should be able to do something like this:

The output is something like this:

Note that the procedure structure and the parameters are different from the last guide.

In the chart, unlike bar or line charts, there are no categories - pie charts can only have one category. Tim Beaver, Martha the Porsche and Daffy Duck are data labels, and that the values for each slice in a pie chartrepresent a number value. For example, the blue bar of Tim Beaver represents 91, while the orange one for Martha the Porsche represents 75. Also, note that the values parameter do not have sublists, they are in one main list.

The procedure is 50% similar to the last guide, so I am only going to talk about the ones that are different.

[1] Since this can only be a pie chart, the chart type is set to pie.

[2] We create a local variable called string and set its initial value to {data:[. This variable is used to convert values to a list.

[3] We add a for each item block to run blocks for every value in the values list. For each item, we will append the value to the string variable.

[4] If the value is not the last value in the list, we also add add a comma at the end to continue, else we will close everything with ]}.

[5] We return the string to the main join block.

Step 2. Testing What We Have.

You can try something like these.