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]}]}}
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.
Comments