How to Handle Split Data in `Charts`?

Question

Created Jun ’22

Replies 5

Boosts 0

Views 2.1k

Participants 3

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 Screen Shot 2022-06-17 at 09.06.33.png

Boost

Answer 1

zt01zg OP

Jun ’22

Poster Edit: The items to the right (red scribble) are listed in the sampleData_Future array.

0

Answer 2

UllrS OP

Jul ’22

You can try to serve all the data as one array, but add the data element to the field "come true": Bool and depending on this field specify the color of the graph.

0

Answer 3

UllrS OP

Jul ’22

You can try to serve all the data as one array, but add the data element to the field "come true": Bool and depending on this field specify the color of the graph

0

Answer 4

kbista OP

Jun ’23

@zt01zg Were you able to figure out the solution of your question ? I am also caught into similar situation where I need to have the AreaMark with two different color to represent the past and future date along the x-axis. But haven't been able to the find solution yet.

0

Answer 5

kbista OP

Jun ’23

@zt01zg Were you able to figure out the solution of your question ? I am also caught into similar situation where I need to have the AreaMark with two different color to represent the past and future date along the x-axis. But haven't been able to the find solution yet.

0

	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))
	}
	}