Radar Chart elementi, çok boyutlu verileri bir çember üzerinde eksenlere yayarak görsel olarak analiz etmenizi sağlayan güçlü bir grafik elementidir. Her kategori veya kriter bir eksen olarak temsil edilir ve veriler bu eksenler üzerinde noktasal olarak işaretlenip birleştirilerek çok boyutlu bir şekil elde edilir. Bu yapı, farklı kategoriler arasındaki benzerlikleri, farklılıkları, güçlü ve zayıf yönleri aynı anda görselleştirmek için kullanılır. Özellikle performans ölçümleri, yetkinlik karşılaştırmaları, ürün kıyaslamaları ve çok kriterli değerlendirmelerde sıkça kullanılır. Kullanıcılar, bir veri setinin genel profilini tek bakışta anlamlandırabilir.
Radar Chart elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Yetkinlik ve beceri karşılaştırmaları (ör. çalışan performansı, öğrenci yetkinlik analizi, takım beceri dağılımı)
Ürün veya marka kıyaslamaları (ör. iki farklı ürünün tasarım, kalite, fiyat, dayanıklılık gibi kriterlerde karşılaştırılması)
Performans değerlendirme raporları. Çok kriterli KPI’ların birlikte analiz edilmesi için kullanılır.
Çok boyutlu veri setlerinin profilini görselleştirmek. Verilerin güçlü ve zayıf yönlerini tek bakışta anlamayı sağlar.
Takımlar veya birimlerin karşılaştırılması (ör. departmanlar arası yıllık performans analizi)
2. Temel Özellikler
Çok boyutlu veri görselleştirme desteği. Birden fazla kategoriyi aynı grafikte karşılaştırarak çok kriterli analiz yapmanızı sağlar.
Birden fazla veri serisini aynı radar üzerinde gösterebilme. Örneğin iki adayın yetkinlik kıyaslamasını veya iki ürünün performans profilini aynı grafikte sunabilirsiniz.
Her eksen için ayrı kategori tanımlayabilme. Her kategori grafikte bir radyal eksen olarak temsil edilir.
Veri noktalarının otomatik olarak birleştirilmesi. Noktalar birleştirilerek çokgen biçimli bir alan oluşturulur.
Renk, çizgi kalınlığı, nokta genişliği ve opaklık ayarlarının özelleştirilebilmesi.
Veri kaynağından dinamik olarak grafik verisi yükleme. SQL, REST API veya Managed DB aksiyonlarıyla tam uyumluluk sağlar.
2.1 Element Ayarları (Properties)
Radar Chart elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden veri kaynaklarını, eksen etiketlerini, renk yapılandırmalarını, seviye çemberlerini ve tooltip içeriklerini ayrıntılı şekilde yapılandırabilirsiniz. Aşağıdaki tüm ayarlar madde madde açıklanmıştır:
Datasource
Datasource Action: Radar Chart üzerinde gösterilecek verileri getiren aksiyondur. Veri yüklemesi bu aksiyon çalıştırıldığında gerçekleşir.
Datasource’a bir aksiyon bağlanmadığında veri eşleştirme alanları görünmez.
Veri Alanı Eşleştirmeleri
Data Label: Her eksende gösterilecek kategori adını belirler. Örneğin: “Performans”, “Hız”, “Kalite”, “Maliyet”.
Tooltip Custom Title Data Label: Tooltip içinde başlık olarak gösterilecek veri etiketini belirler.
Tooltip Custom Content Data Label: Tooltip içerisinde açıklayıcı içerik veya ek bilgi göstermek için kullanılan veri alanıdır.
Multi Tooltip Content Fields: Tooltip içerisinde birden fazla veri alanının aynı anda gösterilmesini sağlar. Çok kriterli açıklamalar için idealdir.
Data Field: Radar üzerindeki ana veri serisini belirleyen alandır. Her kategori için temsil edilen değer bu alandan alınır.
Data Bg Color: Ana veri serisinin arka plan rengini veya çizgi/dolgu rengini belirler.
Second Data Field: Grafikte ikinci bir veri serisi tanımlamak için kullanılır. Örneğin iki kişinin veya iki ürünün kıyaslanması.
Second Data Bg Color: İkinci veri serisinin rengini belirler.
Third Data Field: Üçüncü bir veri serisi eklemek için kullanılır. Çoklu performans veya profil analizlerinde kullanılabilir.
Third Data Bg Color: Üçüncü veri serisinin rengini belirler.
Legend
Legend: Her bir veri serisinin açıklama kutusunda gösterilmesini sağlar. Kullanıcı, legend üzerinde bir seriye tıklayarak ilgili çokgeni gizleyip gösterebilir.
Etiket ve Seviye Ayarları
Show Label Boxes: Kategori adlarının kutucuk içinde gösterilip gösterilmeyeceğini belirler.
Açık → Etiketler kutu içerisinde gösterilir.
Kapalı → Etiketler sade şekilde gösterilir.
Show Level Value Boxes: Radar grafiğinin seviye çemberleri üzerindeki sayısal değerlerin görünürlüğünü kontrol eder. Değer çemberleri üzerinde kaçlık ölçek kullanıldığını göstermek için kullanılır.
Level Frequency: Radar içindeki seviye çemberlerinin yoğunluğunu belirler. Örnek:
3 → 3 seviye çemberi
5 → 5 seviye çemberi Çember sayısı arttıkça grafik daha detaylı görünür.
Point Label Color: Kategorilerin uç noktalarında (her eksenin sonunda) gösterilen etiketlerin renk ayarını belirler.
Değer Başlangıç ve Ölçek Ayarları
Begin At Zero: Radar grafiğindeki tüm eksen değerlerinin sıfırdan başlayıp başlamayacağını belirler.
Açık → Tüm eksenler 0’dan başlar.
Kapalı → En küçük veri değerine göre başlangıç ayarlanabilir.
Görsel Stil Ayarları
Angle Lines Color: Radar grafiğindeki “spider web” çizgilerinin (radyal çizgiler) rengini belirler. Grafik okunabilirliğini artırmak veya tasarıma uygun bir görünüm sağlamak için kullanılır.
2.2 Elemente Eklenebilen Aksiyonlar
Radar Chart elementi, veri görselleştirmeye odaklı pasif bir grafik elementidir. Bu nedenle element seçildiğinde ADD ACTION butonu görüntülenmez ve Radar Chart üzerinde herhangi bir kullanıcı etkileşimi aksiyon tetiklemez.
Radar Chart’ın aksiyon yapısı aşağıdaki prensiplere göre çalışır:
Radar Chart üzerinde tıklama, veri noktasına dokunma, hover veya seçim yapılması aksiyon tetiklemez.
Grafiğin güncellenmesi, Radar Chart’ın bağlı olduğu Datasource Action’ın dışarıdan tetiklenmesi ile gerçekleşir.
Kullanıcı seçimlerine göre grafiğin değişmesi gerekiyorsa (örneğin: “yıl seçildiğinde yeni radar çizilsin”), bu işlem Button, Radio Group gibi başka UI elementlerine aksiyon atayarak yapılır.
Radar Chart yalnızca veriyi görsel olarak temsil eder, herhangi bir işlem başlatmaz.
Birden fazla veri serisi kullanılsa bile bu seriler aksiyon tetikleyemez, yalnızca görüntülenir.
Radar Chart’a aksiyon eklenemez. Tüm veri güncellemeleri ve kullanıcı etkileşimleri, grafiğin veri kaynağını tetikleyen dış UI elementleri üzerinden yönetilir.
3. Radar Chart Elementi Nasıl Kullanılır?
Bu bölümde Radar Chart elementinin uçtan uca kullanımını örnek bir senaryo üzerinden ele alacağız.
Senaryo: Performans Metrikleri Karşılaştırması
Bir kurum içi değerlendirme ekranında, tek bir kullanıcının son 3 aya ait (Ekim–Kasım–Aralık) performans metrikleri Radar Chart üzerinde karşılaştırmalı olarak sunulur. Grafik; İletişim, Problem Çözme, Ekip Çalışması, Zaman Yönetimi ve Kalite/Dikkat olmak üzere beş temel yetkinlik alanını kapsar. Bu sayede kullanıcı, farklı aylar arasındaki performans değişimini tek bir grafik üzerinden net biçimde izleyebilir.
Uygulama test edildiğinde, her ay farklı bir renkle temsil edilen çizgiler ile gösterilir (Ekim, Kasım, Aralık). Çizgilerin oluşturduğu alanlar, yetkinlik bazında gelişim veya düşüş trendlerini görsel olarak ortaya koyar. Bu yapı, kullanıcının güçlü yönlerini ve geliştirilmesi gereken alanları hızlıca analiz etmesini sağlar.
Senaryoda:
Bu senaryoda, tek bir kullanıcının değerlendirme sonuçları esas alınmıştır. Kullanıcının her bir yetkinlik alanına ait puanları Radar Chart üzerinde tek seri mantığında gösterilerek performans dağılımı vurgulanır.
Örneğin:
Kalite / Dikkat: 90
İletişim: 78
Problem Çözme: 88
Ekip Çalışması: 85
Zaman Yönetimi: 82
Adım 1 - Aksiyon Tanımlama
Arayüzde verileri göstermek için:
Aşağıdaki PersonSkillPerformanceLast3Months aksiyon tanımlamanız gerekir. Örnek senaryoda veriler Select yazılarak tablo kullanılmadan sunulmuştur.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Örnek Verileri Ekleyen Aksiyon (PersonSkillPerformanceLast3Months)
-- Tek kişi - Son 3 ay kıyas (5 yetenek alanı)
SELECT
N'İletişim' AS SkillName,
78 AS Ekim,
82 AS Kasım,
85 AS Aralık,
'#ffa733ff' AS firstColor,
'#33C1FF' AS secondColor,
'#FF5733' AS thirdColor,
N'Ekim' AS Month1Name,
N'Kasım' AS Month2Name,
N'Aralık' AS Month3Name
UNION ALL
SELECT
N'Problem Çözme',
62, 66, 70,
'#ffa733ff', '#33C1FF', '#FF5733',
N'Ekim', N'Kasım', N'Aralık'
UNION ALL
SELECT
N'Ekip Çalışması',
70, 73, 76,
'#ffa733ff', '#33C1FF', '#FF5733',
N'Ekim', N'Kasım', N'Aralık'
UNION ALL
SELECT
N'Zaman Yönetimi',
68, 74, 79,
'#ffa733ff', '#33C1FF', '#FF5733',
N'Ekim', N'Kasım', N'Aralık'
UNION ALL
SELECT
N'Kalite / Dikkat',
75, 78, 82,
'#ffa733ff', '#33C1FF', '#FF5733',
N'Ekim', N'Kasım', N'Aralık';
RadarChart > Properties > Legend > Bottom olarak ayarlayın.
RadarChart > Properties > LevelColor çizgi rengini HEX alanından “8C8C8C” olarak girin ve kapatın.
Değer aralıklarını RadarChart > Properties > LevelFrequency > 10 olarak tanımlayın.
Preview:
Uygulama test edildiğinde, en iyi üç şirketin performans metriklerinin Radar Chart üzerinde karşılaştırıldığı görülür. Her metrik ekseninde şirketlerin güçlü ve zayıf yönleri görsel olarak kolayca ayırt edilebilir. Grafik yanındaki Legend alanına tıklayarak her bir şirketin görünürlüğünü kolayca filtreleyebilirsiniz.
4. Ortak Özellikler (Properties)
Radar 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:
