I'm using the Charts framework and I'm experiencing some very weird behavior in my line chart.
When I segue to the ChartViewContoller and the default selection has data, the chart renders normally:
but if I segue to this view controller when the default selection doesn't have any data and then select an item that has data, it looks like this:
1) segue to this:
2) then select an item that has data:
Of course viewDidLoad is called when I segue to the view controller and as long as the default selection has data when I segue to it, I can select another item that has data or doesn't and the chart will continue to render properly. So the difference appears to be in viewDidLoad but I've tried everything I can think of but nothing fixes the problem. Here's my viewDidLoad:
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor(hexString: "232B35")
self.title = "1RM"
chartView.delegate = self
chartView.chartDescription?.enabled = false
let leftAxis = chartView.leftAxis
leftAxis.axisMinimum = 190
leftAxis.labelTextColor = NSUIColor.white
let xAxis = chartView.xAxis
xAxis.labelPosition = .bottom
xAxis.axisMinimum = 0
xAxis.granularity = 1
xAxis.axisLineWidth = 5
xAxis.valueFormatter = self
xAxis.labelTextColor = NSUIColor.white
chartView.configureDefaults()
chartView.rightAxis.enabled = false // this fixed the extra xAxis grid lines
chartView.backgroundColor = NSUIColor(red: 35/255.0, green: 43/255.0, blue: 53/255.0, alpha: 1.0)
fetchData()
chartView.setVisibleXRangeMaximum(7)
chartView.animate(yAxisDuration: 1.0)
}
here's what's happening in fetchData():
func fetchData() {
chartView.data = nil
let liftName = UserDefaults.selectedLiftForChart()
let liftEvents = dataManager.fetchLiftsEventsOfTypeByName(liftName)
guard liftEvents.count > 0 else {
chartView.noDataText = "There's no \(liftName) data to display"
shouldHideData = true
return }
// put them into a Dictionary grouped by each unique day
let groupedEvents = Dictionary(grouping: liftEvents, by: { floor($0.date.timeIntervalSince1970 / 86400) })
// grab the maximum 1RM from each day
let dailyMaximums = groupedEvents.map { $1.max(by: { $0.oneRepMax < $1.oneRepMax }) }
// MARK: - TODO: Fix the silly unwrapping
sortedLiftEvents = dailyMaximums.sorted(by: { $0?.date.compare(($1?.date)!) == .orderedAscending }) as! [LiftEvent]
let intervalBetweenDates: TimeInterval = 3600 * 24 // 3600 = 1 hour
let startDate = (sortedLiftEvents.first?.date)! - intervalBetweenDates
let lastDate = sortedLiftEvents.last?.date
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "MMM d"
let dates:[Date] = intervalDates(from: startDate, to: lastDate!, with: intervalBetweenDates)
days = dates.map {dateFormatter.string(from: $0)}
generateLineData()
}
and finally, this is the generateLineData method:
func fetchData() {
chartView.data = nil
let liftName = UserDefaults.selectedLiftForChart()
let liftEvents = dataManager.fetchLiftsEventsOfTypeByName(liftName)
guard liftEvents.count > 0 else {
chartView.noDataText = "There's no \(liftName) data to display"
shouldHideData = true
return }
// put them into a Dictionary grouped by each unique day
let groupedEvents = Dictionary(grouping: liftEvents, by: { floor($0.date.timeIntervalSince1970 / 86400) })
// grab the maximum 1RM from each day
let dailyMaximums = groupedEvents.map { $1.max(by: { $0.oneRepMax < $1.oneRepMax }) }
// MARK: - TODO: Fix the silly unwrapping
sortedLiftEvents = dailyMaximums.sorted(by: { $0?.date.compare(($1?.date)!) == .orderedAscending }) as! [LiftEvent]
let intervalBetweenDates: TimeInterval = 3600 * 24 // 3600 = 1 hour
let startDate = (sortedLiftEvents.first?.date)! - intervalBetweenDates
let lastDate = sortedLiftEvents.last?.date
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "MMM d"
let dates:[Date] = intervalDates(from: startDate, to: lastDate!, with: intervalBetweenDates)
days = dates.map {dateFormatter.string(from: $0)}
generateLineData()
}
I've tried putting chartView.setVisibleXRangeMaximum(7) in the method that sets the chart data and verified that chartView.visibleXRange is 7 each time the chart is rendered but it doesn't make a difference. I've also made sure that the max XRange is being set after the data is set for the chart.
Is there anything else I can try or is this perhaps a bug that hasn't been fixed yet?
Thanks
Well I finally figured it out. I knew from reading the documentation that some properties must be set after the chart data is handed to the chart. It was not entirely clear which properties but through lots of debugging and process of elimination I determined it was the xAxis properties that needed to be reset whenever the data changed.
Now, when the data is changed I call my new function:
func resetxAxis() {
let xAxis = chartView.xAxis
xAxis.labelPosition = .bottom
xAxis.axisMinimum = 0
xAxis.granularity = 1
xAxis.axisLineWidth = 5
xAxis.valueFormatter = self
}
This had been in my viewDidLoad method so I made the above method out of it and can call it any time it's needed.
Related
I'm using the following library to implement charts in my iOS app:
https://github.com/danielgindi/Charts
On the xAxis I would like to have a formatting similar to the one on the screenshot.
I would like to display the name of the month once, followed by days of that month (without month name), and when the months changes, display the name again.
Can someone point to the right direction?
Current code for xAxis configuration, which shows month and day for each entry:
xAxis.drawAxisLineEnabled = true
xAxis.drawGridLinesEnabled = false
xAxis.centerAxisLabelsEnabled = true
xAxis.drawLabelsEnabled = true
xAxis.axisLineColor = R.Color.Chart.Alpha.separator
xAxis.labelTextColor = R.Color.Chart.Alpha.content
xAxis.labelPosition = .bottom
xAxis.labelCount = 5
xAxis.valueFormatter = XAxisValueFormatter()
class XAxisValueFormatter: AxisValueFormatter {
func stringForValue(_ value: Double, axis: AxisBase?) -> String {
let date = Date(timeIntervalSince1970: value)
return date.to(DateFormat.monthday)
}
}
You need to update your existing code as below.
Update your data binding for XAxis:
let chartFormatter = LineChartFormatter(labels: xValues)
let xAxis = XAxis()
xAxis.valueFormatter = chartFormatter
self.xAxis.valueFormatter = xAxis.valueFormatter
Update Value Formatter code:
private class LineChartFormatter: NSObject, IAxisValueFormatter {
var labels: [String] = []
let dateFormatter = DateFormatter()
let dateShortFormatter = DateFormatter()
func stringForValue(_ value: Double, axis: AxisBase?) -> String {
if let date = dateFormatter.date(from:labels[Int(value)]) {
if value == 0 {
dateShortFormatter.dateFormat = "MMM dd"
return dateShortFormatter.string(from: date)
} else {
let prevDate = dateFormatter.date(from:labels[Int(value - 1)])
dateShortFormatter.dateFormat = "MMM"
if dateShortFormatter.string(from: date) != dateShortFormatter.string(from: prevDate!) {
dateShortFormatter.dateFormat = "MMM dd"
return dateShortFormatter.string(from: date)
} else {
dateShortFormatter.dateFormat = "dd"
return dateShortFormatter.string(from: date)
}
}
} else {
return labels[Int(value)]
}
}
init(labels: [String]) {
super.init()
dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss Z"
self.labels = labels
}}
By Above code change, you will achieve your Date formatting in XAxis.
I have found a similar question on here, but the answer did not help me. I think due to my data structure.
I have an array made up of individual arrays, each for its own line in the chart. this is then made up of multiple structs for the plot points of that line.
My issue is that values/lines are correct, but are not aligning correctly with the dates. In the example below. the dates start at 3rd May and end 8th May. Please help
here is my code
struct chartPoint {
let date:String
var total:Double
let exercise:String
}
var sets:[[chartPoint]] = []
func setupLineChart() {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "yyyy-MM-dd"
var dataSets:[LineChartDataSet] = []
var color:[UIColor] = [UIColor.red,UIColor.blue, UIColor.green,UIColor.red,UIColor.red,UIColor.red,UIColor.red]
for i in sets { //Array of array of structs
let sort = i.sorted { // sort the internal array by date
item1, item2 in
let date1 = dateFormatter.date(from:item1.date)
let date2 = dateFormatter.date(from:item2.date)
return date1!.compare(date2!) == ComparisonResult.orderedAscending
}
var dataEntries: [ChartDataEntry] = []
for stat in 0...(sort.count - 1) {
let date = dateFormatter.date(from:sort[stat].date)
let timeIntervalForDate: TimeInterval = date!.timeIntervalSince1970
let dataEntry = ChartDataEntry(x: Double(timeIntervalForDate), y: sort[stat].total)
dataEntries.append(dataEntry)
if stat == (sort.count - 1){
let chartDataSet = LineChartDataSet(values: dataEntries, label: "\(sort[stat].exercise)")
chartDataSet.setCircleColor(color[stat])
chartDataSet.setColor(color[stat], alpha: 1.0)
chartDataSet.drawValuesEnabled = true
dataSets.append(chartDataSet)
startChart(dataSets: dataSets)
}
}
}
}
func startChart(dataSets:[LineChartDataSet]){
testLineChartView.animate(xAxisDuration: 0.7, yAxisDuration: 0.7)
testLineChartView.dragEnabled = true
testLineChartView.legend.form = .circle
testLineChartView.drawGridBackgroundEnabled = false
let xaxis = testLineChartView.xAxis
xaxis.valueFormatter = axisFormatDelegate
xaxis.labelCount = dataSets.count
xaxis.granularityEnabled = true
xaxis.granularity = 1.0
xaxis.centerAxisLabelsEnabled = true
xaxis.avoidFirstLastClippingEnabled = true
xaxis.drawLimitLinesBehindDataEnabled = true
let rightAxis = testLineChartView.rightAxis
rightAxis.enabled = false
let leftAxis = testLineChartView.leftAxis
leftAxis.drawZeroLineEnabled = true
leftAxis.drawGridLinesEnabled = true
axisFormatDelegate = self
testLineChartView.delegate = self
let chartData = LineChartData(dataSets: dataSets)
testLineChartView.data = chartData
testLineChartView.chartDescription?.text = ""
}
extension ChartViewController: IAxisValueFormatter {
func stringForValue(_ value: Double, axis: AxisBase?) -> String {
let dateFormatter = DateFormatter()
dateFormatter.dateFormat = "dd MMM"
let date = Date(timeIntervalSince1970: value)
return dateFormatter.string(from: date)
}
}
I am using dates on the x-axis as well in one of my projects and I simply changed each date to a string and passed an array of string values to an IndexAxisValueFormatter.
testLineChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: xvalues)
If this is not what you are looking for, can you show a sample of what "sets" includes? Then I will be able to run your code.
Here is another thread I started with an issue around a single value not showing. It includes the code that also fixed this.
I think the main point being
xaxis.forceLabelsEnabled = true
iOS Charts - single values not showing Swift
I am having a hard time to migrate library Charts (from Daniel Gindi) from version 2 (Swift 2.3) to 3 (Swift 3).
Basically, I can't have the x labels (dates) aligned correctly with the corresponding plots.
This is what I had before in version 2:
In version 2, I had values for days 7, 8, 10 and 11.
So I was missing a day in the middle, but the labels were correctly alined with the plots.
And here is what I have in version 3:
In version 3, the "labels" in the x axis have now been replaced by double (for dates, it's a timeInterval since 1970), and formatted via a formatter.
So, indeniably, the graph is more "correct" now, since the chart correctly extrapolates the value for the 9th, but I can't find how to put the labels under the corresponding plots.
This is my code for the x axis:
let chartView = LineChartView()
...
let xAxis = chartView.xAxis
xAxis.labelPosition = .bottom
xAxis.labelCount = entries.count
xAxis.drawLabelsEnabled = true
xAxis.drawLimitLinesBehindDataEnabled = true
xAxis.avoidFirstLastClippingEnabled = true
// Set the x values date formatter
let xValuesNumberFormatter = ChartXAxisFormatter()
xValuesNumberFormatter.dateFormatter = dayNumberAndShortNameFormatter // e.g. "wed 26"
xAxis.valueFormatter = xValuesNumberFormatter
Here is the ChartXAxisFormatter class I created:
import Foundation
import Charts
class ChartXAxisFormatter: NSObject {
var dateFormatter: DateFormatter?
}
extension ChartXAxisFormatter: IAxisValueFormatter {
func stringForValue(_ value: Double, axis: AxisBase?) -> String {
if let dateFormatter = dateFormatter {
let date = Date(timeIntervalSince1970: value)
return dateFormatter.string(from: date)
}
return ""
}
}
So, the values here are correct, the formatting is correct, the shape of the chart is correct, but the alignment of the labels with the corresponding plots is not good.
Thanks for your help
OK, got it!
You've got to define a reference time Interval (the "0" for the x axis). And then calculate the additional time interval for each x value.
The ChartXAxisFormatter becomes:
import Foundation
import Charts
class ChartXAxisFormatter: NSObject {
fileprivate var dateFormatter: DateFormatter?
fileprivate var referenceTimeInterval: TimeInterval?
convenience init(referenceTimeInterval: TimeInterval, dateFormatter: DateFormatter) {
self.init()
self.referenceTimeInterval = referenceTimeInterval
self.dateFormatter = dateFormatter
}
}
extension ChartXAxisFormatter: IAxisValueFormatter {
func stringForValue(_ value: Double, axis: AxisBase?) -> String {
guard let dateFormatter = dateFormatter,
let referenceTimeInterval = referenceTimeInterval
else {
return ""
}
let date = Date(timeIntervalSince1970: value * 3600 * 24 + referenceTimeInterval)
return dateFormatter.string(from: date)
}
}
And, then, when I create my data entries, it works like so:
// (objects is defined as an array of struct with date and value)
// Define the reference time interval
var referenceTimeInterval: TimeInterval = 0
if let minTimeInterval = (objects.map { $0.date.timeIntervalSince1970 }).min() {
referenceTimeInterval = minTimeInterval
}
// Define chart xValues formatter
let formatter = DateFormatter()
formatter.dateStyle = .short
formatter.timeStyle = .none
formatter.locale = Locale.current
let xValuesNumberFormatter = ChartXAxisFormatter(referenceTimeInterval: referenceTimeInterval, dateFormatter: formatter)
// Define chart entries
var entries = [ChartDataEntry]()
for object in objects {
let timeInterval = object.date.timeIntervalSince1970
let xValue = (timeInterval - referenceTimeInterval) / (3600 * 24)
let yValue = object.value
let entry = ChartDataEntry(x: xValue, y: yValue)
entries.append(entry)
}
// Pass these entries and the formatter to the Chart ...
The result is much nicer (I removed cubic by the way):
If you exactly know how many labels you need in the x-axis,you can write this code to solve it.For example,If I need seven labels to appear on the x-axis,Then this should be enough.The reason is the chart library is not properly calculating the intervals between the two x-axis points and hence the plot-label mismatch.When we force the library to plot against the given number of labels,The issue seems to be gone.
let xAxis = chart.xAxis
xAxis.centerAxisLabelsEnabled = false
xAxis.setLabelCount(7, force: true) //enter the number of labels here
#IBOutlet weak var tView:UIView!
#IBOutlet weak var lineChartView:LineChartView!{
didSet{
lineChartView.xAxis.labelPosition = .bottom
lineChartView.xAxis.granularityEnabled = true
lineChartView.xAxis.granularity = 1.0
let xAxis = lineChartView.xAxis
// xAxis.axisMinimum = 0.0
// xAxis.granularity = 1.0
// xaAxis.setLabelCount(6, force: true)
}
}
#IBOutlet weak var back: UIButton?
#IBAction func back(_ sender: Any) {
self.navigationController?.popViewController(animated: true)
}
override func viewDidLoad() {
super.viewDidLoad()
self.lineChartView.delegate = self
self.lineChartView.chartDescription?.textColor = UIColor.white
let months = ["Jan" , "Feb", "Mar"]
let dollars1 = [1453.0,2352,5431]
setChart(months, values: dollars1)
}
func setChart(_ dataPoints: [String], values: [Double]) {
var dataEntries: [ChartDataEntry] = []
for i in 0 ..< dataPoints.count {
dataEntries.append(ChartDataEntry(x: Double(i), y: values[i]))
}
let lineChartDataSet = LineChartDataSet(entries: dataEntries, label: nil)
lineChartDataSet.axisDependency = .left
lineChartDataSet.setColor(UIColor.black)
lineChartDataSet.setCircleColor(UIColor.black) // our circle will be dark red
lineChartDataSet.lineWidth = 1.0
lineChartDataSet.circleRadius = 3.0 // the radius of the node circle
lineChartDataSet.fillAlpha = 1
lineChartDataSet.fillColor = UIColor.black
lineChartDataSet.highlightColor = UIColor.white
lineChartDataSet.drawCircleHoleEnabled = true
var dataSets = [LineChartDataSet]()
dataSets.append(lineChartDataSet)
let lineChartData = LineChartData(dataSets: dataSets)
lineChartView.data = lineChartData
lineChartView.rightAxis.enabled = false
lineChartView.xAxis.drawGridLinesEnabled = false
lineChartView.xAxis.labelPosition = .bottom
lineChartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: dataPoints)
}
func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
print(entry)
}
I solved this issue using this answer
https://stackoverflow.com/a/44554613/2087608
I suspected that these offsets come from adjusting X axis value to a specific time of the day in my case
Here is my code
for i in 0..<valuesViewModel.entries.count {
let dataEntry = ChartDataEntry(x: roundDate(date: valuesViewModel.entries[i].date).timeIntervalSince1970, y: valuesViewModel.entries[i].value)
dataEntries.append(dataEntry)
}
func roundDate(date: Date) -> Date {
var comp: DateComponents = Calendar.current.dateComponents([.year, .month, .day], from: date)
comp.timeZone = TimeZone(abbreviation: "UTC")!
let truncated = Calendar.current.date(from: comp)!
return truncated
}
I would like to change the color of the rows in my tableview to red.. if the date (subtitle) is older than 5 days from today. I tried something like: (example with the textfield color)
// Configure the cell...
cell.textLabel?.textColor = UIColor.blueColor()
cell.detailTextLabel?.textColor = UIColor.darkGrayColor()
let item = frc.objectAtIndexPath(indexPath) as! Item
cell.textLabel?.text = item.name! + "-" + item.etage! + "-" + item.raum!
let note = item.date
cell.detailTextLabel!.text = "\(note!)"
if note == "04.04.2016 20:31:55" {
cell.detailTextLabel?.textColor = UIColor.redColor()
} else {
}
return cell
}
and it works.. but only with the exact time (minutes, seconds).
How can i do this with compare only the day minus 5 days?
You can use an extension of NSDate:
extension NSDate {
func numberOfDaysRoundedUp(toDateTime : NSDate) -> Int {
let calendar = NSCalendar.currentCalendar()
let components = calendar.components(NSCalendarUnit.Day, fromDate: self, toDate: toDateTime, options: [])
return abs(components.day)
}
func olderThanFiveDays(toDateTime : NSDate) -> Bool {
return (numberOfDaysRoundedUp(toDateTime) > 5)
}
}
usage:
// Today (4 April 2016 - 19:16:14)
let date : NSDate = NSDate()
// 1 April 2016 - 19:16:14
let aprilFirst : NSDate = NSDate(timeIntervalSince1970: NSTimeInterval(1459538184))
// 1 March 2016 - 19:29:00
let marchFirst : NSDate = NSDate(timeIntervalSince1970: NSTimeInterval(1456860540))
print(date.numberOfDaysRoundedUp(aprilFirst)) // 3
print(date.olderThanFiveDays(aprilFirst)) // False
print(date.numberOfDaysRoundedUp(marchFirst)) // 34
print(date.olderThanFiveDays(marchFirst)) // True
It might be a rough method but i think it is easy to understand and easy to change and fit your needs.
I am trying to create a video player with AVPlayer.Videos load from youtube. I want when video current time changes, my uiSlider and my time label can update. I am using "observeValueForKeyPath" method to catch "loadedTimeRanges" status from player item. Here is my code:
override func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context: UnsafeMutablePointer<Void>) {
print("keyPath: \(keyPath)")
let playerItem:AVPlayerItem = object as! AVPlayerItem
if keyPath == "status" {
if playerItem.status == AVPlayerItemStatus.ReadyToPlay{
print("AVPlayerItemStatusReadyToPlay")
} else if playerItem.status == AVPlayerItemStatus.Failed {
print("AVPlayerItemStatusFailed")
}
} else if keyPath == "loadedTimeRanges" {
let currentTime = playerItem.currentTime().seconds
let totalDuration = playerItem.duration.seconds
print("value: \(Float(currentTime/totalDuration))")
self.monitoringPlayback(player.currentItem!)
self.slider.setValue(Float(currentTime/totalDuration), animated: false)
}
}
func monitoringPlayback(playerItem:AVPlayerItem) {
let currentSecond:Double = playerItem.currentTime().seconds
self.updateVideoSlider(currentSecond)
let timeString = self.updateTime(playerItem.duration.seconds - currentSecond)
print("time string: \(timeString)")
self.lblTime.text = timeString
}
However, the "observeValueForKeyPath" method is only called 20-22 times everytime. Please, check the log screenshot: https://gyazo.com/5ca57ba532689d83aea855ae41387f53
It's the first time I use this method, so maybe I didn't understand how it work. If anyone who know it, please tell me why. Thanks for reading my question.
it, easy
var rightCurrentTimer: UILabel = {
let lbl = UILabel()
lbl.text = "00:00"
lbl.textColor = .white
lbl.translatesAutoresizingMaskIntoConstraints = false
lbl.font = UIFont.systemFont(ofSize: 11)
return lbl
}()
let leftWhatTimePlayed:UILabel = {
let lbl = UILabel()
lbl.translatesAutoresizingMaskIntoConstraints = false
lbl.textColor = .white
lbl.text = "00:00"
lbl.font = UIFont.systemFont(ofSize: 11)
return lbl
}()
let interval = CMTime(value: 1, timescale: 1)
player?.addPeriodicTimeObserver(forInterval: interval, queue: DispatchQueue.main, using: { (timeProgress) in
let secondsPlay = CMTimeGetSeconds(timeProgress)
let secondString = String(format:"%02d" , Int(secondsPlay) % 60 )
let minutesString = String(format:"%02d", Int(secondsPlay) / 60)
self.leftWhatTimePlayed.text = "\(minutesString):\(secondString)"
if let duration = self.player?.currentItem?.duration {
let totalSecond = CMTimeGetSeconds(duration)
let whatSecondIsPlay = totalSecond - secondsPlay
let secondsIsPlay = String(format:"%02d" , Int(whatSecondIsPlay) % 60)
let minutesIsPlay = String(format: "%02d", Int(whatSecondIsPlay) / 60)
self.rightCurrentTimer.text = "\(minutesIsPlay):\(secondsIsPlay)"
self.videoLengthTimeSlider.value = Float(secondsPlay/totalSecond)
}
})