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

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.

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.

Related

How do I add values to my graph in core plot swift?

let graph = CPTXYGraph(frame: hostview.bounds)
hostview.hostedGraph = graph
graph.paddingLeft = 0.0
graph.paddingTop = 0.0
graph.paddingRight = 0.0
graph.paddingBottom = 0.0
graph.axisSet = nil
That is my code so far. I would like to plot a function. f(x) = x^2 + 10 should be the function value in this case. I want the x-axis and the y-axis to start at 0 and end at 100.
Can someone help me with implementing this f(x)?
Your initialization logic of the graph should look like below. Use this in viewDidLoad
func initPlot() {
let graph = CPTXYGraph(frame: hostView.bounds)
graph.plotAreaFrame?.masksToBorder = false
hostView.hostedGraph = graph
graph.backgroundColor = UIColor.white.cgColor
graph.paddingBottom = 40.0
graph.paddingLeft = 40.0
graph.paddingTop = 40.0
graph.paddingRight = 40.0
//configure title
let title = "f(x) = x*x + 10"
graph.title = title
//configure axes
let axisSet = graph.axisSet as! CPTXYAxisSet
if let x = axisSet.xAxis {
x.majorIntervalLength = 20
x.minorTicksPerInterval = 1
}
if let y = axisSet.yAxis {
y.majorIntervalLength = 5
y.minorTicksPerInterval = 5
}
let xMin = 0.0
let xMax = 100.0
let yMin = 0.0
let yMax = 100.0
guard let plotSpace = graph.defaultPlotSpace as? CPTXYPlotSpace else { return }
plotSpace.xRange = CPTPlotRange(locationDecimal: CPTDecimalFromDouble(xMin), lengthDecimal: CPTDecimalFromDouble(xMax - xMin))
plotSpace.yRange = CPTPlotRange(locationDecimal: CPTDecimalFromDouble(yMin), lengthDecimal: CPTDecimalFromDouble(yMax - yMin))
//create the plot
plot = CPTScatterPlot()
plot.dataSource = self
graph.add(plot, to: graph.defaultPlotSpace)
}
Additionally you need to implement CPTScatterPlotDataSource, where you define the numberOfRecords and respective X and Y values
extension ViewController: CPTScatterPlotDataSource {
func numberOfRecords(for plot: CPTPlot) -> UInt {
return 100
}
func number(for plot: CPTPlot, field: UInt, record: UInt) -> Any? {
switch CPTScatterPlotField(rawValue: Int(field))! {
case .X:
return record
case .Y:
return (record * record) + 10
default:
return 0
}
}
}

How do I draw yaxis min value as different color on certain limit?

