1. Area Chart Elementine Genel Bakış

Area Chart elementi, verilerin zaman içindeki değişimini ve eğilimlerini görsel olarak ifade etmenin etkili bir yolunu sunar. Birden fazla veri kümesi arasındaki farklılıkları karşılaştırmak ve belirli bir zaman aralığındaki birikimli değerleri göstermek için kullanılması önerilir. Finansal raporlamalar, satış performansı analizi ve zaman serisi içeren tüm veri görselleştirme senaryolarında yaygın olarak kullanılır.

Area 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 değişimler)
• Birden fazla veri kümesini karşılaştırmak (ör. satış kanalları, departman performansları)
• Belli bir dönem içindeki toplam veya birikimli değerleri göstermek
• Finansal raporlamalarda gelir–gider trendlerini izlemek
• Ürün, kullanıcı veya işlem bazlı zaman serisi verilerini görselleştirmek

2. Temel Özellikler 

• Zaman serisi verilerinin alan dolgusu ile görselleştirilmesi
• Birden fazla veri setinin aynı grafik üzerinde karşılaştırılabilmesi
• Değerlerin toplam veya birikimli olarak gösterilebilmesi
• X (zaman) ve Y (değer) eksenlerinin özelleştirilebilmesi
• Renk, opaklık, çizgi stili ve alan dolgusu gibi görsel ayarların düzenlenmesi
• Veri kaynağından dinamik olarak grafik verisi yükleme
• SQL, REST API veya Managed DB aksiyonlarıyla tam uyumluluk

2.1. Area Chart Elementi Ayarları (Properties)

Area Chart elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden grafik verilerinin kaynağını, eksen yapılandırmalarını, tooltip ayarlarını ve görsel düzenlemelerini detaylı şekilde yapılandırabilirsiniz. Aşağıdaki tüm ayarlar madde madde açıklanmıştır.

Datasource

• Datasource Action: Area Chart üzerinde gösterilecek verileri getiren aksiyondur. Veriler bu aksiyon çalıştırıldığında yüklenir.

Datasource’a bir aksiyon bağlanmadığında hiçbir veri alanı eşleştirme ayarı görünmez.

Veri Alanı Eşleştirmeleri

• Data Label: Grafikte ana veri serisini temsil eden başlıktır. Legend (açıklama kutusu) ve tooltiplerde bu etiket başlık olarak gösterilir.
• Tooltip Custom Title Data Label: Kullanıcı grafiğin üzerinde gezindiğinde tooltip alanında görünen başlıktır. Veri setinin genel tanımını burada gösterebilirsiniz.
• Tooltip Custom Content Data Label: Tooltip içeriğinde gösterilen açıklayıcı veri alanıdır. Ek bilgiler, alt değerler veya veri açıklamaları bu alana bağlanır.
• Multi Tooltip Content Fields: Tooltip içinde birden fazla veri alanını aynı anda göstermenizi sağlar. Özellikle çoklu veri karşılaştırmalarında önemlidir.
• Data Field: Ana veri serisinin bulunduğu alandır. Area Chart’ın doldurulan bölgesi bu veri üzerinden oluşturulur.
• Data Bg Color: Ana veri serisi için kullanılacak alan dolgu rengini belirler. Renk değeri Hex formatında tanımlanır (örn. #007bff).
• Second Data Field: Grafik üzerinde ikinci bir veri serisi göstermek için kullanılır. Satış, gelir, gider gibi iki farklı metrik burada karşılaştırılabilir.
• Second Data Bg Color: İkinci veri serisinin alan dolgu rengini belirler.
• Third Data Field: Üçüncü bir veri serisinin bağlandığı alandır. Çok veri setli analizlerde (ör. üç departman kıyaslama) kullanılır.
• Third Data Bg Color: Üçüncü veri serisinin alan dolgu rengini belirler.

Legend 

• Legend Position: Verilerin hangi konumda listeleneceğini belirler. Seçenekler:
  
  • Top (Üst)
  • Bottom (Alt)
  • Right (Sağ)
  • Left (Sol)

Eksen Ayarları

• Left Axis (Y Ekseni): Y eksenindeki değerlerin görüntülenip görüntülenmeyeceğini belirler. Ölçü birimi gösterimi, minimum–maksimum düzenlemeleri gibi ayarlar burada yapılır.
• Right Axis (X Ekseni): X eksenindeki değerlerin gösterimi burada kontrol edilir. Zaman, kategori veya metin bazlı değerler için özelleştirilebilir.

Başlangıç ve Görünüm Ayarları

• Begin At Zero: Grafik çizimi sıfır noktasından başlasın mı belirler. Finansal veya istatistiksel grafikleri daha anlaşılır kılmak için açık tutulabilir.

Veri Etiketi (Data Label) Ayarları

• Show Data Labels: Veri noktalarının üzerine etiket koymanızı sağlar. Değerlerin grafik üzerindeki görünürlüğünü artırır.
• Data Label Formatter: Veri etiketlerinin hangi formatta gösterileceğini belirler. Desteklenen formatlar:
  
  • Money (Para formatı)
  • Money TI (Binlik/TL kısaltmalı para formatı)
  • Percent (Yüzde)
  • Fractional-2 (2 ondalıklı sayı)
  • Fractional-5 (5 ondalıklı sayı)

Styling (Görsel Ayarlar)

• Styling Panel Renkleri: Styling panelinden verilen renkler, grafik önizlemelerinde arka plan rengi olarak uygulanabilir. Bu ayar, grafiğin genel görünümünü tasarıma uygun hale getirmek için kullanılır.

2.2. Area Chart Elementine Eklenebilen Aksiyonlar

Area Chart elementi, veri görselleştirmeye odaklanan pasif bir element olduğu için doğrudan kullanıcı etkileşimiyle tetiklenen aksiyonları desteklemez. Bu nedenle element seçildiğinde ADD ACTION butonu görünmez ve Area Chart’a özel bir tetikleyici eklenemez.

Aşağıdaki noktalar Area Chart’ın aksiyon yapısını açıklar:

• Area Chart, kullanıcı tıklaması veya grafik üzerinde etkileşim gerçekleştiğinde aksiyon çalıştırmaz.
• Grafiği yenilemek veya güncellemek için, Area Chart’ın bağlı olduğu Datasource Action dışarıdan tetiklenmelidir.
• Kullanıcı etkileşimi gerektiren senaryolarda (ör. “kullanıcı seçim yapınca grafiğin değişmesi”), aksiyonlar buton, radio group vs. gibi başka elementler üzerinden tetiklenir.
• Area Chart yalnızca veri kaynağındaki sonuçları görsel olarak gösterir, kendi içinde işlem başlatmaz.

Area Chart elementi üzerinde aksiyon tanımlanamaz; grafik üzerinde yapılacak tüm güncellemeler, dış elementler aracılığıyla tetiklenen aksiyonlar üzerinden yönetilir.

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

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

Senaryo: Aylık Satış Trend Analizi

Bir satış takip uygulamasında, kullanıcıya belirli bir tarih aralığına ait aylık toplam satış tutarı ve aylık sipariş sayısı gösterilir. Kullanıcı, başlangıç ve bitiş tarihlerini seçerek grafik üzerinde filtre uygulanmış satış trendlerini görebilir.

Senaryoda:

• Aylık satış tutarı ve aylık sipariş adedi Area Chart üzerinde iki ayrı veri serisi olarak gösterilecektir.
• Başlangıç – bitiş tarihleri kullanıcının seçimine göre SQL üzerinden filtrelenecek ve grafik yalnızca ilgili ayları gösterecektir.

Örneğin:

Ay – Toplam Satış Tutarı → (Ocak: 12.000₺, Şubat: 15.000₺, Mart: 17.500₺)
Ay – Sipariş Sayısı → (Ocak: 1500 sipariş, Şubat: 1800 sipariş, Mart: 2100 sipariş)

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.
• “MonthlySales” adında yeni tablo oluşturun.
• Oluşturmanız gereken tablo yapısı aşağıdaki gibidir:
  
  

• Önemli Alan adları:
  
  • OrdersCount: İlgili ayın toplam sipariş sayısını belirtir.
  • SalesDate: Kayıtların hangi yıl ve aya ait olduğunu gösterir.
  • TotalSales: İlgili ayın toplam satış tutarını ifade eder.

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 (InsertMonthlySalesData):
    Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO MonthlySales (Id, SalesDate, TotalSales, OrdersCount)
VALUES
(NEWID(), '2024-01-01', 12000, 1550),
(NEWID(), '2024-02-01', 15000, 1800),
(NEWID(), '2024-03-01', 17500, 2150),
(NEWID(), '2024-04-01', 16300, 1900),
(NEWID(), '2024-05-01', 21000, 2500),
(NEWID(), '2024-06-01', 19500, 3350),
(NEWID(), '2024-07-01', 24000, 4000),
(NEWID(), '2024-08-01', 26500, 3150),
(NEWID(), '2024-09-01', 22800, 3600),
(NEWID(), '2024-10-01', 27000, 5250),
(NEWID(), '2024-11-01', 25500, 2900),
(NEWID(), '2024-12-01', 30000, 4550);

Uygularken MonthlySales kısmını silip tekrar MonthlySales 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 (GetMonthlySalesByRange):
  
  

SELECT
    FORMAT(SalesDate, 'yyyy-MM') AS SalesMonthLabel,
    TotalSales,
    OrdersCount,

    -- TotalSales için renk
    '#4A90E2' AS TotalSalesColor,

    -- OrdersCount için renk
    '#50E3C2' AS OrdersCountColor


-- Başlangıç ve bitiş tarihleri boş bırakıldığında tüm veriler listelenir; bu alanlar doldurulduğunda ise yalnızca seçilen tarih aralığına ait kayıtlar getirilir.
FROM MonthlySales
WHERE
    ( @StartDate IS NULL OR SalesDate >= CAST(@StartDate AS date) )
    AND
    ( @EndDate   IS NULL OR SalesDate <= CAST(@EndDate   AS date) )
ORDER BY SalesDate;

Uygularken MonthlySales kısmını silip tekrar MonthlySales 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 sağ kenardaki ADD ACTION butonundan Initial Actions > Custom > Managed Db > GetMonthlySalesByRange 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 > AreaChart elementini sayfaya ekleyin.
• Ardından 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 “Satış Trendi” 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 > GetMonthlySalesByRange aksiyonunu ekleyin.
• Aksiyon içerisinde StartDate ve EndDate alanlarına GetMonthlySalesByRange > StartDate > Components > DateRange1 > startValue ve endValue tanımlamalarını yapın.

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

Preview:

Sağ üst köşede bulunan Preview butonundan uygulama test edildiğinde, seçilen 7 aylık tarih aralığına ait verilerin Area Chart üzerinde görüntülendiği görülür.

‍

4. Ortak Özellikler (Properties)

Area 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)

