1. Line Chart Elementine Genel Bakış 

Line Chart elementi, zaman içinde değişen verilerinizi görsel olarak analiz etmenin etkili bir yolunu sunar. Veri noktalarının birbirine çizgilerle bağlanması sayesinde artışlar, düşüşler, dalgalanmalar ve uzun vadeli eğilimler kolayca gözlemlenebilir. Zaman serisi verileri, performans analizleri, kullanıcı davranışı takibi ve trend raporlamaları için ideal bir grafik türüdür. 

Line Chart elementi hem web hem de mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Zaman içindeki veri eğilimlerini analiz etmek (ör. günlük, haftalık, aylık veya yıllık değişimler)
• Performans ölçümlerini takip etmek (ör. sistem yanıt süreleri, günlük aktif kullanıcı sayıları, işlem hacmi)
• Birden fazla veri serisini karşılaştırmak (ör. farklı departman, ürün veya kategori performansları)
• Trend analizi yapmak (ör. artış–düşüş dönemlerini belirleme, sezonluk değişimleri inceleme)
• Finansal verileri izlemek (ör. gelir–gider dalgalanmaları, endeks değişimleri, kur hareketleri)
• Ürün, kullanıcı veya işlem bazlı zaman serisi verilerini görselleştirmek

2. Temel Özellikler

• Zaman serisi verilerinin çizgilerle görselleştirilmesi. Veri noktalarının birbirine bağlanması sayesinde eğilimler açık şekilde görülebilir.
• Birden fazla veri serisinin aynı grafik üzerinde gösterilebilmesi. Farklı kategorileri veya kaynakları tek grafikte karşılaştırmak için kullanılabilir.
• Trend, artış ve düşüş hareketlerinin kolay yorumlanabilmesi. Sistem yükü, satış hacmi, trafik değişimi gibi metriklerde hızlı analiz sağlar.
• X (zaman) ve Y (değer) eksenlerinin özelleştirilebilmesi. Tarih formatları, kategori etiketleri ve eksen değer skalaları düzenlenebilir.
• Renk, çizgi kalınlığı, nokta stili ve opaklık gibi görsel ayarların özelleştirilebilmesi
• Veri kaynağından dinamik olarak grafik verisi yükleme. Aksiyonlar üzerinden gelen verilerle grafik gerçek zamanlı güncellenebilir.
• SQL, REST API veya Managed DB aksiyonlarıyla tam uyumluluk

2.1. Element Ayarları (Properties)

Line Chart elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden grafik veri kaynaklarını, tooltip yapılandırmalarını, çizgi görünüm ayarlarını ve eksen yapılandırmalarını ayrıntılı şekilde tanımlayabilirsiniz. Aşağıdaki tüm ayarlar madde madde açıklanmıştır.

Datasource

• Datasource Action: Grafikte görüntülenecek verileri getiren aksiyondur. Veri yüklemesi bu aksiyon çalıştırıldığında gerçekleşir.

Datasource’a bir aksiyon bağlanmadığında aşağıdaki veri alanı ayarları görünmez.

Veri Alanı Eşleştirmeleri

• Data Label: Grafiğin ana veri setine ait başlıktır. Legend ve tooltiplerde görüntülenir.
• Tooltip Custom Title Data Label: Tooltip içinde başlık olarak gösterilecek veri alanını tanımlar. Kullanıcı veri noktası üzerine geldiğinde görünen başlığı belirler.
• Tooltip Custom Content Data Label: Tooltip içeriğinde açıklama veya ek veri olarak gösterilecek alanı belirtir.
• Multi Tooltip Content Fields: Tooltip içinde birden fazla veri alanını aynı anda göstermenizi sağlar. Çoklu veri setlerinde detaylı analiz için idealdir.
• Data Field: Ana veri serisinin bağlandığı alandır. Çizgi, bu veri noktaları üzerinden oluşturulur.
• Data Bg Color: Ana veri serisine ait çizgi veya nokta rengini belirler. Hex formatında renk değerleri desteklenir.
• Second Data Field: İkinci bir veri serisini grafikte göstermek için kullanılır. Çoklu çizgi grafiklerinde farklı kategorilerin karşılaştırılması için uygundur.
• Second Data Bg Color: İkinci veri serisine ait çizgi veya nokta rengini belirler.
• Third Data Field: Üçüncü veri serisini eklemek için kullanılır. Çoklu trend analizlerinde kullanılabilir.
• Third Data Bg Color: Üçüncü veri serisinin çizgi/nokta rengini belirler.

Legend

• Legend Position: Legend’ın grafikte nerede görüneceğini belirler. Seçenekler:
  
  • Top
  • Bottom
  • Right
  • Left

Eksen Ayarları

• Left Axis (Y Ekseni): Y ekseni değerlerinin gösterilip gösterilmeyeceğini kontrol eder.
• Right Axis (X Ekseni): X eksenindeki kategori/tarih değerlerinin görünürlüğünü belirler.

Değer ve Başlangıç Ayarları

• Begin At Zero: Y ekseninin sıfır noktasından başlamasını sağlar. Özellikle pozitif–negatif veri olmayan grafiklerde önerilir.
• Max Y Axis Value: Y ekseninin üst sınırını manuel olarak belirlemenizi sağlar. Grafik ölçeklendirmesini kontrol etmek için kullanılır.

Veri Etiketi (Data Label) Ayarları

• Show Data Labels: Veri noktaları üzerinde etiketlerin görünmesini sağlar.
• Data Label Formatter: Etiketlerin formatını belirler. Para, yüzde, ondalık gibi formatlar desteklenir.
• Data Label Position: Veri etiketlerinin veri noktası çevresinde hangi konumda görüntüleneceğini belirler. Yoğun grafiklerde etiketlerin üst üste binmesini önlemek veya tasarımı daha okunabilir hale getirmek için kullanılır. Desteklenen konumlar:

• Top: Etiketler veri noktasının üstünde gösterilir.
• Center: Etiketler veri noktasının tam üzerinde (merkezde) gösterilir.
• Bottom: Etiketler veri noktasının altında gösterilir.

Çizgi Görünüm Ayarları

• Line Color: Çizgi rengini belirler. Her veri serisi için farklı renk seçilebilir.
• Line Thickness: Çizgi kalınlığını ayarlar.
• Line Dot Width: Çizgi üzerindeki veri noktalarının (dots) genişliğini belirler. Veri yoğunluğuna göre artırılabilir veya azaltılabilir.

2.2. Elemente Eklenebilen Aksiyonlar

Line Chart elementi, veri görselleştirmeye yönelik pasif bir grafik bileşeni olduğu için kullanıcı etkileşimiyle aksiyon tetikleme özelliği bulunmaz. Bu nedenle element seçildiğinde ADD ACTION butonu görünmez ve Line Chart’a özel bir tetikleyici (trigger) eklenemez.

Line Chart’ın aksiyon yapısı aşağıdaki şekilde işler:

• Line Chart üzerinde kullanıcı tıklaması, nokta seçimi veya çizgi üzerine gelme (hover) aksiyon tetiklemez.
• Grafiğin güncellenmesi, Line Chart’ın bağlı olduğu Datasource Action’ın dışarıdan tetiklenmesi ile gerçekleşir.
• Kullanıcı etkileşimli senaryolar (örn. “kullanıcı tarih seçsin, grafik değişsin”) doğrudan Line Chart üzerinden değil, Button, Radio Group gibi elementlere aksiyon tanımlanarak yönetilir.
• Line Chart yalnızca veriyi temsil eder; kendi içinden işlem başlatmaz. 

Line Chart üzerine aksiyon eklenemez. Tüm güncellemeler ve kullanıcı etkileşimleri, grafiğin veri kaynağını tetikleyen diğer UI elementleri üzerinden yönetilir.

3. Line Chart Elementi Nasıl Kullanılır? 

Bu bölümde Line Chart elementinin uçtan uca kullanımını örnek bir senaryo üzerinden ele alacağız.

Senaryo: Mobil Uygulama Performans Takibi

Bir mobil uygulamanın günlük kullanım istatistiklerini takip etmek için Line Chart kullanılır.

Senaryoda:

• Günlük aktif kullanıcı sayısı (Daily Active Users)
• Uygulama açılış sayısı (Open Count)
  Line Chart üzerinde iki ayrı veri serisi olarak gösterilecektir.
• Kullanıcı, başlangıç ve bitiş tarihlerini seçerek SQL üzerinde filtreleme yapabilir ve grafik yalnızca bu tarih aralığındaki kullanım verilerini gösterir.

Örneğin:

Günlük Aktif Kullanıcı (DAU)

• 1 Ocak → 8.000 kullanıcı
• 2 Ocak → 8.500 kullanıcı
• 3 Ocak → 8.200 kullanıcı

Günlük Uygulama Açılış Sayısı (Open Count)

• 1 Ocak → 15.000 açılış
• 2 Ocak → 15.800 açılış
• 3 Ocak → 16.200 açılış

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine geçin.
• “AppPerformanceStats” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:

• Önemli Alan adları:
  
  • DailyActiveUsers: İlgili gün içerisinde uygulamayı aktif olarak kullanan toplam kullanıcı sayısını ifade eder.
  • RecordDate: Kayıtların hangi güne ait olduğunu gösterir. Line Chart’ın zaman ekseninde kullanılan tarihtir.
  • OpenCount: Uygulamanın ilgili gün içinde kaç kez açıldığını belirtir. Kullanıcı etkileşim yoğunluğunu temsil eder.
  • AvgSessionDuration: Kullanıcıların uygulamada geçirdiği ortalama oturum süresini (saniye cinsinden) ifade eder. Kullanım kalitesinin değerlendirilmesinde kullanılır.

Adım 2 - Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve veri eklemek için: 

• İki aksiyon tanımlamanız gerekir.
• Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

