Display Calculated Data in SwiftUI Charts ...

I previously mentioned, my application creates a [Solar Elevation] and a [Solar Azimuth] for an identifiable map location, based upon the [NOAA] calculations. The results happen to be accurate to the [Hour:Minute:Second], compared to NOAA calculations. The [Compass] view illustrates that success, at the selected location with the requested [Time of Day], and [Location].

I focused on the [Solar Elevation] first to determine how I could translate the calculated data to be displayed in a SwiftUI Chart. My previous attempts to create an [Appended Struct] to display the calculated data in the [Chart] failed miserably, although I managed to correct my error to properly append the [Struct]. As noted, every SwiftUI Chart example I discovered always engaged the [Chart Data] with [Mock Data] to interact with the [Chart]. The examples did not solve my question, but the accumulated information generated ideas for me to try.

NOTE :: For the moment, I have not discovered a solution with the following method to display the chart’s calculated [Y-Axis] data with a [Loli-pop], but still exploring.

So to possibly resolve my issue, I did the following to display the calculated data in a SwiftUI Chart with my very obscure, but somewhat tedious effective method. Please read my comment as too many incremental steps, and possibly TL:TR … :]

I prepared the [Calculated Data] ::

1.	  The application’s [MySunElevationChart_ViewController] manually identified each six minute time interval.
2.	Converted each six minute interval into a 24 hour fraction.
3.	Converted the fraction into a formatted date string.
4.	Appended each formatted date string to the [theTimeOfDayArray].
5.	Assigned the [theTimeOfDayArray] to a [Struct] in the [Constants Folder].
6.	The application’s [MySunElevationChart_ViewController] calculated the [Solar Elevation] with each six minute interval date fraction.
7.	  Appended each calculated [Solar Elevation] to the [theCalculatedSunElevationArray].
8.	Assigned the [theCalculatedSunElevationArray] to a [Struct] in the [Constants Folder].

I decided to modify my application’s original static value [MOCK DATA STRUCT] with the embedded [Calculated Data] ::

1.	  The application’s [MySunElevationChart_ViewController] retrieved the [theTimeOfDayArray].
2.	Isolated and extracted each [Formatted String] at a specified index.
3.	Assigned each extracted string value to a [Struct] in the [Constants Folder].
4.	The application’s [MySunElevationChart_ViewController] retrieved the [theCalculatedSunElevationArray].
5.	Isolated and extracted each [Solar Elevation] at a specified index.
6.	Assigned each extracted [Solar Elevation] value to a [Struct] in the [Constants Folder].
7.	  The application refactored the static value [Mock Chart Data] with each [Formatted String Struct Value], and each [Solar Elevation Struct Value].
8.	The application transfered the [Refactored Mock Data] to the [Chart Content View].

NOTE :: I created several [Structs] to prepare the application to receive and transfer the [Calculated Solar Elevation Values] to the [SwiftUI Chart].

I created [Structs] for the [Solar Time Of Day] and the [Solar Elevation] in the [Constants Folder]. I created [Structs] for the [Solar Time Of Day Array] and the [Solar Elevation Array] in the [Constants Folder]. I created [Structs] for each extracted [Solar Elevation Time] and each extracted [Solar Elevation] in the [Constants Folder] for the refactored [MOCK DATA STRUCT].

//   [For example the Time Structs]

struct SolarElevationTime_0 {
    static var theSolarElevationTime_0: String = ""
}   //  End of [struct SolarElevationTime_0]

//   to the end of the data …

struct SolarElevationTime_238 {
    static var theSolarElevationTime_238: String = ""
}   //  End of [struct SolarElevationTime_238]

//   [For example the Solar Elevation Structs]

struct SolarElevation_0 {
    static var theSolarElevation_0: Double = 0
}   //  End of [struct SolarElevation_0]

//   to the end of the data …

struct SolarElevation_238 {
    static var theSolarElevation_238: Double = 0
}   //  End of [struct SolarElevation_238]

I created a separate function, within the [MySunElevationChart_ViewController] to isolate, and extract each [Time of Day] from the [theTimeOfDayArray] with the following code ::

//  Identify the [TIME OF DAY ARRAY] from the [CONSTANTS FOLDER]
let someRequiredTimeOfDayArray = SolarElevationRequiredTimeOfDayDataArray.theSolarElevationRequiredTimeOfDayDataArray

let theTimeOfDayValueAtIndex_0 = (someRequiredTimeOfDayArray[0])
//   Transfer the constant to the [Constants Folder Struct]
SolarElevationTime_0.theSolarElevationTime_0 = theTimeOfDayValueAtIndex_0

//   to the end of the data …

let theTimeOfDayValueAtIndex_238 = (someRequiredTimeOfDayArray[238])
//   Transfer the constant to the [Constants Folder Struct]
SolarElevationTime_238.theSolarElevationTime_238 = theTimeOfDayValueAtIndex_238

I created a separate function, within the [MySunElevationChart_ViewController] to isolate, and extract each [Solar Elevation] from the [theCalculatedSunElevationArray] with the following code ::

//  Identify the [SOLAR ELEVATION ARRAY] from the [CONSTANTS FOLDER]
let someRequiredSolarElevationArray = SolarElevationRequiredDataArray.theSolarElevationRequiredDataArray

