In this article I am going to be covering the charts packaged with the ResearchKit library using Swift.

Out of the box ResearchKit provides pie charts (ORKPieChartView), line graphs (ORKLineGraphView) and discrete graphs (ORKDiscreteGraphView).

The source code and demo is available in the ResearchKit library. – https://github.com/ResearchKit/ResearchKit/tree/master/samples/ORKCatalog

Providing Data with dataSource

let pieChartView = ORKPieChartView()
pieChartView.dataSource = DemoPieGraphDataSource()

All charts get their data using the dataSource property. Each chart has a specific dataSource that must be implemented. The line and discrete graphs use the (ORKGraphChartViewDataSource) and the pie chart uses the (ORKPieChartViewDataSource).

ORKPieChartViewDataSource

class DemoPieGraphDataSource: NSObject, ORKPieChartViewDataSource {

    let data = [30, 14,52, 45, 66]

    func numberOfSegmentsInPieChartView(pieChartView: ORKPieChartView) -> Int {
        return self.data.count
    }

    func pieChartView(pieChartView: ORKPieChartView, valueForSegmentAtIndex index: Int) -> CGFloat {
        return self.data[index]
    }

    func pieChartView(pieChartView: ORKPieChartView, titleForSegmentAtIndex index: Int) -> String {
        return "\(index)"
    }
}

ORKGraphChartViewDataSource

class LineGraphDataSource: NSObject, ORKGraphChartViewDataSource {
    let data = [
        ORKRangedPoint(value: 1.5),
        ORKRangedPoint(value: 21.5),
        ORKRangedPoint(value: 51.5),
        ORKRangedPoint(value: 71.5),
        ORKRangedPoint(value: 61.5),
        ORKRangedPoint(value: 91.5),
        ORKRangedPoint(value: 171.5),
        ORKRangedPoint(value: 161.5),
        ORKRangedPoint(value: 291.5),
        ORKRangedPoint(value: 471.5),
        ORKRangedPoint(value: 361.5),
        ORKRangedPoint(value: 591.5),
    ]

    func numberOfPlotsIngraphChartView(graphChartView: ORKGraphChartView) -> Int {
        return 1
    }
    
    func graphChartView(graphChartView: ORKGraphChartView, pointForPointIndex pointIndex: Int, plotIndex: Int) -> ORKRangedPoint {
        return data[pointIndex]
    }

    func graphChartView(graphChartView: ORKGraphChartView, numberOfPointsForPlotIndex plotIndex: Int) -> Int {
        return data.count
    }

    func graphChartView(graphChartView: ORKGraphChartView, titleForXAxisAtIndex pointIndex: Int) -> String {
        return "\(pointIndex + 1)"
    }
}

ORKPieChartView Customizations

The pie chart can have titles, colors and size customizations added.

Customize the color and labels in the pie chart using the ORKPieChartViewDataSource methods below.

class DemoPieGraphDataSource: NSObject, ORKPieChartViewDataSource {
    let colors = [
        UIColor(red: 26/225, green: 145/255, blue: 217/225, alpha: 1),
        UIColor(red: 142/255, green: 26/255, blue: 217/255, alpha: 1),
        UIColor(red: 244/255, green: 190/255, blue: 217/255, alpha: 1)
    ]
    func pieChartView(pieChartView: ORKPieChartView, colorForSegmentAtIndex index: Int) -> UIColor {

        return colors[index]

    }
    func pieChartView(pieChartView: ORKPieChartView, titleForSegmentAtIndex index: Int) -> String {
        return "Day \(index + 1)"
    }
}

Customize the size, titles and animation using the ORKPieChartView object.

pieChartView = ORKPieChartView()
pieChartView.title = "Steps"
pieChartView.text = "Per Day"
pieChartView.lineWidth = 21
pieChartView.animateWithDuration(0.75)

ORKLineGraphChartView & ORKDiscreteGraphChartView

The ORKLineGraphChartView and ORKDiscreteGraphChartView both extend from the ORKGraphChartView and provide customizations through its view.

lineGraphCartView = ORKLineGraphChartView()
lineGraphChartView.tintColor = UIColor(red: 65/255, green: 30/255, blue: 15/255, alpha: 1)
lineGraphChartView.showsHorizontalReferenceLines = false
lineGraphChartView.showsVerticalReferenceLines = false

// Same customization for the ORKDiscreteGraphChartView

discreteGraphCartView = ORKDiscreteGraphChartView()
discreteGraphChartView.tintColor = UIColor(red: 65/255, green: 30/255, blue: 15/255, alpha: 1)
discreteGraphChartView.showsHorizontalReferenceLines = false
discreteGraphChartView.showsVerticalReferenceLines = false

ORKChartGraphView also allows for graph gesture delegation using (ORKGraphChartViewDelegate), axis and scrubber customization and supports adding images to X,Y min values in the graph.

Summary

The charts available are limited but the graphs look nice, work well from the demo and the library is actually built as a standalone package.

If you need a simple graph for your ResearchKit project these are a good option.