I am using iOS Charts to draw linechart but unable to draw the same graph as shown below in the image. I tried by setting leftAxis.axisMinimum = minValue but it also not working. If the given value is minimum on certain limit it should show in red color as shown in attached image.
func setLineChartWithDateFormat(graphPoints: [GraphPoints], linePosition: CGFloat, minValue: Double = 0, fillColor: UIColor = UIColor(red: 158.0/255.0, green: 188.0/255.0, blue: 136.0/255.0, alpha: 1)) {
var referenceTimeInterval: TimeInterval = 0
if let minTimeInterval = (graphPoints.map { ($0.getDateFromDateTime?.timeIntervalSince1970 ?? 0) }).min() {
referenceTimeInterval = minTimeInterval
}
let formatter = DateFormatter()
formatter.locale = Locale(identifier: "en_US_POSIX")
formatter.dateFormat = "MMM dd"
let xValuesNumberFormatter = ChartXAxisWithFormatter(referenceTimeInterval: referenceTimeInterval, dateFormatter: formatter)
// Define chart entries
var entries = [ChartDataEntry]()
var xAxisValues = [CGFloat]()
for object in graphPoints {
let timeInterval = object.getDateFromDateTime?.timeIntervalSince1970 ?? 0
let xValue = (timeInterval - referenceTimeInterval) / (3600 * 24)
xAxisValues.append(CGFloat(xValue))
let yValue = object.price ?? 0
let entry = ChartDataEntry(x: xValue, y: yValue)
entry.setValue(object.getDateFromDateTime, forKey: "data")
entries.append(entry)
}
var minValue = xAxisValues.min()
let chartDataSet = LineChartDataSet(entries: entries, label: "BPM")
chartDataSet.fillColor = fillColor
/// Data object that encapsulates all data associated with a LineChart.
let chartData = LineChartData()
chartData.addDataSet(chartDataSet)
chartData.setDrawValues(false)
chartDataSet.drawCirclesEnabled = false
chartDataSet.mode = .linear
chartDataSet.colors = [.white]
chartDataSet.fillFormatter = LineChartFillFormatter(value: minValue ?? 0)
// let gradientColors = [gradientColor1.cgColor, gradientColor2.cgColor] as CFArray
// let colorLocations: [CGFloat] = [0.7,0.0]
// guard CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: gradientColors, locations: colorLocations) != nil else {
// print("Gradient Error")
// return
// }
chartDataSet.drawFilledEnabled = true
chartDataSet.fillAlpha = 1
chartDataSet.setDrawHighlightIndicators(true)
chartDataSet.drawHorizontalHighlightIndicatorEnabled = false
// lineChart.leftAxis.axisMinimum = minValue
///x axis for chart view
let xAxis: XAxis = self.lineChart.xAxis
xAxis.labelPosition = .bottomInside
xAxis.drawGridLinesEnabled = true //true, if want x Axis grid lines
xAxis.valueFormatter = xValuesNumberFormatter
xAxis.gridColor = gridColor
xAxis.axisLineColor = gridColor
xAxis.labelFont = BSFonts.getFontWithSize(fontType: .iBMPlexSansCond, fontSize: BSFontSize.small)
xAxis.labelTextColor = axisTextColor
xAxis.labelPosition = .bottom
xAxis.spaceMin = 0.5
xAxis.drawAxisLineEnabled = false
xAxis.drawLimitLinesBehindDataEnabled = true
xAxis.granularityEnabled = true
// xAxis.granularity = 2
xAxis.labelWidth = UIDevice.current.isIPad ? 30 : 20
// xAxis.labelCount = 4
///right axis for chart view
let rightAxis: YAxis = lineChart.rightAxis
rightAxis.enabled = false
///y axis of chart view
let leftAxis: YAxis = lineChart.leftAxis
leftAxis.labelPosition = .insideChart
leftAxis.drawGridLinesEnabled = true //true, if want y axis grid lines
leftAxis.drawLabelsEnabled = true
leftAxis.gridColor = gridColor
leftAxis.axisLineColor = gridColor
leftAxis.labelFont = BSFonts.getFontWithSize(fontType: .iBMPlexSansCond, fontSize: BSFontSize.small)
leftAxis.labelTextColor = axisTextColor
leftAxis.labelPosition = .outsideChart
//leftAxis.spaceBottom = 0.3
leftAxis.drawAxisLineEnabled = false
leftAxis.labelCount = 4
/// The data for the chart
lineChart.data = chartData
lineChart.doubleTapToZoomEnabled = false
lineChart.data?.highlightEnabled = true
}

Charts, HorizontalBarChartView, how set values alignment = Center?

Swift 3.1, Charts, Multiple cells in tableView with HorizontalBarChartView.
Is it possible to align the value - centered?
Setup charts data:.
func refreshData() {
guard let item = self.item, !item.tasks.isEmpty else {
return
}
self.titleName.text = item.name
self.leftNameMargin.constant = CGFloat(30 * item.level)
self.titleName.textColor = UIColor(hexString: item.color)
let font = UIFont.systemFont(ofSize: 17.0, weight: UIFontWeightSemibold)
var colors: [UIColor] = []
var yValues: [Double] = []
var count = 0.0
for task in item.tasks {
count += Double(task.count)
yValues.append(Double(task.count))
colors.append(UIColor(hexString: task.valueColor))
}
let suffix = String(format: NSXLocalization.string(forKey: KEY_STR_PERCENT)) //fixes '%' duplication
let formatter = NumberFormatter()
formatter.roundingMode = .floor
formatter.numberStyle = .percent
formatter.positiveSuffix = suffix
formatter.negativeSuffix = suffix
formatter.zeroSymbol = ""
let dataEntry = BarChartDataEntry(x: 0.0, yValues: yValues.map { ($0 / count) })
let dataSet = BarChartDataSet(values: [dataEntry], label: nil)
dataSet.colors = colors
dataSet.valueTextColor = .white
dataSet.barBorderColor = .black
dataSet.barBorderWidth = 1.0
dataSet.drawValuesEnabled = true
dataSet.valueFormatter = DefaultValueFormatter(formatter: formatter)
let data = BarChartData(dataSets: [dataSet])
data.setValueFont(font)
data.setDrawValues(true)
data.highlightEnabled = true
self.chart.data = data
}
I Reviewed all internal methods in the charts, but never found a way to center the y values.

Many Gradient Fill in same lineChart Swift for iOS-Charts

