Post

Replies

Boosts

Views

Activity

Reply to Display Calculated Data in SwiftUI Charts ...
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 ::
Topic: UI Frameworks SubTopic: SwiftUI Tags:
Mar ’25
Reply to 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 ::
Topic: UI Frameworks SubTopic: SwiftUI Tags:
Mar ’25
Reply to Display Calculated Data in SwiftUI Charts ...
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 ::
Topic: UI Frameworks SubTopic: SwiftUI Tags:
Mar ’25