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 ::

Loli-pop Update ::

I believe I resolved my [Loli-pop] SwiftUI Chart issue with the following steps ::

1.	  Created a [Struct] to hold the identified [Solar Elevation Y-Axis] value in the application’s [Constant Folder].
2.	Created a [State Variable] to [Bind] the chart’s [rawSelectedTimeOfDay].
3.	Created a [Function] to return a [Double] from the [Mock Data] for the identified [Calculated Solar Elevation].
4.	Created the [Loli-pop] in the [Chart] to display the identified [Calculated Solar Elevation] data.
5.	Implemented the [.chartXSelection] modifier to engage the [Drag Gesture].
6.	Activated the [.chartXSelection :: .onChange] to identify the [Drag Gesture’s newValue].
7.   The application calls the [Function] to return a [Mock Data Double] for the identified [Drag Gesture’s newValue].
8.	The [.onChange] transfers the identified [newValue] to a [Constant Folder Struct].
9.	The [Loli-pop] retrieves the identified [newValue] from the [Constant Folder Struct].
10. The application formats the [newValue] to the required decimal places.
11.	The application displays the [Loli-pop] with each new [Drag Gesture Value].

//  MARK: Create the [Struct] to hold the identified [Solar Elevation] in the [Constant Folder].
struct VerifyTheChartSolarElevationYAxisValue {
    static var theVerifyTheChartSolarElevationYAxisValue: Double = 0.0
}   //  End of [struct VerifyTheChartSolarElevationYAxisValue]

//  MARK: Prepare the [CONTENT VIEW]
struct SunElevationChartContentView: View {

    @State private var rawSelectedTimeOfDay: String? = nil
    @State private var overallData = Value.theSunElevationMockData()
    @State private var offsetX = 0.0
    @State private var offsetY = 0.0

    func getYValueForX(xValue: String) -> Double? {
        for dataPoint in overallData {
            if dataPoint.theRequiredTimeOfDay == xValue {
                return dataPoint.theCalculatedElevation
            }
        }
        return nil
    }   //  End of [func getYValueForX(xValue: String) -> Double?]
    
     //  MARK: Prepare the [BODY VIEW]
     var body: some View {
        VStack {
            Chart {
                ForEach(overallData) { dataPoint in
                    LineMark(
                        x: .value("h:m:s", dataPoint.theRequiredTimeOfDay),
                        y: .value("Elevation", dataPoint.theCalculatedElevation)
                    )   //  End of [LineMark]
                    .interpolationMethod(.catmullRom(alpha: 0))
                    .foregroundStyle(.yellow)
                    .lineStyle(StrokeStyle(lineWidth: 10))
                    .opacity(1.00)

                    //  [Original Chart Format Code]

                    //  MARK: Identify and display the [CHART Loli-pop].
                    if let rawSelectedTimeOfDay {
                        RuleMark(x: .value("Selected", rawSelectedTimeOfDay))
                        //  MARK: Set the RuleMark [LINE STYLE].
                        .foregroundStyle(.teal)
                        .opacity(0.8)
                        .lineStyle(.init(lineWidth: 2, miterLimit: 2, dash: [2], dashPhase: 5))
                        .annotation(position: .top, overflowResolution: .init(x: .fit(to: .chart), y: .disabled)) {
                            VStack(spacing: 4) {
                                Text("Solar Elevation")
                                .font(.system(size: 16, weight: .bold, design: .default))
                                .foregroundStyle(.white)
                                //  MARK: Retrieve and identify the [SOLAR ELEVATION VALUE] to [FORMAT] from the [Constants Folder].
                                let solarElevation_Value: Double = VerifyTheChartSolarElevationYAxisValue.theVerifyTheChartSolarElevationYAxisValue
                                //  MARK: Convert the [SOLAR ELEVATION VALUE] to a [STRING].
                                //  MARK: Set the [STRING FORMAT] to display [Four Decimal Places].
                                let solarElevation_StringValue = String(format: "%.4f", solarElevation_Value)
                                //  MARK: Display the [Converted Double Solar Elevation Text Value] as a [STRING].
                                Text("\(solarElevation_StringValue)º")
                                .font(.system(size: 12, weight: .bold, design: .default))
                                .foregroundStyle(.teal)
                                //  MARK: Show the selected chart [Time of Day].
                                Text("\(rawSelectedTimeOfDay)")
                                .font(.system(size: 12, weight: .bold, design: .default))
                                .foregroundStyle(.orange)
                            }
                            .padding(12)
                            .frame(width: 140, height: 80)
                            .background(RoundedRectangle(cornerRadius: 4).fill(LinearGradient(gradient: Gradient(colors: [Color(.systemBlue), Color(.black)]), startPoint: .top, endPoint: .bottom)).stroke(.black, lineWidth: 6).multilineTextAlignment(.center))
                            //  MARK: Position the [Loli-pop Display Rectangle] in the [CHART].
                            .offset(x: offsetX - 0, y: offsetY - (-110))
                        }   //  End of [.annotation]
                    }   //  End of [if let rawSelectedTimeOfDay]
                }   //  End of [ForEach(overallData) { dataPoint in]
                //  Set the [Chart Frame].
                .frame(width: 1088, height: 660)
                .padding(.top, 10)
                .padding(.bottom, 4)
                .padding(.leading, 4)
                .padding(.trailing, 4)

                //  MARK: Identify the [CHART MODIFIER] to engage the [DRAG GESTURE].
                .chartXSelection(value: $rawSelectedTimeOfDay)

                //  MARK: Activate [.onChange].
                .onChange(of: rawSelectedTimeOfDay, { oldValue, newValue in
                    //  MARK: Activate [getYValueForX] function to identify and retrieve the [Solar Elevation].
                    //  MARK: Create a [Default Value] if [rawSelectedTimeOfDay] selection does not exist.
                    if let theRequiredYAxisValue = getYValueForX(xValue: newValue ?? "00:06:00") {
                        //  MARK: Assign [Solar Elevation] to a [Constant] in the [CONSTANT FOLDER].
                        VerifyTheChartSolarElevationYAxisValue.theVerifyTheChartSolarElevationYAxisValue = theRequiredYAxisValue
                    }   //  End of [if let theRequiredYAxisValue = getYValueForX(xValue: newValue ?? "00:06:00")]
                })  //  End of [.onChange]
            }   //  End of [Chart]
        }   //  End of [VStack]
    }   //  End of [var body: some View]
}   //  End of [struct SunElevationChartContentView: View]

Paris ::