Skip to main content

How to create charts using the quickchart API

Pie chart


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.

Add full screen imageview


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

set image from url block

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.

Pie chart logic in onCreate

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:


chart logic with edittexts

I used the join blocks shown below. 

Join block

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:

Pie chart in Sketchware


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:


Bar chart in Sketchware


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:


line chart in Sketchware


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

Sunny Hassan said…
How to change the color

Popular posts from this blog

Hip hop and RnB songs to apologize to your partner

Love is a beautiful thing, but it often goes wrong. This often leads to pain, suffering and sorrow.  Being imperfect beings, hearts tend to get broken all the time regardless how hard we may try to avoid it.  The heartbreak is often inadvertent but at times we find ourselves in the wrong. An oversight, a word unsaid or even a lapse in our judgement can cause our loved ones harm. This doesn't always have to be the end though. Oftentimes, relationships can be mended by simply uttering three simple words: "I AM SORRY". This article is a collection of some of my favourite 'I'm sorry' songs. I hope you'll enjoy these apology songs, but more importantly, I hope you will get a few quotables and some wisdom nuggets from them.  The best apology however, is to change behaviour (got that from a Jay Z interview) so as you apologize, please remember that it was your actions that hurt them. The best apology is one which involves you not repeating those same mistakes aga

How to easily create background notifications in Sketchware(original)

One of the keys to building a successful app is to find mechanisms that will keep your users engaged. You can do this by using background notifications. This tutorial will show you how to do that in Sketchware. We will cover: 1. How to create notifications in Sketchware 2. How to show these notifications even when the app is closed. We will start by creating a new project. If you do not know how to create a new project please check out this article here. Once we have created our project, let us create a more block to place our code. Navigate to the events menu and then to the moreblock section as shown in the image above. Create a moreBlock. I have created a moreblock with the name "BackgroundActivity" with a boolean variable named "run." See the image below for how to add the boolean variable. Place the following block in the moreBlock Background activity code: moveTaskToBack(_run); That will move our task to the background.  Please note, that at this point we have

Php date: How to get the first and last day of the week

In this tutorial, I'll show you how to get the first and last day of the week in php. By default, in PHP the week runs from Monday to Sunday. However we'll cover two methods to get the first and last day for both those who consider Sunday or Monday as their first day of the week. We will be using 2 functions to achieve this: date() strtotime() We will use a combination of these two functions and store the result in a variable.  How to get the first day of the week If you want to get Sunday, use this method: $firstday = date('l Y-m-d', strtotime("sunday -1 week")); echo $firstday; If you want to get the date for Monday, this current week, use this method: $monday = date('l Y-m-d', strtotime("monday -1 week ")); echo $monday; How to get the last day of the week The following code will give you Saturday as the last day of the current week. $lastday = date('l Y-m-d', strtotime("saturday 0 week")); echo $last