• Örnek Verileri Ekleyen Aksiyon (AppPerformanceStats): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO AppPerformanceStats 
(Id, RecordDate, DailyActiveUsers, OpenCount, AvgSessionDuration)
VALUES
(NEWID(), '2025-01-01T00:00:00', 8000, 15000, 120),
(NEWID(), '2025-01-02T00:00:00', 8500, 15800, 135),
(NEWID(), '2025-01-03T00:00:00', 8200, 16200, 140),
(NEWID(), '2025-01-04T00:00:00', 9000, 17500, 150),
(NEWID(), '2025-01-05T00:00:00', 9800, 19000, 165),
(NEWID(), '2025-01-06T00:00:00', 10500, 21000, 175),
(NEWID(), '2025-01-07T00:00:00', 11200, 22500, 188);

Uygularken AppPerformanceStats kısmını silip tekrar AppPerformanceStats yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Verileri Sağlayan ve Filtreleyen Aksiyon (GetAppPerformanceStats):
  

SELECT 
    FORMAT(RecordDate, 'yyyy-MM-dd') AS RecordDate,
    DailyActiveUsers,
    OpenCount,
    AvgSessionDuration,
    Id,

    -- Line Chart Colors
    '#3B82F6' AS DailyActiveUsersColor,
    '#10B981' AS OpenCountColor,
    '#F59E0B' AS AvgSessionDurationColor

FROM AppPerformanceStats
WHERE 
    (@StartDate IS NULL OR @StartDate = '' OR 
     @EndDate IS NULL OR @EndDate = '' OR
     (RecordDate >= @StartDate AND RecordDate <= @EndDate))
     ORDER BY RecordDate;

Uygularken AppPerformanceStats kısmını silip tekrar AppPerformanceStats yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

Adım 3 - Initial Action Ekleme

• UI Design modülünü açın.
• Sayfaya ADD ACTION butonundan Initial Actions > Custom > Managed Db > GetAppPerformanceStats aksiyonunu ekleyin. 

• Aksiyon içerisinde GetMonthlySalesByRange > StartDate > Default > null ve GetMonthlySalesByRange > EndDate > Default > null seçimini yapın.

Adım 4 - Elementleri Ekleme

• Sol panelden Elements > Display > Label elementini sayfaya sürükleyip bırakın.
• Ardından Sol panelden Elements > Chart > LineChart elementini sayfaya ekleyin.

• Sol panelden Elements > Date and Time Input > DateRange elementini sayfaya ekleyin.

Adım 5 - Element Ayarlamalarının Yapılandırılması

• Label > Properties > Value alanına “Uygulama Metrikleri” metnini ekleyin.
• Label alanının fontunu Label > Styling > Text > Style > Heading 2 olarak ayarlayın.
• DateRange > Properties > StartDatePlaceholder  ve EndDatePlaceholder alanlarına “Başlangıç Tarihi” ve “Bitiş Tarihi” metinlerini ekleyin.
• DateRange > Add Action > onChange > Custom > Managed DB > GetAppPerformanceStats aksiyonunu ekleyin.
• Aksiyon içerisinde StartDate ve EndDate alanlarına GetAppPerformanceStats > StartDate > Components > DateRange1 > startValue ve endValue tanımlamalarını yapın.
  
  

• Line Chart içerisine verileri sağlayacak LineChart > Properties > DataSource > Action > GetAppPerformanceStats aksiyonunu ekleyin. Aşağıdaki tanımlamaları yapın:

Preview:

Uygulama test edildiğinde,seçilen tarih aralığındaki günlük aktif kullanıcı ve açılış sayısı verilerinin Line Chart üzerinde eksiksiz olarak yansıtıldığı gözlemlenir.

4. Ortak Özellikler (Properties)

Line Chart elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

Line Chart kullanırken en yüksek okunabilirliği ve doğru veri aktarımını sağlamak için aşağıdaki öneriler dikkate alınmalıdır:

• Çoklu veri serilerinde kontrast renkler kullanın. Çizgiler birbirine yakın renkte olduğunda trendler ayırt edilemez.
• Nokta görünürlüğünü veri yoğunluğuna göre ayarlayın. Çok fazla veri noktasında (Line Dot Width) değerini küçültmek okunabilirliği artırır.
• Çizgi kalınlığını (Line Thickness) tasarıma ve anlam vurgusuna göre belirleyin. Önemli seriler daha kalın çizgi ile gösterilebilir.
• Eksen formatlarını doğru yapılandırın. Tarih, para veya yüzdelik format kullanmak grafik anlaşılırlığını artırır.
• Begin At Zero ayarını veri tipine göre dikkatli kullanın. Trend analizlerinde sıfırdan başlatmak eğilimleri gizleyebilir.

6. Kısıtlamalar

Line Chart elementi ile çalışırken aşağıdaki sınırlamalar göz önünde bulundurulmalıdır:

• Kullanıcı etkileşimiyle aksiyon tetiklemez. Veri noktalarına tıklama veya çizgi üzerinde gezinme işlem akışı başlatmaz.
• Datasource tanımlanmadan grafik görüntülenmez. Veri alanları Datasource’a bağlı değilse aktif hale gelmez.
• Çok yoğun veri noktalarında çizgi üst üste binebilir veya karışabilir.