ios - how to pass time as xAxis data value in method numberForPlot using core plot?

Question

I need to create graph which is "Heart rate vs time". in xAxis I am showing time which is in format of "HH:mm:ss" and at y Axis its decimal value. My code is as below :

data source for graph:

     var graphData:[(String,Double)] = []
let data = ("17:56:35",Double(65))
            let data1 = ("18:04:13",Double(95))
            let data2 = ("18:8:35",Double(25))
            self.graphData.append(data)
            self.graphData.append(data1)
            self.graphData.append(data2)

Set up graph and plot data code:

func setGraph() {
    let tts = CPTMutableTextStyle()
    tts.fontSize = 75.0
    tts.color = CPTColor(CGColor: UIColor.blackColor().CGColor)
    tts.fontName = "HelveticaNeue-Bold"
    self.graph.titleTextStyle = tts

    self.graph.title = "Heart Rate vs Time"

    self.graph.applyTheme(CPTTheme(named:kCPTPlainWhiteTheme))
    let plotSpace = graph.defaultPlotSpace as! CPTXYPlotSpace!

    plotSpace.allowsUserInteraction = false

    let xRange = plotSpace.xRange.mutableCopy() as! CPTMutablePlotRange
    xRange.locationDouble = Double(0)
    xRange.lengthDouble = Double(1000)
    plotSpace.xRange = xRange

    let yRange = plotSpace.yRange.mutableCopy() as! CPTMutablePlotRange
    yRange.locationDouble = Double(0)
    yRange.lengthDouble = Double(210)
    plotSpace.yRange = yRange

    graph.addPlotSpace(plotSpace)

    graph.plotAreaFrame!.paddingTop    = 0
    graph.plotAreaFrame!.paddingRight  = 0
    graph.plotAreaFrame!.paddingBottom = graphOffset
    graph.plotAreaFrame!.paddingLeft   = graphOffset
    graph.plotAreaFrame!.masksToBorder = false

    // Grid line styles
    let majorLineStyle          = CPTMutableLineStyle()
    majorLineStyle.lineWidth    = 0.75
    majorLineStyle.lineColor    = CPTColor.redColor()

    let minorLineStyle          = CPTMutableLineStyle()
    minorLineStyle.lineWidth    = 0.25
    minorLineStyle.lineColor    = CPTColor.blackColor()

    //Axis Line colors
    let axisLineStyle           = CPTMutableLineStyle()
    axisLineStyle.lineWidth     = 2.0
    axisLineStyle.lineColor     = CPTColor.blackColor()

    //Axis Label colors
    let labelTextStyle              = CPTMutableTextStyle()
    labelTextStyle.textAlignment    = CPTTextAlignment.Left
    labelTextStyle.color            = CPTColor.blackColor()

    //Axis title color
    let titleTextStyle              = CPTMutableTextStyle()
    titleTextStyle.textAlignment    = CPTTextAlignment.Left
    titleTextStyle.color            = CPTColor.blackColor()
    titleTextStyle.fontSize         = 15

    let dataSourceLinePlot = CPTScatterPlot()
    let lineStyle               = CPTMutableLineStyle()
    lineStyle.lineWidth         = 3.0
    lineStyle.lineColor         = CPTColor.blueColor()
    dataSourceLinePlot.dataLineStyle = lineStyle
    dataSourceLinePlot.identifier    = kPlotIdentifier
    //        dataSourceLinePlot.dataSource    = self


    let xts = CPTMutableTextStyle()
    xts.color = CPTColor(componentRed: 255.0, green: 255.0, blue: 255.0, alpha: 1.0)


    let dateFormatter = NSDateFormatter()
    dateFormatter.dateFormat = "HH:mm:ss"
    let timeformatter = CPTTimeFormatter(dateFormatter: dateFormatter)
    timeformatter.referenceDate = NSDate()

    let axisSet = graph.axisSet as! CPTXYAxisSet!

    let xAxis = axisSet.xAxis as CPTXYAxis!
    xAxis.axisTitle = CPTAxisTitle(text: "Elapsed Time", textStyle: xts)
    xAxis.labelFormatter = timeformatter
    xAxis.majorGridLineStyle = majorLineStyle
    xAxis.minorGridLineStyle = minorLineStyle
    xAxis.majorIntervalLength = NSNumber(double: 60.0)

    let yAxis = axisSet.yAxis as CPTXYAxis!
    yAxis.axisTitle = CPTAxisTitle(text: "Heart Rate", textStyle: xts)
    let axisFormatter = NSNumberFormatter()
    axisFormatter.maximumFractionDigits = 0
    axisFormatter.minimumIntegerDigits = 1
    yAxis.labelFormatter = axisFormatter
    yAxis.titleOffset = 35.0
    yAxis.majorIntervalLength = 20
    yAxis.majorGridLineStyle = majorLineStyle
    yAxis.minorGridLineStyle = minorLineStyle


    graph.addPlot(dataSourceLinePlot)
    self.IBviewGraph.hostedGraph = self.graph

}

To plot data :

func setGraphData() {

     dispatch_sync(dispatch_get_main_queue(), {

    let plot = CPTScatterPlot()
    plot.dataSource = self

    let actualPlotStyle = plot.dataLineStyle!.mutableCopy() as! CPTMutableLineStyle
    actualPlotStyle.lineWidth = 2.0
    actualPlotStyle.lineColor = CPTColor(CGColor: (UIColor.yellowColor().CGColor))
    plot.dataLineStyle = actualPlotStyle
    plot.interpolation = .Linear

    self.graph.addPlot(plot)

    })
}

Data source methods

 func numberOfRecordsForPlot(plot: CPTPlot) -> UInt {
    return 3
}

 func numberForPlot(plot: CPTPlot, field: UInt, recordIndex: UInt) -> AnyObject?{

    var num = NSNumber()
    let index = Int(recordIndex)
    switch field {
    case 0://xaxis

        return graphData[index].0

    case 1://yaxis
        return graphData[index].1
    default:
        break
    }
    print("coordintes = ",num)
   return num
}

My graph is drown but only yAxis points are correct , its not considering xAxis value and so because of that points are at wrong position in graph. I think the value I am passing in method numberForPlot for xAxis is wrong , but don't know how to pass it. Give me some solution.

Answer 1

The x-values in the graphData array are strings. Core Plot expects the datasource to return a numeric value for each index. It's reading the hour from the time string and using that for the x-value.

The x-axis is configured to display numbers in the range 0 to 1,000. Therefore, you need to convert the time data to a number in that range. Keep track of the reference date used to format the axis labels (i.e., store it in an instance variable) and use that to convert the time data to an offset in seconds from the reference date.