DEV Community: Subhronil Saha

A practical guide to creating ring charts in Swift using the CPRingChart library

Subhronil Saha — Sat, 21 Aug 2021 15:29:47 +0000

CPRingChart is a customisable Swift library for creating ring hollow pie-charts quickly and with just a few lines of code. You can add it to your Swift project using Cocoapods.

The most widely used library for making these kind of charts, in my opinion, is probably the amazing 'Charts' library by Daniel Gindi (https://github.com/danielgindi/Charts). But unfortunately it does not provide the option to add rounded caps to your slices. Hence this library aims to solve that problem.

In this example, we will go through an example project for demonstrating the functionality of this library.

We will be using UIKit with Storyboards but you can also use it without Storyboards if you want.

So let's quickly setup the project.

Open Xcode and create a new App.

I have named this project 'CPRingChartExample', but you can name your project anything you want. Select 'Storyboard' as the app's Interface, and select 'UIKit App Delegate' as the app's lifecycle. We will not be needing Core Data, so I will leave the checkbox next to 'Use Core Data' unchecked.

Save the project where you can find it easily on your system. I have saved this project on my Desktop.

Cocoapods installation

Now that your project is created, close the Xcode project and open the Terminal window.
We will be using Cocoapods to install this library, so make sure you have Cocoapods installed on your system. If you don;t have Cocoapods installed on your system, just use this command to install Cocoapods.

$ sudo gem install cocoapods

If you would prefer to use other installation methods, then you can refer the Cocoapods documentation: https://guides.cocoapods.org/using/getting-started.html

Next, in your Terminal window, navigate to your Xcode project folder's location using cd command. I will be navigating using

$ cd Desktop/CPRingChartExample

Now, initialise Cocoapods in your project using

$ pod init

Open your Podfile & add the following line to it.

pod 'CPRingChart'

Open Terminal, navigate to your project folder and run

$ pod install

Importing the Library & Usage

Now that we have CPRingChart added to our project, let's see how we can use it.

Open the .xcworkspace file created in your Xcode project folder. Open ViewController.swift

Replace all the existing code with the following in your ViewController.swift file

//
//  ViewController.swift
//  CPRingChartExample
//
//  Created by Subhronil Saha on 21/08/21.
//

import UIKit
import CPRingChart

class ViewController: UIViewController {

    @IBOutlet weak var ringChart: CPRingChart!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Ring chart setup here
        ringChart.sections = 5
        ringChart.values = [4, 5, 1, 2, 6]
        ringChart.fillColors = [.lightGray, .systemTeal, .systemOrange, .systemPurple, .systemPink]
        ringChart.reloadChart()

    }

}

I will be explaining this code below in Code Explanation section.

Open Main.storyboard and drop a UIView into the View Controller. Change its class to CPRingChart. Also link it to the outlet ringChart created earlier in ViewController.swift.

Run the Project. You should see this as the output.

Code Explanation

CPRingChart has a few mandatory properties that need to be set always. These are
- sections - The number of sections/slices in the chart.
- values - A Double array containing the values for each section.
  - The length of values should be always equal to sections.
- fillColors - An UIColor array that specifies the color for each section.
  - The length of fillColors should always be equal to sections.
Other optional properties include the following:
- spacing - The spacing between the sections.
  - Takes a Double value between 0 - 1.
  - Applies percentage relative spacing.
  - Default value is 0.05 (ie 5%).
- ringWidth - The width of the rings.
  - Default value is 10.
- roundedCap - Boolean denoting if the ends are rounded or not.
  - Default value is true.
- centerFillColor - UIColor value representing the center fill color of the inner circle of the chart.
  - Default value is UIColor.clear.
Once you are done making the changes you need to always call the method reloadChart().

So that's it, you just created a ring chart in <10 lines of code! 😎 If you have any comments or suggestions regarding improvements in the library or other additional functionality, you can drop a comment here or email me at subhronilsaha99@gmail.com.

You can find the source code used in this article here:
https://github.com/subhronilsaha/CPRingChartExample

Thanks for reading.

A Beginner's Guide to Swift Playgroundbooks

Subhronil Saha — Wed, 21 Apr 2021 13:53:20 +0000

For the past few years now, Apple has been conducting the WWDC Scholarship Program (now, WWDC Swift Student Challenge), which is a global challenge for students all across the globe, to showcase their love for coding by creating awesome projects related to any topic of their choice.

Until a couple years ago, the winners of this challenge would receive free tickets for the annual event and get to fly to California to attend the Worldwide Developer Conference in person at San Jose Convention Center! 🤩

However since 2020, due to Covid, Apple has made the whole event online and the winners would receive exclusive WWDC outerwear, a customized pin set and one year of membership in the Apple Developer Program.

Many students still participate in this challenge every year, and this year I decided to give it a try myself!

This year the challenge was to build an interactive Swift Playground Book that can be experienced in less than 3 minutes.

So, the first question that came to my mind was ...

How do I build a Swift Playground Book?

You can build PlaygroundBooks in the Swift Playgrounds app (available for iPad and Mac) and also in Xcode.

Swift Playgrounds App

First, go to the App Store, and look up Swift Playgrounds. The first result is usually the Swift Playgrounds app.

Download the app and open it.

It should look something like this.

It shows a list of your previously imported books. I already had my playground book imported, but for you, this screen may be blank.

If you click on the 'See All' button at the bottom right, it should show you a page with a lot of templates that you can use to build your project on.

For this tutorial, we will use the Xcode Playground template.

Click on it from the list of templates under the Starting Points section.

It will add the Xcode Playground template to your list of imported books.

Click to open it.

This is how a your playground book will look like.

You will only see a blank editor for now.

The typical structure of a PlaygroundBook is as follows.

The PlaygroundBook is divided into Chapters, each of which contains some Pages.

If you look at your screen now, on your left, you will see a list of Pages, grouped into Chapters.

Each playground page is divided into 2 halves.

On the left side, you can add text and code that you want to execute.

The code you type on the left will run on the right side of the page. The right side of the page is called the Live View.

Initially, there is no Live View.

To initialize it, type the following code into the editor. We will be using SwiftUI for building this Playground.

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        Text("Hello World")
    }
}

PlaygroundPage.current.setLiveView(ContentView())

Hit the Run My Code button.

Your screen should look something like this now.

Essentially, what we did just now is that we made a SwiftUI view named ContentView, and then we set it as the live view of our current playground page.

And as you can see, our SwiftUI view (with the text "Hello World") is being displayed on the right of the page! Awesome. 😀

If you know SwiftUI then you will be able to build awesome stuff from here on out. You can also try out the other templates provided in Swift Playgrounds and play around & build something awesome.

If you want to customize your playground book even more, like add a book cover, you should go probably use a Swift PlaygroundBook Author template and modify it using Xcode.

I will be writing an article about Swift PlaygroundBook Author Template in my next post, so if you want to know more about it, do check it out.

Thanks for reading!