UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: Trying to get two barmarks on a single chart. Help! :)

Forums > SwiftUI
@flaneur7508  

Hi! I've been messing with this for a couple of hours with no progress. Basically I want a barmark chart with two bars on the X axis comparing 'visits' and 'revenue'. But I get a single barmark with both Visits and Revenue. What am I doing wrong here?

//
//  chartsLarge.swift
//

import SwiftUI
import Charts

struct Item: Identifiable {
    let id = UUID()
    let month: String
    let revenue: Int
    let visits: Int
}

var myItems = [Item]()
struct largeRevenueVisitsChart: View {

    let items:  [Item] = [
                Item( month: eAData.eaMonthName[12],
                revenue: Int(eAData.eaRevenue[12]),
                visits: Int(eAData.eaVisits[12])),

                Item( month: eAData.eaMonthName[11],
                revenue: Int(eAData.eaRevenue[11]),
                visits: Int(eAData.eaVisits[11])),

                Item( month: eAData.eaMonthName[10],
                revenue: Int(eAData.eaRevenue[10]),
                visits: Int(eAData.eaVisits[10])),

                Item( month: eAData.eaMonthName[9],
                revenue: Int(eAData.eaRevenue[9]),
                visits: Int(eAData.eaVisits[9])),

                Item( month: eAData.eaMonthName[8],
                revenue: Int(eAData.eaRevenue[8]),
                visits: Int(eAData.eaVisits[8])),

                Item( month: eAData.eaMonthName[7],
                revenue: Int(eAData.eaRevenue[7]),
                visits: Int(eAData.eaVisits[7])),

                Item( month: eAData.eaMonthName[6],
                revenue: Int(eAData.eaRevenue[6]),
                visits: Int(eAData.eaVisits[6])),

                Item( month: eAData.eaMonthName[5],
                revenue: Int(eAData.eaRevenue[5]),
                visits: Int(eAData.eaVisits[5])),

                Item( month: eAData.eaMonthName[4],
                revenue: Int(eAData.eaRevenue[4]),
                visits: Int(eAData.eaVisits[4])),

                Item( month: eAData.eaMonthName[3],
                revenue: Int(eAData.eaRevenue[3]),
                visits: Int(eAData.eaVisits[3])),

                Item( month: eAData.eaMonthName[2],
                revenue: Int(eAData.eaRevenue[2]),
                visits: Int(eAData.eaVisits[2])),

                Item( month: eAData.eaMonthName[1],
                revenue: Int(eAData.eaRevenue[1]),
                visits: Int(eAData.eaVisits[1]))
                ]

    let currencyDisplay = Locale.current.currencySymbol
    let gradient = Gradient(colors: [.black, .pink])

    var body: some View {
        NavigationView {
            VStack() {
                GroupBox (" Revenue & Visits") {
                Chart {
                    // Revenue chart
                    ForEach(items) { items in
                        let itemsRevenueCurrency = ("\(String(describing: currencyDisplay!))")
                        let itemsRevenueValue = ("\(items.revenue)")
                        let formattedRevenueValue = itemsRevenueCurrency + itemsRevenueValue
                        BarMark(
                            x: .value("Revenue", items.revenue),
                            y: .value("Month", items.month)
                        )
                        .foregroundStyle(
                            .linearGradient(
                                colors: [.mint, .green],
                                startPoint: .topTrailing,
                                endPoint: .topLeading
                                )
                        )
                        .opacity(mobVariables.mobOpacity)
                        .cornerRadius(10)

                        // Visits chart
                        BarMark(
                            x: .value("Visits", items.visits),
                            y: .value("Month", items.month)
                            )
                        .foregroundStyle(by: .value("Visits", "Month"))

                          //  .foregroundStyle(Color.purple)
                            .annotation(position: .overlay, alignment: .trailing) {
                             Text("  \(items.visits, format: .number.precision(.fractionLength(0)))")
                                        .foregroundColor(.black)
                                        .font(.system(size: 13, weight: .semibold, design: .rounded))

                            }
                            .interpolationMethod(.stepCenter)
                            .lineStyle(StrokeStyle(lineWidth: 5))
                        }
                    }
                }
            }
        }
    }
}

