Merhaba, bu hafta meslektaşım Kemal Türk kardeşimle birlikte geliştirdiğimiz CoreCharts kütüphanesinden bahsedeceğim, bu kütüphanenin hikayesi çalıştığım şirkette bir projede grafik çizimleriyle verilerin temel birşekilde gösterilmesi gerekiyordu bu nedenle bu kütüphaneyi yapma ihtiyacı doğdu.

Githubda iOS projelerinde kullanabileceğimiz chart kütüphanelerine göz attık birtane bulduk gibi oldu ancak dökümantasyonu android’e yazılmış ios için herhangi bir dökümantasyon yoktu,

bu konu hakkında bilgi almak istedim soru burada

Kütüphane kapsamlıydı güzeldi ancak bizimde vaktimiz yoktu 🥵 ayrıca ihtiyaç belliydi bizde temel bir ihtiyaç analizi çıkardık ve kendisi kullanışlı dökümantasyonu düzgün bir kütüphane yazdık, umarım sizinde beğeninizi kazanır.

CocoaPods kurulumu

ilk olarak bir single view application ios projesi oluşturun ve cocoapods kurulumunu yapın daha sonra kütüphaneyi pod olarak ekleyin ve yükleyin.

pod 'CoreCharts'

kullanmak istediğimiz view controllerda import edelim CoreCharts kütüphanesini

import CoreCharts

daha sonra storyboardu açalım ve gösterimi yapacağımız view controllera bir view ekleyelim, bu view bizim grafik verisini göstereceğimiz alan olacak.

View’ı ekledikten sonra seçelim ve Class’ını VCoreBarChart olarak ve Module alanınada CoreCharts yazalım son olarak eklemiş ve düzenlemiş olduğumuz bu view’ımızdan referans oluşturalım controllerımızda.

storyboard-ref

Şimdi tekrar controllerımızı açalım ve CoreChartViewDataSource delegate’ini uygulamak için yazalım.

Controllerımızı aşağıdaki gibi güncelleyelim.

class DemoViewController: UIViewController,CoreChartViewDataSource {

    @IBOutlet weak var barChart: VCoreBarChart!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        barChart.dataSource = self
    }

şimdi CoreChartViewDataSource‘umuzun metodlarını kullanalım, loadCoreChartData() metodunu tanımlamakla başlayalım, controllerımızı aşağıdaki gibi güncelleyelim

func loadCoreChartData() -> [CoreChartEntry] {

        var allCityData = [CoreChartEntry]()
    
        let cityNames = ["Istanbul","Antalya","Ankara","Trabzon","İzmir"]
    
        let plateNumber = [34,07,06,61,35]
        
        for index in 0..<cityNames.count {
            
            let newEntry = CoreChartEntry(id: "\(plateNumber[index])", 
                                          barTitle: cityNames[index], 
                                          barHeight: Double(plateNumber[index]), 
                                          barColor: rainbowColor())
                                          
                                          
            allCityData.append(newEntry)
            
        }
        
        return allCityData

}

Yukarıdaki kodu anlatıcak olursak:

allCityData chart kütüphanemizdeki her bir çizilecek barı CoreChartEntry ile temsil ediyor 📊, cityNames her bir sütunun altında isimlerini yazmasını istediğimiz alandaki verileri temsil ediyor, ve son olarak plaka numaralarını plateNumber‘da tutuyoruz.

daha sonra for ile her bir şehir adının adedince yeni bir corechartentry yani bar sütunu oluşturup her birine sırasıyla datalarını veriyoruz ve allCityData dizisinde tutuyoruz. loadCoreChartData() metodu data döndürdüğünde delegate tetikleniyor ve chart çizimi gerçekleşiyor.

son olarak didTouch delegate metodunu kullanarak ekranda dokunduğumuz bar ile ilgili istediğimiz bilgiyi consol ekranında görelim ve konuyu tamamlayalım.

CoreChartViewDataSource delegate’imizde tanımlı olan bu metod optional olduğu için kullanmayı geliştiriciye bıraktık, bir ekrandan bir ekrana navigate işlemi yapmak istediğinizde bu metod faydalı olacaktır.

aşağıdaki gibi bir tanımlama yapalım

func didTouch(entryData: CoreChartEntry) {
        print(entryData.barTitle)
    }

didTouch metodu CoreChartViewDataSource‘dan besleniyor yani siz loadCoreChartData() metodunu kullandığınızda buradaki dataları otomatik olarak okuyacaktır.

Yazının sonuna geldik umarım beğeneceğiniz bir konu olmuştur, kütüphaneyi birlikte geliştirmek gelişimine katkıda bulunmak isterseniz bize pr (pull request) yada issue bölümünden yaabilirsiniz.

CoreCharts kütüphanesi ve kaynak kodu:

Core Charts