Chart Making - Bar and Line Charts (Part 1)

Published on March 12, 2022

In this guide, you will learn how to create bar and line 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, you should be able to do something like this:

Then, with QuickChart API, you can generate something like this:

In the chart, English test and Math test are the categories, while Tim Beaver, Martha the Porsche and Daffy Duck are data labels, and that the values for each bar in a bar chart or point on a line graph represent a number value. For example, the blue bar of Tim Beaver represents 91, while the orange one represents 75.

Go back to the procedure blocks and compare them with this chart. As you can see, dataLabels is a list of all data labels, and chartType can be either bar or line. categoriesAndValues is a list with two sublists, because there are two categories. Each sublist starts with a category name, while the next three items are values of the character scoring the respecting test. In the first sublist, each character joined the English test. Tim scored 91 points, Martha scored 75, and Daffy scored 100. Note that if you have 4 characters, but you only provided the test results for 3 characters, your app might crash.

With that, let's see the procedure.

This large structure, with 100 blocks, is the procedure we are mainly highlighting in this guide. I have added annotaion numbers, from 1 to 21, to help you better understand it.

[1] We first start by defining the chart type, so that if chartType is bar, the prefix of the URL should be https://quickchart.io/chart?c={type:'bar',data:{labels:.

[2] We then create two local variables - list that is a copy of dataLabels, and string that is the converted version of the string. Note that we do not directly use the list separator block, because the documentation stated that its ', not ".

[3] We add the for each item block to run blocks for every data label in the data label list.

[4] If the data label is the first data label in the list, we start by joining [' and the data label and ' together. So if the first data label is Apples, the string should start with ['Apples'. If the first data label is also the last data label, we add a closing bracket ]. Else, we continue with a comma.

[5] If the data label is not the first and the last item in the list, we continue by joining the string variable with ' and the data label and '. So if the first data label is Apples and the second data label is Oranges and that there are 3 data labels, we should set it to ['Apples','Oranges', and continue to the third item.

[6] If the data label is the last item in the list, we end by joining ' and the data label and ']. If the first data label is Apples and the second data label is Oranges, and that there are only 2 data labels, we should set it to ['Apples','Oranges'] and data labels are done.

[7] To finish up data labels, we should return the finished string.

[8] Before we start with categories and values, we need to tell the system that we are going to do datasets. So join the text with , datasets:[.

[9] We create a local variable - string, to turn the list of categories and values to the pattern that the documentation states.

[10] We add a for each item in list block to run blocks for every sublist of category and data values.

[11] We create another local variable sample within the for each item in list loop. We start of setting the sample by using {label:'.

[12] We add the category name to the sample variable.

[13] We then continue with ',data:[.

[14] We create another local variable called "allNumbers". Then, we add a for each item in list block to run blocks for every value in each sublist.

[15] If the item is the first item in the list, we skip, because we are targeting the value, and the first item is the category name.

[16] If the number is the last item in the sublist, we append the number and closing symbols ]} to allNumbers. If the sublist is not the last item in the whole categoriesAndValues list, we add a comma to continue, else a blank string to stop.

[17] If the number is not the last item in the sublist, we continue by appending the number and a comma to allNumbers.

[18] We return allNumbers to the set sample block.

[19] To make parts 10 to 18 effective, we need to append sample to string.

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

[21] Finally, we close everything with ]}}. Phew!

📥 Download procedure (.AIA)

Step 2. Testing What We Have

You can test this out via Do It in the companion now.

This whole thing returns a generated image URL. According to the App Inventor Image documentation, you can set the image Picture to an image URL in the blocks, so you can try something like:

You can try these.