Verilerin zaman içindeki değişimini ya da kategoriler arasındaki farklılıkları alan grafiği şeklinde görselleştirmenizi sağlar. 

Kullanım Alanları: 

• Satış trendlerinin aylara göre analizi,
• Ziyaretçi sayısının günlere göre değişimi,
• Harcama kalemlerinin toplam içindeki dağılımı vb. 

Web ve mobil uygulamalarda desteklenir. 

Satış Trend Analizi Kullanım Senaryosu 

Bir e-ticaret uygulamasında 12 ay boyunca yapılan satışların miktarını ve gelirini görselleştirmek için Area Chart kullanılır. Kullanıcılar bu grafik sayesinde hangi ayda daha çok satış olduğunu kolayca görebilir. 

Veri Kaynağı Bağlama 

• Datasources modülüne gidin. 
• Ardından Tables başlığı yanındaki + ikonuna tıklayın ve tabloya “SalesData” ismini verin. 
• Aşağıdaki tabloyu oluşturun. 

‍

• Ardından SQL Actions’a tıklayın ve aksiyona “SalesData” ismini verin. C# ile de oluşturabilirsiniz.
• Aşağıdaki SQL komutunu girin. 

‍SELECT 'January' AS SalesMonth, CAST(1200 AS BIGINT) AS SalesCount, 150000.00 AS SalesRevenue, 90000.00 AS CostUNION ALLSELECT 'February', CAST(1000 AS BIGINT), 130000.00, 80000.00UNION ALLSELECT 'March', CAST(1400 AS BIGINT), 170000.00, 100000.00UNION ALLSELECT 'April', CAST(1600 AS BIGINT), 200000.00, 120000.00UNION ALLSELECT 'May', CAST(1800 AS BIGINT), 220000.00, 130000.00UNION ALLSELECT 'June', CAST(2000 AS BIGINT), 250000.00, 150000.00

UI Design Modülü işlemleri

• Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın. 
• Ardından Custom > SalesData’yı seçin. 
• Area Chart elementine tıklayın. 
• Properties paneli Datasource alanından Actions kısmında SalesData seçin. 

Özelliklerin Senaryo Bağlamında Kullanılması 

• Datasource
  
  • Açıklama: Grafikte kullanılacak verilerin kaynağını belirler.
  • Nasıl Kullanılır: Oluşturduğunuz tabloyu veya API sonucunu seçin.
  • Örnek: “SalesData” datasını seçmek.
• Data Label
  
  • Açıklama: Grafik üzerindeki her noktanın etiketinde gösterilecek alan.
  • Nasıl Kullanılır: Örn. Ay alanı seçilirse, her veri noktası ilgili ay adıyla gösterilir.
  • Örnek: “Ocak, Şubat, Mart…”
• Tooltip Custom Title Data Label
  
  • Açıklama: Tooltip başlığında gösterilecek veri.
  • Nasıl Kullanılır: Ay alanını seçerseniz, tooltip başlığı ay bilgisini gösterir.
  • Örnek: Tooltip → “Mart”
• Tooltip Custom Content Data Label
  
  • Açıklama: Tooltip içeriğinde açıklama olarak kullanılacak alan.
  • Nasıl Kullanılır: Satış Geliri alanını seçerseniz, tooltip içinde satış geliri görünür.
  • Örnek: “Gelir: 170.000 ₺”
• Multi Tooltip Content Fields
  
  • Açıklama: Birden fazla alanı aynı tooltip içinde göstermenizi sağlar.
  • Nasıl Kullanılır: Satış Miktarı ve Maliyet seçildiğinde tooltipte ikisi birlikte gösterilir.
  • Örnek Tooltip:
    
    1. Satış: 1400
    2. Maliyet: 100.000 ₺
• Data Field
  
  • Açıklama: Ana veri serisini temsil eden alan.
  • Nasıl Kullanılır: Satış Miktarı seçilirse, grafik satış trendini çizer.
  • Örnek: 1200 → 1000 → 1400 → 1600
• Data Bg Color
  
  • Açıklama: Ana seri için arka plan rengi.
  • Nasıl Kullanılır: Renk kodu seçin (örn. #00BFFF).
  • Örnek: Satış grafiği mavi tonunda gösterilir.
• Second Data Field
  
  • Açıklama: İkinci seri için veri alanı.
  • Nasıl Kullanılır: Satış Geliri seçerseniz, aynı grafikte gelir trendi de gösterilir.
  • Örnek: 150000 → 130000 → 170000 → 200000
• Second Data Bg Color
  
  • Açıklama: İkinci serinin arka plan rengi.
  • Nasıl Kullanılır: İkinci seri için farklı renk seçin.
  • Örnek: Satış Geliri → Yeşil ton (#28a745)
• Third Data Field
  
  • Açıklama: Üçüncü veri serisi (opsiyonel).
  • Nasıl Kullanılır: Maliyet seçilirse, maliyet trendi de grafikte gösterilir.
• Third Data Bg Color
  
  • Açıklama: Üçüncü serinin arka plan rengi.
  • Nasıl Kullanılır: Üçüncü seri için farklı bir renk belirleyin.
• Legend 
  
  • Açıklama: Serilerin isimlerini gösterir.
  • Seçenekler: top, bottom, left, right
  • Örnek: Legend → bottom seçilirse, seriler grafik altında görünür.
• Left Axis
  
  • Açıklama: Sol tarafta Y eksenini göster/gizle.
• Right Axis
  
  • Açıklama: Sağ tarafta ek bir Y ekseni kullanma.
• Begin At Zero
  
  • Açıklama: Grafik eksenini sıfırdan başlatır.
  • Örnek: Satış grafiği 0’dan başlatılabilir.
• Show Data Labels (Sadece Web)
  
  • Açıklama: Veri noktalarının üstünde etiketleri gösterir.
  • Örnek: Noktanın üstünde “1200” yazması.
• Data Label Formatter (Sadece Web)
  
  • Açıklama: Etiketlerdeki sayı biçimini belirler.
  • Seçenekler:
    
    1. Money → ₺10.000
    2. Money TI → ₺10K
    3. Percent → %45
    4. Fractional-2 → 12.34
    5. Fractional-5 → 12.34567
• Senaryo adımı tamamlandığında 

• Grafik üzerinde Ocak-Aralık ayları x ekseninde görüntülenir. 
• Her aya ait satış adedi (Y ekseni) alan grafiği ile gösterilir. 
• Grafik üzerinde seçilen renkler uygulanır. 
• Kullanıcı trendleri kolayca okuyabilir. 

Kısıtlamalar

• “Show Data Labels” ve “Data Label Formatter” özellikleri sadece Web uygulamalarında çalışır.
• Mobilde veri noktaları sadece tooltip üzerinden görülebilir.

İpuçları ve Best Practices

Sık yapılan hata: Datasource tanımlanmadan özellikleri tanımlamaya çalıştığınızda diğer ayarlar görünmez.

• Veri kaynağında tarih/ay alanı mutlaka düzenli sıralanmalı.
• Çoklu seriler kullanıldığında renk kontrastı yüksek seçilmeli.
• Performans önerisi: 12–24 arası veri noktası kullanıldığında grafik okunabilirliği daha yüksektir.