1      

@flaneur7508  

SOLVED. Below code to do this. I have a follow up question, i'll create a new topic for this.


import SwiftUI
import Charts

struct Item: Identifiable {
    let id = UUID()
    let month: String
    let revenue: Int
    let visits: Int
}

var myItems = [Item]()
struct largeRevenueVisitsChart: View {

    let currencyDisplay = Locale.current.currencySymbol

    var body: some View {

        let items:[Item] = [
                  Item( month: eAData.eaMonthName[12],
                  revenue: eAData.eaRevenue[12],
                  visits: eAData.eaVisits[12]),

                  Item( month: eAData.eaMonthName[11],
                  revenue: eAData.eaRevenue[11],
                  visits: eAData.eaVisits[11]),

                  Item( month: eAData.eaMonthName[10],
                  revenue: eAData.eaRevenue[10],
                  visits: eAData.eaVisits[10]),

                  Item( month: eAData.eaMonthName[9],
                  revenue: eAData.eaRevenue[9],
                  visits: eAData.eaVisits[9]),

                  Item( month: eAData.eaMonthName[8],
                  revenue: eAData.eaRevenue[8],
                  visits: eAData.eaVisits[8]),

                  Item( month: eAData.eaMonthName[7],
                  revenue: eAData.eaRevenue[7],
                  visits: eAData.eaVisits[7]),

                  Item( month: eAData.eaMonthName[6],
                  revenue: eAData.eaRevenue[6],
                  visits: eAData.eaVisits[6]),

                  Item( month: eAData.eaMonthName[5],
                  revenue: eAData.eaRevenue[5],
                  visits: eAData.eaVisits[5]),

                  Item( month: eAData.eaMonthName[4],
                  revenue: eAData.eaRevenue[4],
                  visits: eAData.eaVisits[4]),

                  Item( month: eAData.eaMonthName[3],
                  revenue: eAData.eaRevenue[3],
                  visits: eAData.eaVisits[3]),

                  Item( month: eAData.eaMonthName[2],
                  revenue: eAData.eaRevenue[2],
                  visits: eAData.eaVisits[2]),

                  Item( month: eAData.eaMonthName[1],
                  revenue: eAData.eaRevenue[1],
                  visits: eAData.eaVisits[1])
                  ]

        let stepData = [
            (period: "Revenue", data: items.map { (month: $0.month, value: $0.revenue) }),
            (period: "Visits", data: items.map { (month: $0.month, value: $0.visits) })
        ]

        NavigationView {
            VStack() {
                GroupBox ("Monthly Revenue & Visits") {
                    Chart (stepData, id: \.period) { steps in
                        ForEach(steps.data, id: \.self.month) {
                            BarMark(
                                x: .value("Visits", $0.value),
                                y: .value("Month", $0.month),
                                width: 15
                            )
                            .foregroundStyle(by: .value("Value", steps.period))
                            .opacity(mobVariables.mobOpacity)
                            .cornerRadius(10)
                            .position(by: .value("Month", steps.period))
                        }
                    }
                    .chartForegroundStyleScale([
                        "Revenue" : Color(.green),
                        "Visits": Color(.purple)])

                    .chartLegend(position: .top, alignment: .bottomTrailing)
                    .chartYAxis(.visible)
                }
            }
        }
    }
}

1      

@flaneur7508  

@Obelix . Apologies, I wasnt aware. All done!

1      

TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

Swift breaks down barriers between ideas and apps, and I want to break down barriers to learning it. I’m proud to make hundreds of tutorials that are free to access, and I’ll keep doing that whatever happens. But if that’s a mission that resonates with you, please support it by becoming a HWS+ member. It’ll bring you lots of benefits personally, but it also means you’ll directly help people all over the world to learn Swift by freeing me up to share more of my knowledge, passion, and experience for free! Become Hacking with Swift+ member.
Click here to visit the Hacking with Swift store >>
 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.