Donut Chart elementi, verileri yüzdesel oranlar halinde görselleştirmenin şık ve anlaşılır bir yoludur. Ortası boş bırakılan dairesel yapı, her kategorinin toplam içindeki payını net şekilde gösterir. Pazar payı analizleri, bütçe dağılımları, müşteri segmentasyonları ve diğer oransal veri sunumları için kullanılır.

Web ve mobil uygulamalarda desteklenir.

Kullanım Alanları

• Pazar payı analizleri, 
• Bütçe dağılımı görselleştirmeleri,
• Müşteri segmentasyonları,
• Kaynak ve departman bazlı oranlar vb. 

Bütçe Dağılımı Senaryosu

Bir şirketin yıllık bütçesi farklı kalemlere (Marketing, Product Development, Operations, Human Resources, Other) ayrılmıştır. Donut Chart sayesinde kullanıcı bu kalemlerin toplam bütçe içindeki oranlarını görsel olarak karşılaştırabilir.

Veri Kaynağı Bağlama

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

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

SQL Örneği

SELECT 'Marketing' AS Category, 300000 AS AmountUNION ALLSELECT 'Product Development', 450000UNION ALLSELECT 'Operations', 200000UNION ALLSELECT 'Human Resources', 100000UNION ALLSELECT 'Other', 50000

‍

UI Design Modülü İşlemleri

1. Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın.
2. Custom > BudgetData aksiyonunu seçin.
3. Donut Chart elementine tıklayın.
4. Properties paneli Datasource alanından BudgetData 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: “BudgetData” datasını seçmek.
• Data Label
  
  • Açıklama: Her dilim üzerinde gösterilecek veri etiketi.
  • Örnek: “Marketing, Operations, HR…”
• Tooltip Custom Title Data Label
  
  • Açıklama: Tooltip başlığında gösterilecek veri.
  • Örnek: Tooltip → “Product Development”
• Tooltip Custom Content Data Label
  
  • Açıklama: Tooltip içeriğinde açıklama olarak kullanılacak alan.
  • Örnek: “Amount: ₺450.000”
• Multi Tooltip Content Fields
  
  • Açıklama: Tooltip içinde birden fazla alan gösterebilirsiniz.
  • Örnek Tooltip:
    
    • Category: Marketing
    • Amount: ₺300.000
    • Share: %25
• Data Field
  Açıklama: Ana veri serisini temsil eder.
  
  • Örnek: Amount (Bütçe Miktarı)
• Data Bg Color
  
  • Açıklama: Her kategori için dilim rengini belirler.
  • Örnek: Marketing → Mavi (#00BFFF), Operations → Yeşil (#28a745)
• Second Data Field / Second Data Bg Color
  
  • Açıklama: İkinci seri eklemek için kullanılır.
  • Örnek: Geçen yılın bütçesi → Turuncu (#FF7F50)
• Third Data Field / Third Data Bg Color
  
  • Açıklama: Üçüncü seri eklemek için opsiyonel.
• Legend
  
  • Açıklama: Kategorilerin isimlerini gösterir.
  • Seçenekler: top, bottom, left, right
• Show Data Labels
  
  • Açıklama: Dilimlerin üzerinde veri etiketlerini gösterir. (Sadece web)
• Data Label Formatter
  
  • Açıklama: Etiketlerin sayı biçimlendirmesini belirler.
  • Seçenekler:
    
    • Money → ₺10.000
    • Percent → %45
    • Fractional-2 → 12.34
    • Fractional-5 → 12.34567

Senaryo Adımı Tamamlandığında

• Donut Chart üzerinde her kategori farklı bir dilim olarak gösterilir.
• Dilimlerin büyüklüğü Amount değerine göre ayarlanır.
• Tooltip açıldığında kategori adı, miktar ve yüzdelik oran görüntülenir.
• Kullanıcı her kategorinin toplam içindeki payını kolayca analiz edebilir.

Kısıtlamalar

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

İpuçları ve Best Practices

Datasource tanımlamadan diğer özellikler aktif olmayacaktır.

• Renk kontrastı yüksek seçilmeli, özellikle benzer değerli dilimlerde.
• Çok fazla kategori eklemek grafiği karmaşık hale getirebilir.
• İdeal kategori sayısı: 4–8 arasıdır.