Apple Health Frameworks

Part 3, Episode 15, Show Data in Different Charts

In this episode, I want to show you how to use different OCKDataSeriesConfiguration to show data in charts.

Navigate to OverviewViewController class from project navigator; you can see I prepared different functions for you to make different charts; however, you’ve already done the first part, which is preparing the configuration; now it’s time to create charts and show the data. Let’s begin with Chart1, create a bar chart // Create Bar Chart comment:

    let barChart = OCKCartesianChartViewController(
      plotType: .bar,
      selectedDate: Date(),
      configurations: [muscleSeries, headacheSeries],
      storeManager: storeManager
    )
    appendViewController(barChart, animated: false)

Here, you create OCKCartesianChartViewController by selecting bar as a plotType, using the current date, and injecting muscle and headache series. Then append it to the current ViewContorller.

Call this function in the viewDidLoad function right after // Use the charts here:

makeChart1()

Build and run the project, navigate to the second tab, see how chart 1 looks, and make sure you’ve already added enough data to the CareKitStore to have a beautiful chart.

Next is to create the chart 2, create your second bar chart after // Create Bar Chart comment:

    let barChart2 = OCKCartesianChartViewController(
      plotType: .bar,
      selectedDate: Date(),
      configurations: [tirednessSeries],
      storeManager: storeManager
    )

    appendViewController(barChart2, animated: false)

You did the same here, but we made two charts because tiredness is different from muscle pain or headache.

Call this function in the viewDidLoad function right after // Use the charts here:

makeChart2()

Build and run the project, navigate to the second tab, see how chart 2 looks, and make sure you’ve already added enough data to the CareKitStore to have beautiful charts.

Next is to create the chart 3, create a line chart after // Create Line Chart comment:

    let lineChart = OCKCartesianChartViewController(
      plotType: .line,
      selectedDate: Date(),
      configurations: [feverSeries],
      storeManager: storeManager
    )

    appendViewController(lineChart, animated: false)

Here, you create OCKCartesianChartViewController by selecting line as a plotType and using the current date and injecting fever Series. Then append it to the current ViewContorller. Call this function in the viewDidLoad function right after // Use the charts here:

makeChart3()

Build and run the project and navigate to the second tab, see how chart 3 looks like, make sure you’ve already added enough data to the CareKitStore to have beautiful charts.

The last step here is to create the chart 4, create a line scatter after // Create Scatter Chart comment:

    let scatterChart = OCKCartesianChartViewController(
      plotType: .scatter,
      selectedDate: Date(),
      configurations: [rangeSeries],
      storeManager: storeManager
    )

    appendViewController(scatterChart, animated: false)

Here, you create OCKCartesianChartViewController by selecting scatter as a plotType and using the current date and inject range series. Then append it to the current ViewContorller.

Call this function in the viewDidLoad function right after // Use the charts here:

makeChart4()

Build and run the project and navigate to the second tab, see how chart 4 looks like, make sure you’ve already added enough data to the CareKitStore to have beautiful charts.