How to create a Combined Bar and Line chart using ios-charts

This tutorial is part of a series on iso-charts, if you haven't looked over the introduction I'd advise doing so before continuing. In this tutorial, we'll be making a combined chart using iOS-charts.

We’ll begin by creating a new single view application, we’ll name it and click create.

Go to the main.storyboard and search for “View” in the Object Library and you’ll see it near the bottom of the list. Drag the view out onto your view controller, position it however you like and add some basic constraints.

In the identity inspector, set the class for your new View to “CombinedChartView”, if you aren’t seeing an option for such a class please make sure you’ve followed the installation steps listed here.

If everything has gone well your main.storyboard should look like this:



Setting up our CombinedChartView object

Click on your Assistant Editor to reveal your ViewController.swift code. We’ll need to add an import statement and adopt a protocol before we can begin wiring up our Line Chart. Modify your class signature to look like this:

import Charts

class ViewController: UIViewController, ChartViewDelegate { //...

Now we can control drag from our View to our ViewController class and create an outlet named chartView with a type of CombinedChartView.

@IBOutlet weak var chartView: CombinedChartView!

We can now start setting the properties of our chartView object. For simplicity, we'll just set our chart properties in our  viewDidLoad, add the following lines of code:

override func viewDidLoad() {
    // 1    
    chartView.delegate = self
    // 2
    chartView.descriptionText = "Tap node for details" 
    // 3
    chartView.noDataTextDescription = "You need to provide data for the chart." 
    // 4
    chartView.drawBarShadowEnabled = false 
    // 5
    chartView.leftAxis.startAtZeroEnabled = false 

I should point out that not all of these options are necessary, I've just included them to expose you to more options.

  1. We set the ChartViewDelegate to our ViewController.
  2. We change the descriptionText that will appear at the bottom of our chart.
  3. Here, we are setting the "no data" description for when our chart's data source is empty.
  4. We're removing the bar shadow for a cleaner look.
  5. Disable "starting at zero" so that our charts start near the lowest data point.

Setting Data

In this dataset, we'll just utilize some random numbers. At the top of your ViewController add the following properties. 

var dataSet1 : [Double] = [123, 154, 132, 119, 134, 122, 126, 156, 143, 157, 163, 212] 
    var dataSet2 : [Double] = [132, 119, 139, 122, 126, 135, 145, 116, 123, 140, 135, 132] 
    var dataSet3 : [Double] = [112, 99, 102, 92, 96, 115, 105, 102, 99, 110, 115, 108] 
    let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] 

Then, add the following after the last line of code in your viewDidLoad:

// 6 
    let data: CombinedChartData = CombinedChartData(xVals: months) 
    data.lineData = self.setLineData()
    data.barData = self.setBarData()
    // 7 = data 
    // 8
    chartView.animate(xAxisDuration: 0.2, yAxisDuration: 1.0, easingOptionX: .EaseInExpo, easingOptionY: .EaseInExpo)
  1. Here we set up our CombinedChartData adding both lineData and bar Data.
  2. Add our data to the chartView.
  3. animate our chart.

Next, we'll define our two function  we used to set our lineData and our barData:

func setLineData() { }
func setBarData() { }

For this part of the tutorial, we'll set each chart up with two sets of data, which will create a single red line across our graph. I won't go into detail here because as you read through you'll get a good idea of what the properties mean.    

func setLineData(months : [String]) {
        var xVals: [ChartDataEntry] = [ChartDataEntry]()
        for i in 0 ..< months.count {
            xVals.append(ChartDataEntry(value: dataSet1[i], xIndex: i))
        // 1 ////////////////
        var yVals: [ChartDataEntry] = [ChartDataEntry]()
        for i in 0 ..< months.count {
            yVals.append(ChartDataEntry(value: dataSet1[i], xIndex: i))
        let set1: LineChartDataSet = LineChartDataSet(yVals: yVals, label: "Line set 1")
        set1.axisDependency = .Left
        set1.lineWidth = 2.0
        set1.circleRadius = 6.0
        set1.fillAlpha = 65 / 255.0
        set1.fillColor = UIColor.redColor()
        set1.highlightColor = UIColor.whiteColor()
        set1.drawCircleHoleEnabled = true
        // 2 ////////////////
        var yVals2: [ChartDataEntry] = [ChartDataEntry]()
        for i in 0 ..< months.count { 
            let dataEntry: ChartDataEntry = ChartDataEntry(value: dataSet2[i] + 100, xIndex: i)
        let set2: LineChartDataSet = LineChartDataSet(yVals: yVals2, label: "Line set 2")
        set2.axisDependency = .Left
        set2.lineWidth = 2.0
        set2.circleRadius = 6.0
        set2.fillAlpha = 65 / 255.0
        set2.fillColor = UIColor.greenColor()
        set2.highlightColor = UIColor.whiteColor()
        set2.drawCircleHoleEnabled = true
        // data sets
        var dataSets: [LineChartDataSet] = [LineChartDataSet]()
        let data: LineChartData = LineChartData(xVals: months, dataSets: dataSets)
        return data            

Then we'll do the same for our barCharData function:

func setBarData() -> BarChartData {
        let d: BarChartData = BarChartData()
        var entries1: [ChartDataEntry] = [ChartDataEntry]()
        for index in 0 ..< months.count {
            entries1.append(BarChartDataEntry(value: Double(Int.random(25...45)) * 100, xIndex: index))
        let set1: BarChartDataSet = BarChartDataSet(yVals: entries1, label: "Bar Data")
        set1.valueTextColor = UIColor.redColor()
        set1.valueFont = UIFont.systemFontOfSize(10)
        set1.axisDependency = .Right
        var entries2: [ChartDataEntry] = [ChartDataEntry]()
        for index in 0 ..< months.count {
            entries2.append(BarChartDataEntry(value: Double(Int.random(25...45)) * 100, xIndex: index))
        let set2: BarChartDataSet = BarChartDataSet(yVals: entries2, label: "Bar Data")
        set2.valueTextColor = UIColor.redColor()
        set2.valueFont = UIFont.systemFontOfSize(10)
        set2.axisDependency = .Right
        // data sets
        var dataSets: [BarChartDataSet] = [BarChartDataSet]()
        let data: BarChartData = BarChartData(xVals: months, dataSets: dataSets)

        return data

Build and run

Build and run and you should see your combinedChart in action!


In Tags