How to create charts using the quickchart API

This tutorial covers how to create various types of charts using the quickchart api in Sketchware.

Quickchart

QuickChart is an API for generating static bar charts, pie charts, line charts and more. It's free to use but has a limit of 1 chart per second on the public service. 

You can use the quickchart API to display charts in your Sketchware app and I will show you how.

We will start by building our layout then adding our logic. I will also show you how to make variations to the logic.

Let's get started

Building the layout

Let's start by adding an image to our layout. I set my linear width and height to match parent.

Setting up the logic

I will place my logic onStart but depending on your needs, you can place it on another event such as onButtonClick.

So I navigate to my onCreate event and use the following block to set the image from a url

Pie Chart

Inside the set image from url block, add the following code.

https://quickchart.io/chart?c={type:'pie',data:{labels:['Sales','Purchases','Gross Profit','Expenses','Net Profit'], datasets:[{data:[50,60,70,180,190]}]}}

To understand the code above note the corresponding color coded explanation below.

• 'pie' is the type of chart

• 'labels' are the names of our values. In the above example we have Sales, Purchases, Gross Profit, Expenses and Net Profit.

• 'data' is the numeric values that we want to display in chart format.

Alternative logic

If you want your users to enter their own data, you can replace the labels and data fields in your logic with edittext blocks. Use the method shown below:

I used the join blocks shown below. 

Remember not to leave any blank space since this is a url.

Once we have set up our logic we can now run our app. It will display a pie chart as shown below:

Bar chart

We can create a bar chart by simply altering our code above and changing the type to 'bar' chart as highlighted below:

https://quickchart.io/chart?c={type:'bar',data:{labels:['Sales','Purchases','Gross Profit','Expenses','Net Profit'], datasets:[{data:[50,60,70,180,190]}]}}

This code will create a bar chart like the one below:

Line chart

We can create a line chart by simply altering our code above and changing the type to 'line' chart as highlighted below:

https://quickchart.io/chart?c={type:'line',data:{labels:['Sales','Purchases','Gross Profit','Expenses','Net Profit'], datasets:[{data:[50,60,70,180,190]}]}}

This code will create a line chart like the one below:

Conclusion

Using the Quickchart API you can create and display charts in your app. This is particularly useful for displaying reports and any other data in visual format. You can easily adapt the logic to suit your own specific needs.