Flutter’a CSV dosyasındaki veriyle grafik çizmek
Öncelikle herkese merhabalar. İlk yazım ile karşınızdayım. Ben Burak. DSC Celal Bayar Core Member ve Yazılım Mühendisliği 1. sınıf öğrencisiyim. Yaklaşık 5 aydır Flutter ile uğraşmaktayım ve bugün sizlere CSV dosyası ile maceramı anlatmak için burdayım. Hadi Başlayalım :)
Öncelikle daha yeni olduğum için pub.dev sitesindeki grafik kütüphanelerini araştırdım. Görselliği ile dikkatimi çeken fl_chart adındaki kütüphaneyi buldum.
Bu kütüphanedeki örnek grafikleri incelediğimde renklerin ve animasyonların tatlı bir şekilde grafiklere koyulduğunu gördüm. Kütüphanemizi karar verdikten sonra başladım örnek kodlarını incelemeye
Amacım CSV dosyasındaki sayısal verileri grafiğe geçirmek olduğundan çizgi grafiği kullanmayı tercih ettim. Kodları incelerken kafamda çalışma şekli oturmaya başladı. Örnek çizgi grafiğin kodlarından bir parça
Buradaki önemli olanlara birlikte bakalım
tooltipBgColor: Bu özellik grafikteki çizginin üstüne basıldığında gösterilecek yazının arkadaki rengini temsil ediyor.
gridData : Bu kısımdaki show değeri grafiğin arkasındaki ızgara çizgilerinin gösterilip gösterilmeyeceğini belirliyor.
titlesData : İçine grafiğin kenarlarındaki bilgilendirme metinlerini ayarladığımız kısım.
titlesData içindeki getTitles : Aşağıda verdiğiniz maksimum ve minimum x ve y değerlerine (maxX, maxY, minX, minY) göre x ve y eksenini parçalara ayırıyor ve o parçalardaki numaralara siz istediğiniz değeri return ederek koyuyorsunuz.
bottomTitles ve leftTitles özelliklerini ve return değerlerini vererek örnekteki gibi bir şablon oluşturuyorsunuz.
borderData: Kısmında ise çerçevenizin özelliklerini yazıyorsunuz.
lineBarsData(List<LineChartBarData>): Burada ise çizilmesini istediğiniz çizgileri liste olarak veriyorsunuz.
Sıra artık grafikteki çizgileri çizmekte. Bunun içinde LineChartBarData oluşturuyoruz
Ben biraz daha açık olsun diye normalde olan 3 çizgi yerine 1 çizgi kalıcak şekilde sadeleştirdim. Peki burdaki kelimeler ne anlama geliyor hep birlikte bakalım
FLSpot: fl_chart kütüphanesinden gelen, x ve y koordinatlarını girerek nokta belirlediğimiz bir class.
spots: Çizeceğimiz çizginin geçeceği noktaları koyduğumuz ve FLSpot listesi alan kısım.
isCurved: Bu özellik sayesinde çizgilerimizin kıvrımlarının keskin veya yumuşak olup olmayacağını belirliyoruz.
colors: Bu kısımda ise çizgimizin renklerini belirliyoruz. Birden fazla renk verildiğinde rengi sırayla çizgide gösteriyor.Örnek olarak sadece kırmızı ve kırmızı-mavi birlikte verelim
barWidth: Bu kısımda çizgimizin kalınlığını belirliyoruz.
isStrokeCapRound: Bu özellik çizgimizin iki ucunu keskin veya yumuşak şekilde çizilip çizilmeyeceğine karar veriyoruz
dotData: Bu kısımdaki show değeri grafiğinizdeki kıvrımlarda nokta olup olmayacağını kontrol eder.(Noktaların daha da belli olması için barWidth değerini 2 yaptım)
belowBarData: Bu kısımdaki show özelliği çizginin altındaki alanın taralı olup olmayacağını belirler.
Evet uzun bir yazıyla grafiğin nasıl çizileceğini -en azından çizgi- anladığımızı düşünüyorum. Şimdi asıl eğlenceli kısma CSV dosyasındaki veriyi okuma kısmına geldik.
Öncelikle bir adet CSV dosyası oluşturuyoruz. Bu yazı için ben medium.csv dosyasını oluşturdum ve içini rastgele sayısal verilerle doldurdum.
Bizim grafiğimizin verileri olacak olan 10 adet noktamız bu sayılar olarak belirledik. Bunu oluşturduktan sonra dosya içeriğini çekmekle amacımıza bir adım daha yaklaşalım.
Şöyle kısa ama bilinmeyen kelimelerin çok olduğu bir kod ile başlayalım. Burada öncelikle file değişkeninde dosyamızın dosya yolunu yapıştırıyoruz. (Bende sadece uzun halini kabul etti)
inputStream ise dosyamızı açıp okuma işlemlerini yaptırdığımız değişken olarak tutuluyor.
inputStream.transform(utf8.decoder) kısmında baytlar UTF-8'e dönüştürülüyor.
inputStream.transform(LineSplitter()) ile gelen veri satır satır bölünüyor.
listen ise satır satır veriyi foreach döngüsü gibi bize getirip kullanmamıza olanak sağlıyor. Ancak foreach’ten farklı olarak onDone metodu ile bittiğini onError metodu ile hata aldığımızı anlayabiliyoruz.
Bu fonksiyonumuzu initState içine yazıp projemizi çalıştırdığımız zaman CSV dosyamızdaki verinin ; (sizde , de olabilir) ile ayrılmış halini konsolumuzda görüyoruz.
Fakat biz sadece sayıları istediğimizden, önce gelen satırları ; ile ayırıp list olarak alıyoruz.
var row = line.split(';');
print(row);Şeklinde row değişkenini yazdırdığımız zaman bize list olarak verilerimiz gelmiş oluyor
Fakat bize ilk elemanları lazım olduğundan dolayı gelen listenin 0. indisindeki veriyi alıyoruz.
var row = line.split(';');
String data = row[0];
print(data);Data değişkenimizi konsola yazdırarak gerekli verileri almış oluyoruz.
Grafiğimiz bizden FLSpot listesi istediğinden bizde List<FLSpot> şeklinde spotList tanımlıyoruz. Ve bu listeyi bizim verilerimizle doldurulmuş birden çok FLSpot classlarıyla dolduruyoruz.
Foreachte de olduğu gibi indis numaralarımıza ulaşamadığımızdan listen metodunun dışında bir counter tanımlayarak her satırı döndüğünde bir arttırıyorum ve böylelikle noktalarımızın X ekseninde ki kısmıda tamamlanmış oluyor. Y eksenine de CSV dosyamızdan gelen verileri koyarak işlemi tamamlıyoruz.
Fazladan, yükleme kısmında boş kalmasın diye isLoading adında değişken tanımladım. Başta true işlem bittiğinde ise false değerini alarak yükleme işlemini simule etmiş oluyoruz.
İlk gelen verimiz ‘Medium’ kelimesi olduğundan ve double’a dönüşmeyeceğiden dolayı kendimce böyle bir çözüm ürettim. Burada gelen veri eğer double’a dönüştürülebiliyorsa if içine girip spotList’e ekleniyor. Eğer gelen veri double’a dönüştürülemiyorsa (örneğimizde bu veri Medium kelimesi) null dönüyor ve spotList’e eklenmiyor.
CSV dosyamızı okuma işlemini bitirdik. Son olarak grafikte gerekli X ve Y eksenlerinin maksimum ve minimum değerlerini güncelleyip switch case yapısınıda ayarlarsak işimiz bitmiş oluyor.
Çok uzun bir yazı oldu. Ama ben ilk yazım olmasına rağmen çok eğlendim. Umarım okurken siz de eğlenirsiniz. Başka yazılarda görüşmek üzere…
