# More data

For the second iteration, let's add the data for Amsterdam\
\
🔥 Create a SwiftUI file called : `AmsterdamDetailsChart`

{% tabs %}
{% tab title="Code" %}

<pre class="language-swift"><code class="lang-swift">// Create the data
// and the same BarMark as the previous section

import Charts
import SwiftUI

let amsData: [SalesSummary] = [
    .init(weekday: date(year: 2022, month: 5, day: 2), sales: 22),
    .init(weekday: date(year: 2022, month: 5, day: 3), sales: 43),
    .init(weekday: date(year: 2022, month: 5, day: 4), sales: 30),
    .init(weekday: date(year: 2022, month: 5, day: 5), sales: 75),
    .init(weekday: date(year: 2022, month: 5, day: 6), sales: 34),
    .init(weekday: date(year: 2022, month: 5, day: 7), sales: 68),
    .init(weekday: date(year: 2022, month: 5, day: 8), sales: 142)
]

<strong>struct AmsterdamDetailsChart: View {
</strong>    var body: some View {
        Chart(parisData) { element in
            BarMark(
                x: .value("Day", element.weekday),
                y: .value("Sales", element.sales)
            )
        }
    }
}

struct AmsterdamDetailsChart_Previews: PreviewProvider {
    static var previews: some View {
        AmsterdamDetailsChart()
    }
}

</code></pre>

{% endtab %}

{% tab title="Add a toggle" %}
// Create a enum for the cities\
// Add a state variable city \
// Add the SwiftUI Picker for the city to the view

**import** Charts

**import** SwiftUI

<mark style="color:orange;">**enum**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">City {</mark>

&#x20;   <mark style="color:orange;">**case**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">paris</mark>

&#x20;   <mark style="color:orange;">**case**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">amsterdam</mark>

<mark style="color:orange;">}</mark>

<br>

**let** amsData: \[SalesSummary] = \[

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 2), sales: 22),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 3), sales: 43),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 4), sales: 30),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 5), sales: 75),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 6), sales: 34),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 7), sales: 68),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 8), sales: 142)

]

<br>

**struct** AmsterdamDetailsChart: View {

&#x20;   <mark style="color:orange;">@State</mark> <mark style="color:orange;"></mark><mark style="color:orange;">**var**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">city: City = .paris</mark>

&#x20;   **var** body: **some** View {

&#x20;       <mark style="color:orange;">VStack {</mark>

&#x20;           <mark style="color:orange;">Picker("City", selection: $city) {</mark>

&#x20;               <mark style="color:orange;">Text("Paris").tag(City.paris)</mark>

&#x20;               <mark style="color:orange;">Text("Amsterdam").tag(City.amsterdam)</mark>

&#x20;           <mark style="color:orange;">}</mark>

&#x20;           <mark style="color:orange;">.pickerStyle(.segmented)</mark>

&#x20;           Chart(parisData) { element **in**

&#x20;               BarMark(

&#x20;                   x: .value("Day", element.weekday),

&#x20;                   y: .value("Sales", element.sales)

&#x20;               )

&#x20;           }

&#x20;       <mark style="color:orange;">}</mark>

&#x20;   }

}

<br>

**struct** AmsterdamDetailsChart\_Previews: PreviewProvider {

&#x20;   **static** **var** previews: **some** View {

&#x20;       AmsterdamDetailsChart()

&#x20;   }

}

```swift
import Charts
import SwiftUI

enum City {
    case paris
    case amsterdam
}

let amsData: [SalesSummary] = [
    .init(weekday: date(year: 2022, month: 5, day: 2), sales: 22),
    .init(weekday: date(year: 2022, month: 5, day: 3), sales: 43),
    .init(weekday: date(year: 2022, month: 5, day: 4), sales: 30),
    .init(weekday: date(year: 2022, month: 5, day: 5), sales: 75),
    .init(weekday: date(year: 2022, month: 5, day: 6), sales: 34),
    .init(weekday: date(year: 2022, month: 5, day: 7), sales: 68),
    .init(weekday: date(year: 2022, month: 5, day: 8), sales: 142)
]

struct AmsterdamDetailsChart: View {
    @State var city: City = .paris
    var body: some View {
        VStack {
            Picker("City", selection: $city) {
                Text("Paris").tag(City.paris)
                Text("Amsterdam").tag(City.amsterdam)
            }
            .pickerStyle(.segmented)
            Chart(parisData) { element in
                BarMark(
                    x: .value("Day", element.weekday),
                    y: .value("Sales", element.sales)
                )
            }
        }
    }
}

struct AmsterdamDetailsChart_Previews: PreviewProvider {
    static var previews: some View {
        AmsterdamDetailsChart()
    }
}
```