let gradientColors = [UIColor.cyanColor().CGColor, UIColor.clearColor().CGColor] // Colors of the gradient
let colorLocations:[CGFloat] = [1.0, 0.0] // Positioning of the gradient
let gradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), gradientColors, colorLocations) // Gradient Object
set.fill = ChartFill.fillWithLinearGradient(gradient!, angle: 90.0) // Set the Gradient
set.drawFilledEnabled = true // Draw the Gradient
Result
I want to have many fill depending of xAxis value like this :
It's possible to do this ??
Solution:
The solution is to use many dataset, from the second one, the first value for each data need to be same the last value of the previous dataset so at the end it will look like you have one dataset
ex:
let dollars1 = [1453.0,2352,5431,1442] // last value = first value of next dataset
let dollars2 = [1442.0,2234,8763,4453] // last value = first value of next dataset
let dollars3 = [4453.0,3456,7843,5678] // last value = first value of next dataset
func setChartData(months : [String]) {
var yVals1 : [ChartDataEntry] = [ChartDataEntry]()
for var i = 0; i < months.count; i++ {
yVals1.append(ChartDataEntry(value: dollars1[i], xIndex: i))
}
let set1: LineChartDataSet = LineChartDataSet(yVals: yVals1, label: "First Set")
set1.axisDependency = .Left // Line will correlate with left axis values
set1.setColor(UIColor.redColor().colorWithAlphaComponent(0.5))
set1.setCircleColor(UIColor.redColor())
set1.lineWidth = 2.0
set1.circleRadius = 6.0
set1.fillAlpha = 1
set1.fillColor = UIColor.redColor()
set1.drawFilledEnabled = true
var yVals2 : [ChartDataEntry] = [ChartDataEntry]()
for var i = 0; i < months.count; i++ {
yVals2.append(ChartDataEntry(value: dollars2[i], xIndex: i))
}
let set2: LineChartDataSet = LineChartDataSet(yVals: yVals2, label: "Second Set")
set2.axisDependency = .Left // Line will correlate with left axis values
set2.setColor(UIColor.greenColor().colorWithAlphaComponent(0.5))
set2.setCircleColor(UIColor.greenColor())
set2.lineWidth = 2.0
set2.circleRadius = 6.0
set2.fillAlpha = 1
set2.fillColor = UIColor.greenColor()
set2.drawFilledEnabled = true
var yVals3 : [ChartDataEntry] = [ChartDataEntry]()
for var i = 0; i < months.count; i++ {
yVals3.append(ChartDataEntry(value: dollars3[i], xIndex: i))
}
let set3: LineChartDataSet = LineChartDataSet(yVals: yVals3, label: "Second Set")
set3.axisDependency = .Left // Line will correlate with left axis values
set3.setColor(UIColor.blueColor().colorWithAlphaComponent(0.5))
set3.setCircleColor(UIColor.blueColor())
set3.lineWidth = 2.0
set3.circleRadius = 6.0
set3.fillAlpha = 65 / 255.0
set3.fillColor = UIColor.blueColor()
set3.drawFilledEnabled = true
//3 - create an array to store our LineChartDataSets
var dataSets : [LineChartDataSet] = [LineChartDataSet]()
dataSets.append(set1)
dataSets.append(set2)
dataSets.append(set3)
//4 - pass our months in for our x-axis label value along with our dataSets
let data: LineChartData = LineChartData(xVals: months, dataSets: dataSets)
data.setValueTextColor(UIColor.whiteColor())
//5 - finally set our data
self.lineChartView.data = data
}
Yes its possible to do that gradient fill you want ,just replace below line and add some color so you can check.
set.fill = ChartFill.fillWithLinearGradient(gradient!, angle: 90.0)
Set the angle 180 so it will work
set.fill = ChartFill.fillWithLinearGradient(gradient!, angle: 180.0)

Graph plot reference point is changing

I have a weird issue. I have some data on graph and when new data arrives I am inserting that into graph. But issue is new data plotting is starting from first point of already drawn plot not from last point of plot. The console prints the correct point but the plotting starts from first point of already drawn plot not from last point of already drawn plot. My code for graph set up is here :Code for graph set up and Code for Axis animation
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(kMaxDataPoints)
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().dateByAddingTimeInterval(startTimeInterval)
currentdate = timeformatter.referenceDate
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: 30.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
yAxis.axisConstraints = CPTConstraints(lowerOffset: 0.0)
graph.addPlot(dataSourceLinePlot)
self.IBviewGraph.hostedGraph = self.graph
setGraphData()
}
func setGraphData()
{
self.plot.dataSource = self
let actualPlotStyle = self.plot.dataLineStyle!.mutableCopy() as! CPTMutableLineStyle
actualPlotStyle.lineWidth = 2.0
actualPlotStyle.lineColor = CPTColor(CGColor: (UIColor.blueColor().CGColor))
self.plot.dataLineStyle = actualPlotStyle
self.plot.interpolation = .Curved
self.graph.addPlot(self.plot)
}
Now when i receive new data :
graphData.removeAtIndex(0)
plot.deleteDataInIndexRange(NSMakeRange(0, 1))
let location = currentIndex
let oldRange = CPTPlotRange(location: location , length: kMaxDataPoints)
let newRange = CPTPlotRange(location: location + 30, length: kMaxDataPoints)
CPTAnimation.animate(plotSpace, property: "xRange", fromPlotRange: oldRange, toPlotRange: newRange, duration: CGFloat(1.0 / kFrameRate))
graphData.append((newTime,data.1))
plot.insertDataAtIndex(UInt(graphData.count - 1), numberOfRecords: 1)

Resources