let theSolarElevationValueAtIndex_0 = (someRequiredSolarElevationArray[0])
//   Transfer the constant to the [Constants Folder Struct]
SolarElevation_0.theSolarElevation_0 = theSolarElevationValueAtIndex_0

//   to the end of the data …

let theSolarElevationValueAtIndex_238 = (someRequiredSolarElevationArray[238])
//   Transfer the constant to the [Constants Folder Struct]
SolarElevation_0.theSolarElevation_238 = theSolarElevationValueAtIndex_238

The application transfers and inserts the [Calculated Chart Data] to the application’s [Mock Data Struct]. I refactored the application’s original static value [Mock Data Struct] in the [HourlySunElevation_MockChartData] Swift File to receive the calculated [Struct] constants.

struct Value: Identifiable, Equatable, Hashable {

    let id = UUID()
    let theRequiredTimeOfDay: String
    let theCalculatedElevation: Double
    
    static func theSunElevationMockData() -> [Value] {
        return [Value(theRequiredTimeOfDay: SolarElevationTime_0.theSolarElevationTime_0, theCalculatedElevation: SolarElevation_0.theSolarElevation_0), Value(theRequiredTimeOfDay: SolarElevationTime_1.theSolarElevationTime_1, theCalculatedElevation: SolarElevation_1.theSolarElevation_1),
//	:: To the end of the data ::
Value(theRequiredTimeOfDay: SolarElevationTime_238.theSolarElevationTime_238, theCalculatedElevation: SolarElevation_238.theSolarElevation_238)]
    }   //  End of [static func theSunElevationMockData() -> [Value]]
}   //  End of [struct Value: Identifiable, Equatable, Hashable]

The application’s [Content View] receives and presents the calculated [Chart Data] ::

Continued ::

NOTE :: I am able to engage two different methods to display the calculated [Chart Data].

NOTE :: Both methods properly illustrate the [Chart Data].

NOTE :: As to which method would be best to engage the chart’s [Loli-pop], I do not know at this moment.

The [First Method ::

The application’s [Content View] calls the [MOCK Data] to display the [Chart] with the following code ::

struct SunElevationChartContentView: View {
    //  Identify the refactored [SWIFT CHARTS MOCK DATA]
    @State private var overallData = Value.theSunElevationMockData()
    var body: some View {
        //  Create the [CHART]
        VStack {
            Chart(overallData) {
                //  Display the [SOLAR ELEVATION DATA]
                LineMark(
                    x: .value("h:m:s", $0.theRequiredTimeOfDay),
                    y: .value("Elevation", $0.theCalculatedElevation)
                )
                //  A parameter for the Catmull-Rom spline. Use [0] for a [Uniform Spline].
                .interpolationMethod(.catmullRom(alpha: 0))
                .foregroundStyle(.yellow)
                .lineStyle(StrokeStyle(lineWidth: 10))
                .opacity(1.00)
            }   //  End of [Chart(overallData)]
        }   //  End of [VStack]
    }   //  End of [var body: some View]
}   //  End of [struct SunElevationChartContentView: View]

The SwiftUI Chart displays the [Calculated Solar Elevation Values] for each [Time of Day].

The [Second Method ::

The application’s [Content View] calls the [MOCK Data] to display the [Chart] with the following code ::

struct SunElevationChartContentView: View {
    //  Identify the refactored [SWIFT CHARTS MOCK DATA]
    @State private var overallData = Value.theSunElevationMockData()
    var body: some View {
        //  Create the [CHART]
        VStack {
            Chart {
                ForEach(overallData) { dataPoint in
                    //  Display the [SOLAR ELEVATION DATA]
                    LineMark(
                        x: .value("h:m:s", dataPoint.theRequiredTimeOfDay),
                        y: .value("Elevation", dataPoint.theCalculatedElevation)
                    )
                    //  A parameter for the Catmull-Rom spline. Use [0] for a [Uniform Spline].
                    .interpolationMethod(.catmullRom(alpha: 0))
                    .foregroundStyle(.yellow)
                    .lineStyle(StrokeStyle(lineWidth: 10))
                    .opacity(1.00)
                }   //  End of [ForEach(overallData) { dataPoint in]
            }   //  End of [Chart]
        }   //  End of [VStack]
    }   //  End of [var body: some View]
}   //  End of [struct SunElevationChartContentView: View]

The SwiftUI Chart displays the [Calculated Solar Elevation Values] for each [Time of Day].

As a side note, the above [Content View Code] methods do not show the incremental [Structs] to configure the [Chart] to show the [Labels], the [CGRect Vertical Lines], and the [CGRect Horizontal Lines].

For the moment, complete with my last coding issue, I am still trying to determine how to properly engage a [Chart Loli-pop] to display the individual [Solar Elevation] values. I am sure I shall discover a method to present the chart’s [Calculated Data], by employing the [Chart Loli-pop] in the future, using the [First Chart Content View Method], or the [Second Chart Content View Method]. This solution is still a mystery to me, where I did not completely resolve my question … :]

As always, thank you for your time reviewing my [Chart Data] issue … :]

Best regards, jim_k

The resultant calculated Chart Images ::

Paris ::

Suva Fiji ::

Queenstown NZ ::

Cairo ::

Melbourne ::

London ::