Displaying multiple iOS charts with UICollectionView in Swift

Written by Matthew Webber

This post describes how to add shinobicharts to a UICollectionView in iOS using Swift.

As you work through the tutorial feel free to take a look at our sample project by browsing the code on GitHub. You’ll need a copy of shinobicharts to follow the tutorial – if you don’t have one then download the trial edition here.

We’re aiming to build an app like this below that shows multiple iOS charts for weather conditions in various cities. We’ve kept the styling and superficial changes to a minimum to focus on the real detail of coordinating the large number of charts.

Screen Shot 2015-12-22 at 14.48.14


Getting Started

To begin open up Xcode and click to create a new project. From there select ‘Single View Application’ and ensure the language is set as Swift and Devices set as Universal.

Screen Shot 2015-12-22 at 15.15.29

Give the project a name, click next and then create.

To truly get yourself a blank project you will need to go ahead and delete the ViewController that is created by default. You can do this by going into the Main.storyboard file and deleting it along with the accompanying class file (ViewController.swift).

From here you’ll want to back into the storyboard and then drag a Collection View Controller onto the stage.

Screen Shot 2015-12-23 at 13.38.45

Next navigate to Editor > Embed In and choose Navigation Controller. Your stage should now look something like this:

Screen Shot 2015-12-23 at 13.39.55Note: Ensure the Navigation Controller has ‘Initial View Controller’ checked in the attributes.

Next go into the attributes of the navigation menu and set the title of the navigation menu to ‘2015 City Temperatures (°C)’ and then set the background colour of the collection view to dark grey.

Importing Frameworks and Classes

Once you have got a basic stage setup, you will need to import the Frameworks required for the application to run.

  • ShinobiCharts.framework
  • Security.framework
  • QuartzCore.framework
  • CoreGraphics.framework
  • OpenGLES.framework
  • CoreText.framework
  • UIKit.framework
  • libc++.tbd

Note: Don’t forget to update your  Objective-C Bridging Header settings to point at the ‘ShinobiChart-Bridging-Header.h’ file that can be found in the Shinobi Charts framework package.

Now it’s time to add the required classes in, you can grab these from the GitHub page linked at the top of this tutorial. You’ll need the following classes:

  • ChartCell.swift – ChartCell configures the setup of the chart itself
  • ChartCollectionViewController.swift – This manages the Collection View
  • ChartDatasource.swift – The datasource that powers the chart
  • DataGenerator.swift – Simply for holding the demonstration data displayed by the charts

If you are using the trial edition of shinobicharts you will need to add the license key into viewDidLoad within ChartCollectionViewController:

ShinobiCharts.setLicenseKey("YOUR KEY");

Managing the Collection View

Once you have everything imported into your project, you’ll need to configure them in the storyboard.

  1. Click on the Collection View Controller and set the Custom Class option to ‘ChartCollectionViewController’.
  2. Set the Collection View cell size to 350×200.
  3. In the Collection View Cell set the background colour to white, set the Custom Class to ‘ChartCell’ and finally set the reuse identifier to ‘ChartCell’ too.

You will now need to drag an ordinary UIView into the Collection View Cell, set the constraints on this to fill the cell, and set the Custom Class to ‘ShinobiChart’.

In the Connections Inspector (with the view you just added selected), click and drag New Referencing Outlet to the Collection View Cell and then select ‘chart’. This will link your new view to the chart itself.

Your storyboard should now look something like this.

Screen Shot 2015-12-23 at 16.27.57

You are now ready to build and run your application and it should look like the screenshot at the start of the post!


Well done for getting this far!

We have now managed to create a Collection View that adds a shinobicharts iOS chart into a replicable cell which, in this instance, is used for displaying temperatures in multiple cities. This can be a great way to give your users a brief overview of a lot of data. Why not add a touch event to each cell and allow them to drill down into even more detail about their chosen city?

I hope you enjoyed the tutorial – Matt