Pie Chart elementi, verilerinizi dairesel bir grafik üzerinde görselleştirmenin en sezgisel yollarından biridir. Her bir dilim, toplam içindeki bir kategorinin yüzdesini gösterir.

Pie Chart elementi hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Ürün kategorilerine göre pazar payını göstermek,
• Bütçe dağılımını görselleştirmek,
• Anket sonuçlarını yüzdelerle sunmak,
• Departman bazlı gider veya gelir paylarını analiz etmek vb.

Pazar Payı Analizi

Bir şirket, farklı ürün kategorilerinin toplam satış içindeki payını göstermek için Pie Chart kullanır.

• X: Kategoriler (Elektronik, Giyim, Mobilya…)
• Y: Satış gelirleri (₺)
• Her dilim kategoriye ait yüzdelik oranı gösterir.
• Tooltip açıldığında kategori adı + satış miktarı + yüzdelik oran görünür.

Veri Kaynağı Bağlama

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

4. Ardından SQL Actions’a tıklayın ve SQL Actions üzerinden aksiyona “CategoryPieData” ismini verin.
5. Alternatif olarak C# ile de oluşturabilirsiniz.

using System;using System.Data;‍public class Script{    // Kuika C# Action: CategoryPieData    public DataTable Execute()    {        var table = new DataTable("CategoryPieData");        table.Columns.Add("Id", typeof(Guid));        table.Columns.Add("Category", typeof(string));        table.Columns.Add("Value", typeof(decimal));        // (İsteğe bağlı) Renk kontrolü için aşağıyı açabilirsiniz:        // table.Columns.Add("ColorHex", typeof(string)); // "#4F46E5" gibi‍        table.Rows.Add(Guid.NewGuid(), "Electronics",     35.2m /*, "#4F46E5"*/);        table.Rows.Add(Guid.NewGuid(), "Home & Kitchen",  22.8m /*, "#06B6D4"*/);        table.Rows.Add(Guid.NewGuid(), "Books",           14.5m /*, "#22C55E"*/);        table.Rows.Add(Guid.NewGuid(), "Clothing",        18.0m /*, "#F59E0B"*/);        table.Rows.Add(Guid.NewGuid(), "Others",           9.5m /*, "#EF4444"*/);‍        return table;    }}

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. Custom > CategoryPieData aksiyonunu seçin.
3. Pie Chart elementini ekleyin.
4. Properties paneli Datasource alanından CategoryPieData aksiyonunu seçin.

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

• Datasource
  
  • Açıklama: Grafikte kullanılacak verilerin kaynağını belirler.
  • Örnek: CategoryPieData
• Data Label
  
  • Açıklama: Dilim üzerinde gösterilecek kategori adı.
  • Örnek: “Electronics”
• Tooltip Custom Title Data Label
  
  • Açıklama: Tooltip başlığında kategori adı.
  • Örnek: Tooltip → “Furniture”
• Tooltip Custom Content Data Label
  
  • Açıklama: Tooltip içinde açıklama olarak gösterilecek veri.
  • Örnek: “Sales Revenue: 280,000 ₺”
• Multi Tooltip Content Fields
  
  • Açıklama: Tooltip içinde birden fazla alan gösterebilirsiniz.
• Data Field
  
  • Açıklama: Ana değer alanı.
  • Örnek: SalesRevenue
• Data Bg Color
  
  • Açıklama: Her dilim için renk.
  • Örnek: Electronics → Mavi, Clothing → Yeşil, Furniture → Turuncu…
• Second/Third Data Field & Bg Color
  
  • Açıklama: İkinci/Üçüncü veri serileri için opsiyonel alanlar.
• Legend
  
  • Açıklama: Dilim açıklamalarının konumu (top, bottom, left, right).
• Show Data Labels (sadece web)
  
  • Açıklama: Dilimlerin üstünde değer/ yüzde etiketlerini gösterir.
• Data Label Formatter (sadece web)
  
  • Açıklama: Etiket biçimlendirmesi.
  • Seçenekler: Money → ₺10.000, Percent → %45, Fractional → 12.34

Senaryo Adımı Tamamlandığında

• Pasta grafiği dilimlere ayrılır: Elektronik, Giyim, Mobilya, Kozmetik, Spor.
• Her dilimin büyüklüğü, ilgili kategorinin satış gelirine göre belirlenir.
• Tooltip açıldığında kategori + satış miktarı + yüzdelik görünür.
• Kullanıcı pazar paylarını kolayca analiz edebilir.

Kısıtlamalar

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

İpuçları ve Best Practices

Çok fazla kategori eklemek grafiği karmaşık hale getirebilir → ideal: 5–8 kategori

• Renk kontrastı yüksek seçilmeli.
• Büyük veri kümelerinde Pie Chart yerine Donut Chart veya Bar Chart daha uygun olabilir.