Design an effective chart

RSS for tag

Discuss the WWDC22 Session Design an effective chart

Posts under wwdc2022-110340 tag

2 Posts

Post

Replies

Boosts

Views

Activity

How to Handle Split Data in `Charts`?
I have a dataset I want to have split between past/historic data and future/predicted data. The values for the predicted data take the last value from pastData and apply a decay function to show how much of something is left. I have the data split into two arrays (sampleData_History and sampleData_Future); I have also attempted this with the data combined (sampleData) and tried a conditional in the .foregroundStyle property. Chart { ForEach(sampleData_History) { item in RuleMark(x: .value("Now", Date.now, unit: .hour)).foregroundStyle(.orange) LineMark( x: .value("time", item.date, unit: .hour), y: .value("mg", item.amount) ) .foregroundStyle(Color.blue) AreaMark( x: .value("time", item.date, unit: .hour), y: .value("mg", item.amount) ).foregroundStyle(Color.teal.opacity(0.2)) } ForEach(sampleData_Future) { item in LineMark( x: .value("time", item.date, unit: .hour), y: .value("mg", item.amount) ) .foregroundStyle(Color.red) AreaMark( x: .value("time", item.date, unit: .hour), y: .value("mg", item.amount) ).foregroundStyle(Color.red.opacity(0.2)) } } The above code yields the screenshot below. In the ideal case, I'd like to have everything AFTER the RuleMark line be a different color. Am I missing something? Where might I look to figure this out? EDIT: I have also tried separating them into series to no avail
5
0
2.2k
Jun ’23
How to show value totals in BarMark Charts
In the WWDC22 video "Design an effective chart", at timestamp 1:22, it shows 4 screenshots with different charts. In the 3rd screenshot from left, it shows the most sold pancake as well as sales of all the different types of pancake. The number of pancakes sold is pinned to the end of each bar, like 278, 247, and so on. How do you show the number like that?
1
0
1.2k
Jul ’22
How to Handle Split Data in `Charts`?
I have a dataset I want to have split between past/historic data and future/predicted data. The values for the predicted data take the last value from pastData and apply a decay function to show how much of something is left. I have the data split into two arrays (sampleData_History and sampleData_Future); I have also attempted this with the data combined (sampleData) and tried a conditional in the .foregroundStyle property. Chart { ForEach(sampleData_History) { item in RuleMark(x: .value("Now", Date.now, unit: .hour)).foregroundStyle(.orange) LineMark( x: .value("time", item.date, unit: .hour), y: .value("mg", item.amount) ) .foregroundStyle(Color.blue) AreaMark( x: .value("time", item.date, unit: .hour), y: .value("mg", item.amount) ).foregroundStyle(Color.teal.opacity(0.2)) } ForEach(sampleData_Future) { item in LineMark( x: .value("time", item.date, unit: .hour), y: .value("mg", item.amount) ) .foregroundStyle(Color.red) AreaMark( x: .value("time", item.date, unit: .hour), y: .value("mg", item.amount) ).foregroundStyle(Color.red.opacity(0.2)) } } The above code yields the screenshot below. In the ideal case, I'd like to have everything AFTER the RuleMark line be a different color. Am I missing something? Where might I look to figure this out? EDIT: I have also tried separating them into series to no avail
Replies
5
Boosts
0
Views
2.2k
Activity
Jun ’23
How to show value totals in BarMark Charts
In the WWDC22 video "Design an effective chart", at timestamp 1:22, it shows 4 screenshots with different charts. In the 3rd screenshot from left, it shows the most sold pancake as well as sales of all the different types of pancake. The number of pancakes sold is pinned to the end of each bar, like 278, 247, and so on. How do you show the number like that?
Replies
1
Boosts
0
Views
1.2k
Activity
Jul ’22