How to graph dates as X Axis (Swift)

Question

I have struct of objects I'm trying to graph:

struct CustomHistoricalSample {
    var value: Double
    var date: Date
}

I'm using SwiftChart (lighter weight than Charts) to graph the values. This library takes an X axis array of [Double] (or [TimeInterval]) and then I need to format it back into a string to display below the graph. How can I convert my date to a TimeInterval then format as a String in order to graph it? Below are also example CustomHistoricalSamples that I'm trying to graph.

 override func viewDidLoad() {
        super.viewDidLoad()

         chart.delegate = self

  let graphableVales = customHistoricalSamples.map { $0.value  }
        let graphableDatesAsDouble = customHistoricalSamples.map { $0.date }


        let series = ChartSeries(graphableVales)
        series.area = true
        chart.xLabels = //?
        chart.xLabelsFormatter = //String? 
        chart.add(series)
}

value = 15.0 and date = 2018-01-16 03:19:08 +0000
value = 26.0 and date = 2018-01-17 02:58:29 +0000
value = 27.0 and date = 2018-01-20 20:48:58 +0000
value = 22.0 and date = 2018-01-21 02:13:17 +0000
value = 18.0 and date = 2018-01-22 02:11:43 +0000
value = 14.0 and date = 2018-01-26 01:16:37 +0000
value = 20.0 and date = 2018-01-28 02:22:48 +0000
value = 16.0 and date = 2018-01-28 03:58:07 +0000
value = 15.0 and date = 2018-02-03 22:12:02 +0000
value = 18.0 and date = 2018-02-04 03:44:11 +0000
value = 22.0 and date = 2018-02-10 20:54:22 +0000
value = 19.0 and date = 2018-02-10 22:14:51 +0000
value = 14.0 and date = 2018-02-11 23:58:37 +0000
value = 25.0 and date = 2018-02-13 03:27:34 +0000
value = 22.7 and date = 2018-02-17 02:21:26 +0000
value = 15.8 and date = 2018-02-19 02:08:40 +0000
value = 16.2 and date = 2018-02-23 01:13:49 +0000
value = 16.6 and date = 2018-02-24 20:43:42 +0000
value = 24.2 and date = 2018-02-24 22:10:35 +0000
value = 16.4 and date = 2018-02-28 01:18:26 +0000
value = 13.8 and date = 2018-03-02 01:40:51 +0000
value = 21.9 and date = 2018-03-03 20:48:25 +0000
value = 13.7 and date = 2018-03-03 22:09:32 +0000
value = 15.1 and date = 2018-03-05 02:12:14 +0000
value = 14.3 and date = 2018-03-06 00:33:12 +0000
value = 16.4 and date = 2018-03-10 03:40:25 +0000
value = 13.5 and date = 2018-03-11 22:44:04 +0000
value = 16.2 and date = 2018-03-18 23:25:03 +0000
value = 19.7 and date = 2018-03-28 00:09:40 +0000
value = 14.5 and date = 2018-03-30 02:17:00 +0000
value = 17.6 and date = 2018-03-31 19:20:38 +0000
value = 15.8 and date = 2018-04-03 23:23:37 +0000
value = 15.0 and date = 2018-04-11 01:16:16 +0000
value = 18.4 and date = 2018-04-18 01:15:09 +0000
value = 14.7 and date = 2018-04-29 00:23:30 +0000
value = 12.7 and date = 2018-05-16 02:52:31 +0000
value = 13.7 and date = 2018-05-19 23:16:40 +0000
value = 14.0 and date = 2018-05-23 01:09:00 +0000
value = 13.7 and date = 2018-06-03 21:38:09 +0000
value = 13.5 and date = 2018-06-10 21:35:51 +0000
value = 14.3 and date = 2018-06-12 23:52:19 +0000
value = 17.2 and date = 2018-06-16 22:12:13 +0000
value = 13.4 and date = 2018-06-17 00:44:35 +0000
value = 13.4 and date = 2018-06-17 00:44:35 +0000

score 1 · Answer 1 · answered Jun 22 '18 at 02:38

You want to convert your dates into time intervals (against a set point in time) and then in the xLabelsFormatter you can turn them back into the date using that set point, and use a NSDateFormatter to stringify the date. NSDate makes this easy using 1970 as a fixed point in time. Your code for the graph would be something like this:

let dateFormatter = DateFormatter()
dateFormatter.dateStyle = .short

let graphableDatesAsDouble = customHistoricalSamples.map { $0.date.timeIntervalSince1970 }
let series = ChartSeries(graphableVales)
series.area = true
chart.xLabels = graphableDatesAsDouble
chart.xLabelsFormatter = { dateFormatter.string(from: Date(timeIntervalSince1970: $1)) }
chart.add(series)

You can change the dateStyle of the NSDateFormatter to something else, or give it a custom dateFormat (http://nsdateformatter.com helps build a format if you're unfamiliar with them).

Thank you...that's exactly along the lines of what I was thinking but this code doesn't draw anything on the graph (although on the extreme right side I can see a character so maybe it's drawing off screen? If I comment out the chart.xLabels and chart.xLabelsFormatter the values appear again. — GarySabo, Jun 22 '18 at 02:58
I added examples of the CustomHistoricalSamples that I am trying to graph — GarySabo, Jun 22 '18 at 03:13

score 0 · Answer 2 · answered May 13 '20 at 16:13

A bit late to the party, but you can also use ChartAxisValueString to actually use the date in a string format:

ChartPoint(x: ChartAxisValueString(dateStringYouWant, order:loopIndex, labelSettings: ChartDefaults.labelSettings), y: ChartAxisValueDouble(doubleValueYouWant))

score 0 · Answer 3 · answered Oct 22 '21 at 13:01

Show x axis values real in danielgindi/Charts ios

 override func viewDidLoad() {
 super.viewDidLoad()

self.lineChart.delegate = self
self.lineChart.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(values: 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)
lineChart.data = lineCh[![enter image description here][1]][1]artData
lineChart.rightAxis.enabled = false
lineChart.xAxis.drawGridLinesEnabled = false
lineChart.xAxis.labelPosition = .bottom
lineChart.xAxis.valueFormatter = IndexAxisValueFormatter(values: dataPoints)
}

How to graph dates as X Axis (Swift)

3 Answers3

Linked