{% endtab %}

{% tab title="Toggle between two cities" %}
// Add a switch statement for the data variable

// replace de data for Paris for the one which toggle between the two !\
\
**import** Charts

**import** SwiftUI

<br>

**enum** City {

&#x20;   **case** paris

&#x20;   **case** amsterdam

}

<br>

**let** amsData: \[SalesSummary] = \[

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 2), sales: 22),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 3), sales: 43),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 4), sales: 30),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 5), sales: 75),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 6), sales: 34),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 7), sales: 68),

&#x20;   .init(weekday: date(year: 2022, month: 5, day: 8), sales: 142)

]

<br>

**struct** AmsterdamDetailsChart: View {

&#x20;   @State **var** city: City = .paris

&#x20;  &#x20;

&#x20;   <mark style="color:orange;">**var**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">data: \[SalesSummary] {</mark>

&#x20;       <mark style="color:orange;">**switch**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">city {</mark>

&#x20;       <mark style="color:orange;">**case**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">.paris:</mark>

&#x20;           <mark style="color:orange;">**return**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">parisData</mark>

&#x20;       <mark style="color:orange;">**case**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">.amsterdam:</mark>

&#x20;           <mark style="color:orange;">**return**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">amsData</mark>

&#x20;       <mark style="color:orange;">}</mark>

&#x20;   <mark style="color:orange;">}</mark>

&#x20;  &#x20;

&#x20;   **var** body: **some** View {

&#x20;       VStack {

&#x20;           Picker("City", selection: $city) {

&#x20;               Text("Paris").tag(City.paris)

&#x20;               Text("Amsterdam").tag(City.amsterdam)

&#x20;           }

&#x20;           .pickerStyle(.segmented)

&#x20;           Chart(<mark style="color:orange;">data</mark>) { element **in**

&#x20;               BarMark(

&#x20;                   x: .value("Day", element.weekday),

&#x20;                   y: .value("Sales", element.sales)

&#x20;               )

&#x20;           }

&#x20;       }

&#x20;   }

}

<br>

**struct** AmsterdamDetailsChart\_Previews: PreviewProvider {

&#x20;   **static** **var** previews: **some** View {

&#x20;       AmsterdamDetailsChart()

&#x20;   }

}<br>

```swift
import Charts
import SwiftUI

enum City {
    case paris
    case amsterdam
}

let amsData: [SalesSummary] = [
    .init(weekday: date(year: 2022, month: 5, day: 2), sales: 22),
    .init(weekday: date(year: 2022, month: 5, day: 3), sales: 43),
    .init(weekday: date(year: 2022, month: 5, day: 4), sales: 30),
    .init(weekday: date(year: 2022, month: 5, day: 5), sales: 75),
    .init(weekday: date(year: 2022, month: 5, day: 6), sales: 34),
    .init(weekday: date(year: 2022, month: 5, day: 7), sales: 68),
    .init(weekday: date(year: 2022, month: 5, day: 8), sales: 142)
]

struct AmsterdamDetailsChart: View {
    @State var city: City = .paris
    
    var data: [SalesSummary] {
        switch city {
        case .paris:
            return parisData
        case .amsterdam:
            return amsData
        }
    }
    
    var body: some View {
        VStack {
            Picker("City", selection: $city) {
                Text("Paris").tag(City.paris)
                Text("Amsterdam").tag(City.amsterdam)
            }
            .pickerStyle(.segmented)
            Chart(data) { element in
                BarMark(
                    x: .value("Day", element.weekday),
                    y: .value("Sales", element.sales)
                )
            }
        }
    }
}

struct AmsterdamDetailsChart_Previews: PreviewProvider {
    static var previews: some View {
        AmsterdamDetailsChart()
    }
}

```

{% endtab %}

{% tab title="Animate!" %}
//  Swift Charts works with SwiftUI animation \
\
**var** body: **some** View {

&#x20;       VStack {

&#x20;           Picker("City", selection: $city<mark style="color:orange;">.animation(.easeInOut)</mark>) {

&#x20;               Text("Paris").tag(City.paris)

&#x20;               Text("Amsterdam").tag(City.amsterdam)

&#x20;           }

&#x20;           .pickerStyle(.segmented)

&#x20;           Chart(data) { element **in**

&#x20;               BarMark(

&#x20;                   x: .value("Day", element.weekday),

&#x20;                   y: .value("Sales", element.sales)

&#x20;               )

&#x20;           }

&#x20;       }

&#x20;   }
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://betty-dev.gitbook.io/cutting-edge-swiftui-apps/start-with-charts/design-as-a-time-series/more-data.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.