1. Bar Chart Elementine Genel Bakış

Bar Chart elementi, kategorik verileri karşılaştırmanın etkili ve anlaşılır bir yolunu sunar. Her bir kategoriyi temsil eden çubuklar sayesinde kullanıcılar, farklı gruplar arasındaki miktar veya toplam farklarını kolayca karşılaştırabilir. Satış analizleri, anket sonuçlarının değerlendirilmesi, performans karşılaştırmaları ve tüm kategorik veri görselleştirme senaryolarında sıkça tercih edilir.

Bar Chart elementi hem web hem de mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Farklı kategorilerdeki değerleri karşılaştırmak (ör. ürün bazlı satışlar, departman performansları, mağaza karşılaştırmaları)
• Anket veya oylama sonuçlarını görselleştirmek (örn. tercih dağılımı, memnuniyet skorları)
• Kategorik veri setlerinde en yüksek veya en düşük değerleri belirlemek
• Performans ölçümlerini analiz etmek (ör. aylık görev tamamlanma sayıları, işlem hacmi karşılaştırmaları)
• Ürün, hizmet veya kullanıcı grupları arasındaki miktarsal farkları göstermek

2. Temel Özellikler

• Kategorik verilerin çubuklar halinde görselleştirilmesi
• Birden fazla veri setinin aynı grafik üzerinde yan yana veya üst üste karşılaştırılabilmesi
• Yatay veya dikey bar görünümü desteği
• X (kategori) ve Y (değer) eksenlerinin özelleştirilebilmesi
• Renk, çubuk kalınlığı, aralık (spacing) ve opaklık gibi görsel ayarların düzenlenebilmesi
• Veri kaynağından dinamik olarak grafik verisi yükleme
• SQL, REST API veya Managed DB aksiyonlarıyla tam uyumluluk

2.1. Element Ayarları (Properties)

Bar Chart elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden grafik veri alanlarını, tooltip yapılandırmalarını, eksen ayarlarını ve çubuk görünümüyle ilgili tüm görsel özellikleri detaylı biçimde tanımlayabilirsiniz.

Aşağıdaki tüm ayarlar madde madde açıklanmıştır.

Datasource

• Datasource Action: Bar Chart üzerinde gösterilecek verileri getiren aksiyondur. Veriler bu aksiyon çalıştığında grafik içine yüklenir.

Datasource’a bir aksiyon bağlanmadığında aşağıdaki veri eşleştirme alanları görüntülenmez.

Veri Alanı Eşleştirmeleri

