{"id":125,"date":"2020-04-13T00:57:24","date_gmt":"2020-04-12T22:57:24","guid":{"rendered":"https:\/\/mic.st\/blog\/?p=125"},"modified":"2023-05-15T21:36:06","modified_gmt":"2023-05-15T19:36:06","slug":"draw-graphs-easily-with-carekits-ockcartesianchartview","status":"publish","type":"post","link":"https:\/\/mic.st\/blog\/draw-graphs-easily-with-carekits-ockcartesianchartview\/","title":{"rendered":"Draw graphs and charts in Swift easily with CareKit"},"content":{"rendered":"\n

Did you ever want to use Swift to draw simple graphs and charts in your iOS app without using some 3rd party library? Also you did not want to reinvent the wheel with CoreGraphics? I thought that was not possible until I found out about a really nice open source SDK owned by Apple that you can use for that.<\/p>\n\n\n\n

Here comes CareKit<\/strong>! https:\/\/developer.apple.com\/documentation\/carekit<\/a><\/p>\n\n\n\n

Are you looking for how to draw graphs in SwiftUI? Check my other blog post: https:\/\/mic.st\/blog\/draw-line-graphs-in-swiftui\/<\/a><\/p>\n\n\n\n

A (very) short introduction to CareKit<\/h2>\n\n\n\n

CareKit is an open source SDK by Apple that was intended for the use in health management apps. Of course, you do not have to develop a health management app to use it. You can use it for just anything \u2600\ufe0f! One cool thing about the SDK: The owners of the repository splitted it up into several packages so you if you just want to draw nice looking user interfaces with the SDK you do not need to import the whole thing \ud83d\udc4d.<\/p>\n\n\n\n

I played around with the graph drawing functionality recently which I want to present to you in this quick overview. I really like it because firstly it is looking nice and secondly it is really easy to use. The following image shows a line graph you can draw pretty quickly with some self explanatory methods.<\/p>\n\n\n\n

\"Line
Fancy stuff like this \ud83c\udf08<\/figcaption><\/figure>\n\n\n\n

You basically just throw in an array of points and the OCKGraphView<\/code> does all the heavy lifting for you. You can give your graphs colors (and gradients \ud83c\udf08!), animations and labels and you can change the type of graph (line, bar, scatterplot) with a keystroke. So what else do you want? This is great stuff \ud83e\udd73<\/p>\n\n\n\n

Get the dependencies<\/h2>\n\n\n\n

If you install XCode you cannot instantly use CareKit because it is not delivered with XCode. Thanks to Swift Package Manager you can easily add the git repository to add it to your project. <\/p>\n\n\n\n

The official git repo for CareKit is: https:\/\/github.com\/carekit-apple\/CareKit<\/code> To add it to your project via Swift PM, just click in your open project on File-> Swift Packages -> Add Package Dependency<\/em> and copy the link above inside the input field. <\/p>\n\n\n\n

The repository owners splitted up CareKit into several packages. So if you just want to use the graphs, you just need to import CareKitUI<\/code>.<\/p>\n\n\n\n

For drawing a graph you can use OCKCartesianChartView<\/code> that draws the graph on a card like element and gives you also a some views around the actual graph (e.g. a contentStackView<\/code>, labels and a header).<\/p>\n\n\n\n

Let’s draw some graphs in Swift!<\/h2>\n\n\n\n

Let’s draw two line graphs with random data and some colors:<\/p>\n\n\n

let<\/span> chart = OCKCartesianChartView<\/span>(type: .line)  \n\nprivate<\/span> func<\/span> setupChart<\/span>()<\/span><\/span> {\n    \/\/\/ First create an array of CGPoints that you will use to generate your data series.<\/span>\n    \/\/\/ We use the handy map method to generate some random points.<\/span>\n    let<\/span> dataPoints = Array<\/span>(0<\/span>...20<\/span>).map<\/span> { _<\/span> in<\/span> CGPoint<\/span>(x: CGFloat<\/span>.random(in<\/span>: 0<\/span>...20<\/span>),\n                                                      y: CGFloat<\/span>.random(in<\/span>: 1<\/span>...5<\/span>)) }\n\n    \/\/\/ Now you create an instance of `OCKDataSeries` from your array of points, give it a title and a color. The title is used for the label below the graph (just like in Microsoft Excel)<\/span>\n    var<\/span> data = OCKDataSeries<\/span>(dataPoints: dataPoints,\n                             title: \"Random stuff\"<\/span>,\n                             color: .green)\n\n    \/\/\/ You can create as many data series as you like \ud83c\udf08<\/span>\n    let<\/span> dataPoints2 = Array<\/span>(0<\/span>...20<\/span>).map<\/span> { _<\/span> in<\/span> CGPoint<\/span>(x: CGFloat<\/span>.random(in<\/span>: 0<\/span>...20<\/span>),\n                                                       y: CGFloat<\/span>.random(in<\/span>: 1<\/span>...5<\/span>)) }\n    var<\/span> data2 = OCKDataSeries<\/span>(dataPoints: dataPoints2,\n                              title: \"Other random stuff\"<\/span>,\n                              color: .red)\n\n    \/\/\/ Set the pen size for the data series...<\/span>\n    data.size = 2<\/span>\n    data2.size = 1<\/span>\n\n    \/\/\/ ... and gradients if you like. <\/span>\n    \/\/\/ Gradients and colors will be used for the graph as well as the color indicator of your label that shows the title of your data series.<\/span>\n    data.gradientStartColor = .blue\n    data.gradientEndColor = .red\n\n    \/\/\/ Finally you add the prepared data series to your graph view.<\/span>\n    chart.graphView.dataSeries = [data, data2]\n\n    \/\/\/ If you do not specify the minimum and maximum of your graph, `OCKCartesianGraphView` will take care of the right scaling.<\/span>\n    \/\/\/ This can be helpful if you do not know the range of your values but it makes it more difficult to animate the graphs.<\/span>\n    chart.graphView.yMinimum = 0<\/span>\n    chart.graphView.yMaximum = 6<\/span>\n    chart.graphView.xMinimum = 0<\/span>\n    chart.graphView.xMaximum = 10<\/span>\n\n    \/\/\/ You can also set an array of strings to set custom labels on the x-axis.<\/span>\n    \/\/\/ I am not sure if that works on the y-axis as well.<\/span>\n    chart.graphView.horizontalAxisMarkers = [\"123\"<\/span>, \"hello\"<\/span>]\n\n    \/\/\/ With theses properties you can set a title and a subtitle for your graph.<\/span>\n    chart.headerView.titleLabel.text = \"Hello\"<\/span>\n    chart.headerView.detailLabel.text = \"I am a graph\"<\/span>\n  }<\/code><\/span>Code language:<\/span> Swift<\/span> (<\/span>swift<\/span>)<\/span><\/small><\/pre>\n\n\n
The SDK animates your graphs automatically if you add new data to the OCKCartesianGraphView<\/code>. You do not even have to wrap your code into UIView.animate()<\/code> blocks. Let’s see an example:<\/p>\n\n\n\n
If you set chart.graphView.dataSeries = [data, data2]<\/code> on a OCKCartesianGraphView<\/code> that is already presented in your view hierarchy, everything gets animated automatically \ud83d\ude03<\/p>\n\n\n\n