Search code examples
iosswiftxcodegraphingjbchartview

How do I plot and customize two lines with JBLineChart in iOS?


I am attempting to plot two sets of data on one chart using Jawbone's graphing library for iOS. Here is the data for the dates (x-axis), activity level, and threshold:

var activityChartLegend = ["11-14", "11-15", "11-16", "11-17", "11-18", "11-19", "11-20"]
var activityChartData = [88, 81, 69, 77, 70, 89, 90]
var activityThreshold = [80, 80, 80, 80, 80, 80, 80]

I have successfully plotted the first line for activityChartData. However, I am confused on how to plot a second line for activityThreshold. Documentation is limited so I am not sure how to plot this second line. In the following code, I have returned the number of lines as "2", but I do not understand how to plot both lines within the following functions.

func numberOfLines(in lineChartView: JBLineChartView!) -> UInt {
    return 2
}

func lineChartView(_ lineChartView: JBLineChartView!, numberOfVerticalValuesAtLineIndex lineIndex: UInt) -> UInt {
    if (lineIndex == 0) {
        return UInt(activityChartData.count)
    }

    return 0
}

func lineChartView(_ lineChartView: JBLineChartView!, verticalValueForHorizontalIndex horizontalIndex: UInt, atLineIndex lineIndex: UInt) -> CGFloat {
    if (lineIndex == 0) {
        return CGFloat(activityChartData[Int(horizontalIndex)])
    }
    return 0
}

Also, I have formatted the first line with the following code, but do not understand how to format the other line once it is successfully added to the chart view:

func lineChartView(_ lineChartView: JBLineChartView!, showsDotsForLineAtLineIndex lineIndex: UInt) -> Bool {
    return true // False = do not show the dots
}

func lineChartView(_ lineChartView: JBLineChartView!, dotRadiusForDotAtHorizontalIndex horizontalIndex: UInt, atLineIndex lineIndex: UInt) -> CGFloat {
    return CGFloat(6)
}

func lineChartView(_ lineChartView: JBLineChartView!, colorForDotAtHorizontalIndex horizontalIndex: UInt, atLineIndex lineIndex: UInt) -> UIColor! {
    return UIColor.lightGray
}

func lineChartView(_ lineChartView: JBLineChartView!, smoothLineAtLineIndex lineIndex: UInt) -> Bool {
    return true
}

func lineChartView(_ lineChartView: JBLineChartView!, didSelectLineAt lineIndex: UInt, horizontalIndex: UInt) {
    if (lineIndex == 0){
        let data = activityChartData[Int(horizontalIndex)]
        let key = activityChartLegend[Int(horizontalIndex)]
        activityLabel.text = "Number of steps on \(key): \(data)"
    }
}

I am fairly new to coding in iOS and have only found limited documentation on this subject. Thank you for any help you can provide!


Solution

  • func lineChartView(_ lineChartView: JBLineChartView!, verticalValueForHorizontalIndex horizontalIndex: UInt, atLineIndex lineIndex: UInt) -> CGFloat {
        if (lineIndex == 0) {
             return CGFloat(activityChartData[Int(horizontalIndex)])
        }
        else if (lineIndex == 1)
        {
            return CGFloat(activityChartData2[Int(horizontalIndex)])
        }
        return 0
    }
    

    Do the sameway to other functions . You'll be noticed that they have their own lineIndex

    :D