• Data Label: Grafikte gösterilecek ana veri setinin başlığıdır. Legend ve tooltiplerde bu başlık görünür.
• Tooltip Custom Title Data Label: Tooltip kısmında başlık olarak gösterilecek veri etiketini belirler. Kullanıcı çubukların üzerine geldiğinde görünen başlığı kontrol eder.
• Tooltip Custom Content Data Label: Tooltip içeriğinde açıklama olarak görünecek veri etiketidir. Ek bilgiler, açıklayıcı notlar veya alt değerler için kullanılır.
• Multi Tooltip Content Fields: Tek bir tooltip içinde birden fazla veri alanı göstermenizi sağlar. Çoklu çubuk içeren grafiklerde detaylı veri sunmak için kullanılır.
• Target Line Field: Grafikte bir hedef çizgisi göstermek için kullanılacak veri alanıdır. Örneğin satış hedefi, KPI limiti gibi referans çizgileri bu alanla tanımlanır.
• Data Field: Ana veri serisinin bağlandığı alandır. Grafikteki çubukların yüksekliği bu veri üzerinden oluşturulur.
• Data Bg Color: Ana veri serisinin çubuk dolgu rengini belirler. Hex formatı desteklenir (örn. #007bff).
• Second Data Field: Grafik üzerinde ikinci bir veri serisini göstermek için kullanılır. Yan yana (grouped bar) veya üst üste (stacked bar) karşılaştırmalar için uygundur.
• Second Data Bg Color: İkinci veri serisinin çubuk dolgu rengidir.
• Third Data Field: Üçüncü bir veri serisi eklemek için kullanılır. Özellikle üç kategorili kıyaslamalar için kullanışlıdır.
• Third Data Bg Color: Üçüncü veri serisinin çubuk rengini belirler.

Legend

• Legend Position: Legend’ın grafikte nerede görüneceğini belirler. Seçenekler:
  
  • Top (Üst)
  • Bottom (Alt)
  • Right (Sağ)
  • Left (Sol)

Eksen Ayarları

• Left Axis (Y Ekseni): Y ekseni değerlerinin gösterilip gösterilmeyeceğini belirler. Değer birimleri, minimum–maksimum ayarları gibi kontroller bu alanda yapılır.
• Right Axis (X Ekseni): X eksenindeki kategori veya değer alanlarının görünürlüğünü kontrol eder.

Başlangıç ve Değer Sınırları

• Begin At Zero: Grafik değerlerinin sıfır noktasından başlamasını sağlar. Doğru bir karşılaştırma yapmak için çoğu zaman açık tutulması önerilir.
• Max Y Axis Value: Y ekseninin üst sınırını manuel olarak belirlemenizi sağlar. Sabit ölçekli grafikler oluşturmak için kullanılır. 

Veri Etiketi (Data Label) Ayarları

• Show Data Labels: Her çubuğun üzerine veri etiketlerinin yazılmasını sağlar. Değerlerin doğrudan grafik üzerinde görünürlüğünü artırır.
• Data Label Formatter: Veri etiketlerinin formatını ayarlar. Desteklenen formatlar:
  
  • Money
  • Money TI
  • Percent
  • Fractional-2
  • Fractional-5

Çubuk ve Çizgi Görsel Ayarları

• Bar Thickness: Grafik çubuklarının kalınlığını belirler. Daha dolu veya daha sıkı görünüm için ayarlanabilir.
• Line Color: Çizgi (örneğin Target Line) rengini belirler.
• Line Thickness: Çizgi kalınlığını ayarlar.
• Line Dot Width: Çizgi üzerindeki nokta işaretleyicilerinin genişliğini (dot size) belirler. Özellikle trend noktalarını vurgulamak için kullanılır.

2.2. Elemente Eklenebilen Aksiyonlar

Bar Chart elementi, kullanıcı etkileşimiyle aksiyon tetikleme özelliği bulunmayan pasif bir görselleştirme bileşenidir. Bu nedenle element seçildiğinde ADD ACTION butonu görüntülenmez ve Bar Chart’a özel tetikleyici (trigger) eklenemez.

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

• Bar Chart üzerinde kullanıcı tıklaması, çubuk seçimi veya hover işlemleri bir aksiyon tetiklemez.
• Grafiğin yenilenmesi veya yeniden çizilmesi için, Bar Chart’ın bağlı olduğu Datasource Action’ın dışarıdan tetiklenmesi gerekir.
• Kullanıcı etkileşimli senaryolar (ör. “kullanıcı kategori seçsin, grafik güncellensin”) doğrudan Bar Chart üzerinden değil, RadioGroup, Button vb. gibi başka elementler üzerinden yönetilir.
• Bar Chart yalnızca veriyi görsel olarak temsil eder; kendi içinde işlem başlatmaz. 
• Bar Chart elementi üzerinde aksiyon tanımlanamaz.

Tüm işlem akışları, grafiğe değil grafiğin veri kaynağına bağlı UI elementlerine aksiyon atayarak yönetilir.

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

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

Senaryo: Kategori Bazlı Satış Performansı Analizi

Bir satış yönetim uygulamasında, kullanıcıya farklı ürün kategorilerine ait satış adedi, satış geliri ve maliyet bilgileri gösterilir.

Bu veriler Bar Chart üzerinde birden fazla seri olarak görüntülenir ve kullanıcı kategoriler arasındaki satış performansını kolayca karşılaştırabilir.

Senaryoda:

Bar Chart üzerinde üç ayrı veri serisi olarak gösterilecektir. Her seri için grafik içerisinde farklı bir renk kullanılarak kategori karşılaştırmaları daha okunabilir hale getirilir.

• Satış adedi (SalesCount),
• Satış geliri (SalesRevenue)
• Maliyet (Cost)

Örneğin:

• Elektronik → Satış Adedi: 320, Satış Geliri: 27.500₺, Maliyet: 15.000₺
• Ev Ürünleri → Satış Adedi: 180, Satış Geliri: 12.000₺, Maliyet: 6.000₺
• Giyim → Satış Adedi: 150, Satış Geliri: 14.500₺, Maliyet: 8.000₺

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

• Önemli Alan adları:
  
  • Category: Ürün veya hizmet grubunun kategorisini belirtir.
  • Cost: İlgili kategorinin toplam maliyet tutarını ifade eder.
  • SalesCount: İlgili kategoride gerçekleşen toplam satış adedini gösterir.
  • SalesRevenue: İlgili kategorinin toplam satış gelirini (ciro) belirtir.

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

INSERT INTO CategorySales (Id, Category, Cost, SalesCount, SalesRevenue)
VALUES
(NEWID(), 'Elektronik', 15000.00, 3200, 27500.00),
(NEWID(), 'Giyim',       8000.00, 2100, 14500.00),
(NEWID(), 'Ev Ürünleri', 6000.00, 1800, 12000.00),
(NEWID(), 'Ofis',        4000.00, 950,  7800.00),
(NEWID(), 'Spor',        5000.00, 1300, 9300.00);

‍

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

• Verileri Sağlayan Aksiyon (GetCategorySales):
  

SELECT
    Category,
    SalesCount,
    SalesRevenue,
    Cost,

    '#FF5733' AS SalesCountColor,
    '#33C1FF' AS SalesRevenueColor,
    '#75FF33' AS CostColor,

    CAST(
        CASE Category
            WHEN N'Elektronik'  THEN 29000
            WHEN N'Giyim'       THEN 17000
            WHEN N'Ev Ürünleri' THEN 14000
            WHEN N'Ofis'        THEN 9000
            WHEN N'Spor'        THEN 11000
            ELSE 0
        END
    AS DECIMAL(18,2)) AS TargetRevenue

FROM CategorySales
ORDER BY Category;

Uygularken GetCategorySales kısmını silip tekrar GetCategorySales 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 > GetCategorySales aksiyonunu ekleyin. 

Adım 4 - Elementleri Ekleme

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

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

• Label > Properties > Value alanına “Kategori Bazlı Satış Performansı” metnini ekleyin.
• Label alanının fontunu Label > Styling > Text > Style > Heading 2 olarak ayarlayın.
• Bar Chart içerisine verileri sağlayacak BarChart > Properties > DataSource > Action > GetCategorySales aksiyonunu ekleyin. Aşağıdaki tanımlamaları yapın:

• BarChart > Properties > LineColor çizgi rengini HEX alanından “E13C39” olarak girin ve kapatın.
  
  

Preview:

Sağ üst kenardaki Preview butonu ile uygulama test edildiğinde, kategoriler bazında hedef gelir, satış adedi, satış geliri ve maliyet değerlerinin Bar Chart üzerinde karşılaştırıldığı görülür. Grafik altındaki Legend alanına tıklayarak her bir veri serisinin görünürlüğünü kolayca filtreleyebilirsiniz.

4. Ortak Özellikler (Properties)

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

Bar Chart kullanırken aşağıdaki en iyi uygulamaların dikkate alınması önerilir:

• Kategorik verilerinizi düzenli ve anlamlı gruplara ayırın. Çok uzun kategori listeleri çubukların sıkışmasına ve okunabilirliğin azalmasına neden olabilir.
• Birden fazla veri serisi kullanıyorsanız kontrast renkler seçin. Özellikle grouped veya stacked bar grafiklerde renk ayrımı okunabilirliği ciddi şekilde artırır.
• Çubuk kalınlığını (Bar Thickness) veri yoğunluğuna göre ayarlayın. Az veri varsa kalın çubuklar, çok veri varsa ince çubuklar daha kullanışlıdır.
• Tooltip içeriklerini net ve açıklayıcı tutun. Kullanıcı grafiğin üzerine geldiğinde gösterilen bilgiler sade ve anlaşılır olmalıdır.
• Eksenlerde doğru formatları kullanın. Para, yüzde veya ondalık formatlar kullanıcıların veriyi daha hızlı anlamasını sağlar.
• Y ekseni maksimum değerini gerektiğinde manuel belirleyin (Max Y Axis Value). Bu sayede farklı sayfalarda aynı ölçekle karşılaştırılabilir standart grafikler üretebilirsiniz.

6. Kısıtlamalar

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

• Bar Chart, kullanıcı etkileşimiyle tetiklenen aksiyonları desteklemez. Grafik üzerinde tıklama, seçim veya hover aksiyonları çalıştırılamaz.
• Datasource tanımlanmadan grafik görüntülenmez. Data Field ve diğer veri alanları Datasource bağlı değilse aktif olmaz.
• Yanlış veya eksik veri tipleri grafik çizimini bozabilir. Sayısal olmayan değerler Y ekseninde hatalara veya grafik bozulmalarına neden olabilir.