ResearchKit Charts

by Nickolas Whiting

Bake your own Mobile Research App. No coding. No upfront cost.

Register Now

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

Screen Shot 2016-06-14 at 8.51.10 PMScreen Shot 2016-06-14 at 8.51.22 PMScreen Shot 2016-06-14 at 8.51.32 PM

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.

Screen Shot 2016-06-15 at 10.36.55 AM

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

Screen Shot 2016-06-15 at 11.26.35 AMScreen Shot 2016-06-15 at 11.26.41 AM

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.

Tap the Power of Smartphones for your Research

Register Now

Leave a Reply

Your email address will not be published. Required fields are marked *

Mobile Research Apps

We have deep expertise in design and development of mobile research apps that work on both iOS and Android securely.

Contact us now

Popular Posts