Chart Making - Bar and Line Charts (Part 1)

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!