Bar Chart elementi, farklı kategorilerdeki verilerin karşılaştırılmasını görselleştirmenin en etkili yollarından biridir. Çubukların yüksekliği, her bir kategoriye ait toplam veya miktarı temsil eder. Satış verileri, anket sonuçları, performans analizleri ve kategorik veri görselleştirmeleri için kullanılır.

Web ve mobil uygulamalarda desteklenir.

Kullanım Alanları

• Satış miktarlarını kategorilere göre karşılaştırmak,
• Anket sonuçlarını yüzdeler halinde göstermek,
• Departman bazlı bütçe dağılımlarını görselleştirmek vb. 

Satış Karşılaştırma Senaryosu

Bir e-ticaret uygulamasında farklı ürün kategorilerinin aylık satışlarını göstermek için Bar Chart kullanılır. Kullanıcılar bu grafik sayesinde hangi kategorinin daha çok sattığını kolayca görebilir.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables başlığı yanındaki + ikonuna tıklayın ve tabloya “CategorySales” adını verin.
3. Aşağıdaki tabloyu oluşturun.

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

SQL Örneği

SELECT 'Electronics' AS Category, CAST(2500 AS BIGINT) AS SalesCount, 500000.00 AS SalesRevenueUNION ALLSELECT 'Clothing', CAST(1800 AS BIGINT), 300000.00UNION ALLSELECT 'Furniture', CAST(1200 AS BIGINT), 280000.00UNION ALLSELECT 'Cosmetics', CAST(900 AS BIGINT), 150000.00UNION ALLSELECT 'Sports', CAST(600 AS BIGINT), 100000.00

‍

UI Design Modülü İşlemleri

1. Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın.
2. Ardından Custom > CategorySales’i seçin.
3. Bar Chart elementine tıklayın.
4. Properties paneli Datasource alanından Actions kısmında CategorySales 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: “CategorySales” datasını seçmek.
• Data Label
  
  • Açıklama: Çubukların üzerinde gösterilecek veri etiketi.
  • Örnek: “Elektronik, Giyim, Mobilya…”
• Tooltip Custom Title Data Label
  
  • Açıklama: Tooltip başlığında gösterilecek veri.
  • Örnek: Tooltip → “Mobilya”
• Tooltip Custom Content Data Label
  
  • Açıklama: Tooltip içeriğinde açıklama olarak kullanılacak alan.
  • Örnek: “Satış Geliri: 280.000 ₺”
• Multi Tooltip Content Fields
  
  • Açıklama: Tooltip içinde birden fazla alan gösterebilirsiniz.
  • Örnek Tooltip:
    
    • Satış: 1200
    • Gelir: 280.000 ₺
• Target Line Field
  
  • Açıklama: Çubuk grafiğinde hedef çizgisini göstermek için kullanılır.
  • Örnek: “Hedef Satış: 2000”
• Data Field
  
  • Açıklama: Ana veri serisini temsil eder.
  • Örnek: Satış miktarı (SalesCount).
• Data Bg Color
  
  • Açıklama: Ana serinin çubuk rengini belirler.
  • Örnek: Elektronik → Mavi (#00BFFF).
• Second Data Field / Second Data Bg Color
  
  • Açıklama: İkinci seri eklemek için kullanılır (örn. Satış Geliri).
  • Örnek: Satış Geliri → Yeşil (#28a745).
• Third Data Field / Third Data Bg Color
  
  • Açıklama: Üçüncü seri eklemek için opsiyonel.
  • Örnek: Karlılık → Turuncu (#FF7F50).
• Legend
  
  • Açıklama: Serilerin isimlerini gösterir.
  • Seçenekler: top, bottom, left, right.
• Left Axis / Right Axis
  
  • Açıklama: Sol/sağ ekseni gösterir veya gizler.
• Begin At Zero
  
  • Açıklama: Çubukların başlangıç değerini sıfırdan başlatır.
• Max Y Axis Value
  
  • Açıklama: Y ekseninde maksimum değeri manuel belirleme.
• Show Data Labels
  
  • Açıklama: Çubukların üstünde veri etiketlerini gösterir.
• Data Label Formatter
  
  • Açıklama: Etiketlerin formatını seçmenizi sağlar.
  • Seçenekler:
    
    • Money → ₺10.000
    • Money TI → ₺10K
    • Percent → %45
    • Fractional-2 → 12.34
    • Fractional-5 → 12.34567
• Bar Thickness
  
  • Açıklama: Çubuk kalınlığını belirler.
• Line Color / Line Thickness / Line Dot Width
  
  • Açıklama: Grafik üzerine eklenen hedef veya referans çizgilerinin görünümünü özelleştirir.
• Line Label Color / Position
  
  • Açıklama: Çizgi üzerindeki etiketin rengini ve konumunu ayarlamanızı sağlar.

Senaryo Adımı Tamamlandığında

• X ekseninde kategori isimleri (Elektronik, Giyim, Mobilya…) görünür.
• Y ekseninde satış miktarları veya gelir değerleri gösterilir.
• Çubuklar seçilen renklerle doldurulur.
• Kullanıcı kategoriler arasında kolayca kıyaslama yapabilir.

Kısıtlamalar

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

İpuçları ve Best Practices

Datasource eklemeden özellikleri tanımlamaya çalıştığınızda diğer ayarlar görüntülenmez. 

• Çubuklar arasındaki renk kontrastı yüksek olmalı.
• Çok fazla kategori eklemek grafiği karmaşık hale getirebilir.
• İdeal kategori sayısı: 5–10 arası.