Apple Health Frameworks

Part 3, Episode 14, Create OCKDataSeriesConfiguration

In this episode, I want to show you how to create different charts using CareKitUI and CareKitStore.

Navigate to OverviewViewController class from project navigator, you can see I prepared different functions for you to make different charts, but for this episode, you will only make the configuration for each chart.

let’s begin with Chart1, create muscle serices after // Create Muscle Series comment:

    let muscleSeries = OCKDataSeriesConfiguration(
      taskID: TaskModel.checkIn.rawValue,
      legendTitle: "Muscle Pain (1-10)",
      gradientStartColor: UIColor(red: 1, green: 0.462745098, blue: 0.368627451, alpha: 1),
      gradientEndColor: UIColor(red: 1, green: 0.462745098, blue: 0.368627451, alpha: 1),
      markerSize: 10,
      eventAggregator: .custom { events in
        events
          .first?
          .answer(kind: IdentifierModel.checkinMuscle.rawValue)
          ?? 0
      }
    )

Here, you create OCKDataSeriesConfiguration by putting the checkin task Id and different colors for the chart and then adding a custom event aggregator that searches the CheckIn results to find the muscle pain and uses it here in this configuration.

Do the same thing for the headache series as well right after // Create Headache Series comment:

let  headacheSeries = OCKDataSeriesConfiguration(
      taskID: TaskModel.checkIn.rawValue,
      legendTitle: "Headache (1-10)",
      gradientStartColor: UIColor(red: 0.4745098054, green: 0.8392156959, blue: 0.9764705896, alpha: 1),
      gradientEndColor: UIColor(red: 0.4745098054, green: 0.8392156959, blue: 0.9764705896, alpha: 1),
      markerSize: 10,
      eventAggregator: .custom { events in
        events
          .first?
          .answer(kind: IdentifierModel.checkinHeadache.rawValue)
          ?? 0
      }
    )

You did the same thing but with different colors and identifiers to show the headache values. Tada, you just prepared two different configurations for Chart 1; let’s prepare more configurations. In chart 2 you want to show only tiredness, so create the tiredness series right after the comment:

    let tirednessSeries = OCKDataSeriesConfiguration(
      taskID: TaskModel.checkIn.rawValue,
      legendTitle: "Tiredness (0-10)",
      gradientStartColor: UIColor(red: 0.2745098174, green: 0.4862745106, blue: 0.1411764771, alpha: 1),
      gradientEndColor: UIColor(red: 0.2745098174, green: 0.4862745106, blue: 0.1411764771, alpha: 1),
      markerSize: 10,
      eventAggregator: .custom { events in
        events
          .first?
          .answer(kind: IdentifierModel.checkinTiredness.rawValue)
          ?? 0
      }
    )

Same procedure for this as well; you added the task id and then found the tiredness answer there and passed it as a configuration.

Let’s make two more configurations and then finish this episode. For Chart 3 we want to show Fever series which has the Temperature as the value:

    let feverSeries = OCKDataSeriesConfiguration(
      taskID: TaskModel.checkIn.rawValue,
      legendTitle: "Temprature (35°C-42°C)",
      gradientStartColor: UIColor(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1),
      gradientEndColor: UIColor(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1),
      markerSize: 2,
      eventAggregator: .custom { events in
        events
          .first?
          .answer(kind: IdentifierModel.checkinFever.rawValue)
          ?? 0
      }
    )

Here you did the same but different colors and id to find the answer in the CheckIn task.

For the last chart we want to show the range of motion series in a chart so let’s prepare the configuration:

let rangeSeries = OCKDataSeriesConfiguration(
      taskID: TaskModel.motionCheck.rawValue,
      legendTitle: "Range of Motion (degrees)",
      gradientStartColor: UIColor(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1),
      gradientEndColor: UIColor(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1),
      markerSize: 3,
      eventAggregator: .custom { events in
        events
          .first?
          .answer(kind: #keyPath(ORKRangeOfMotionResult.range))
          ?? 0
      }
    )

The difference here is not only the id for a task and the colors; it also has a different kind for finding the data in the storeManager, since we saved this group of data by using keyPath as a type previously.

If you scroll to the end of the file, you can find an extension for OCKAnyEvent, which I provided to get the values from the outcome as a double value, if you were wondering where .answer comes from.

For now, since there is not much to see in the overview tab, I suggest navigating to TaskViewModel and putting the value of the isFuture variable to False.

Build and run the app and try to input data as much as possible to have a nice chart in the next episode.