SwiftUI Tutorial for iOS: Creating Charts | raywenderlich.com

🎓 Courses & Articles
1

In this SwiftUI tutorial, you’ll learn how to build a variety of custom charts to effectively model your iOS app data to your users.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/6398124-swiftui-tutorial-for-ios-creating-charts
2

The text we are showing within the top of bar chart. If that text is too long it does not show up properly. Can you suggest how to fix that problem?GraphIssue

3

@anujtroy First I’d suggest considering if you need all the text. The labels for a chart should be easy to read on a glance. With values that are in the thousands, you probably don’t need to also show four decimal places. The project for example trims off the precipitation to one decimal place. You could likely just show the whole number and better convey the information.

If you still see the wrapping, then you will likely need to add .fixedSize() and/or .frame() attributes to give the framework a better idea of the size of the contents. Something like the following though you numbers likely will be different:

.fixedSize(horizontal: true, vertical: false)
.frame(width: 20, height: 100)
4

There is an annoying bug in this application related to navigation: select one of the locations in the first view, then go back. Try selecting the same location again and it won’t navigate to it anymore.

5

@vale_cocoa
This is actually a bug in the iOS simulators in Xcode 13.3 with NavigationViews. It works as expected on a device. The bug looks to be fixed with the Xcode 13.4 beta.

6

Thanks for the insight.

7

I really enjoyed this tutorial and I would like to access the NOAA data for an another function but am totally confused on how the api for the daily summary works. Can you provide the code you used to get the sample data? Thanks.

8

Unfortunately I have no code to share. I pulled the data for this tutorial using the tools at the site referenced in the app as a CSV file. Then I pulled it into a spreadsheet to remove the data that I didn’t need.

9

Thanks for the tutorial. I have a question:
What if I have very different values. For example data for every day of a week:
2,400,40,12000,3000,0,200
For the largest value (12000) the bar is to high and for the smallest value (2) the bar is to low.
How can i display this different values in a readable chart?
Thanks,
Thomas

10

@thbi For data like this, you might want to look at a logarithmic scale. Implementing that is a bit complex, but the idea is you’d have something like 1, 2, 3, etc. as the y-axis, but the values would really be 10^1, 10^2, 10^3, etc. You’d need to use the log10() method in Foundation to do the conversion.

1 Like
11

Thank you very much! I will give it a try…