Area Chart kullanırken aşağıdaki önerilerin dikkate alınması gereklidir: 

• Zaman serisi verileriniz mutlaka sıralı olmalıdır. Sıralanmamış veri grafikte kırılmalara veya yanlış alan doldurmalarına yol açabilir.
• Birden fazla veri serisi kullanıyorsanız kontrast renkler tercih edin. Opaklık değerlerini azaltmak (ör. %30–40) veri setlerinin çakışmasını daha okunabilir hale getirir.
• Tooltip alanlarını anlamlı etiketlerle yapılandırın. Kullanıcı grafiğin üzerine geldiğinde sade ve açıklayıcı bilgiler görmelidir.
• Alan doldurma renklerini düşük opaklıkta tercih edin. Yoğun renk kullanımı grafiğin okunabilirliğini düşürür; açık tonlar daha iyi sonuç verir.
• Eksensel değerlerin doğru formatlandığından emin olun. Money, Percent veya Fractional formatlar grafik yorumlanabilirliğini ciddi şekilde artırır.

6. Kısıtlamalar

Area Chart elementini kullanırken aşağıdaki sınırlamaların göz önünde bulundurulması gerekir:

• Area Chart, kullanıcı etkileşimiyle aksiyon tetikleme desteği içermez. onClick vb. aksiyonlar doğrudan grafik üzerinden çalıştırılamaz.
• Veri kaynağı (Datasource) tanımlanmadan grafik görüntülenmez. Data Field, Second Data Field veya Tooltip alanları, Datasource bağlı değilse görünmez.
• Eksik veya hatalı formatlanmış veriler grafik çizimini bozabilir. Özellikle zaman serilerinde tarih formatı (yyyy-MM-dd veya datetime) doğru olmalıdır.