Gauge Chart elementi, tek bir ölçümün mevcut durumunu veya belirlenen bir hedefe ne kadar yaklaşıldığını hızlıca görselleştirmeyi sağlar. Genellikle yarım daire ya da tam daire formunda, bir ibre ile gösterilir. Performans göstergeleri, KPI takibi ve hedef karşılaştırmaları için kullanılır.

Gauge Chart elementi yalnızca web uygulamalarında desteklenir.

Kullanım Alanları

• KPI takibi (örn. satış hedefinin % kaçı gerçekleşti),
• Performans izleme (örn. müşteri memnuniyeti skoru),
• Risk/sağlık göstergeleri (örn. sistem kaynak kullanımı, hata oranı),
• Hedef karşılaştırmaları vb. 

Satış Hedefi Takibi

Bir e-ticaret şirketinde, aylık satış hedefi 100.000 ₺ olarak belirlenmiştir. Gauge Chart sayesinde kullanıcı, mevcut satış miktarını ve hedefe ne kadar yaklaşıldığını ibre ile 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 “KPIData” adını verin.
3. Aşağıdaki tabloyu oluşturun.

4. SQL Actions’a tıklayın ve SQL Actions üzerinden aksiyona “KPIData” ismini verin.
5. Aşağıdaki SQL örneğini kullanın:

SELECT 'Sales Target' AS Metric, 75000 AS CurrentValue, 100000 AS MaxValue

Alternatif olarak C# ile de oluşturabilirsiniz.

UI Design Modülü İşlemleri

1. Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın.
2. Custom > KPIData aksiyonunu seçin.
3. Gauge Chart elementini ekleyin.
4. Properties paneli Value alanından KPIData aksiyonunu Symbol Picker ile seçin.

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

• Max
  
  • Açıklama: Gösterilecek maksimum değeri belirler.
  • Örnek: 100000 (hedef satış).
• Value
  
  • Açıklama: Anlık değeri ifade eder; ibre bu değeri gösterir.
  • Örnek: 75000 (gerçekleşen satış).
• Colors
  
  • Açıklama: Gauge üzerindeki renk alanlarını belirler.
  • Kullanım: Başarı → Yeşil (#28a745), Uyarı → Turuncu (#FF7F50), Tehlike → Kırmızı (#dc3545).
• Hide Percentage
  
  • Açıklama: Yüzdelik değerlerin gösterilip gösterilmeyeceğini belirler.
  • Örnek: Aktif edilirse sadece ibre görünür, yüzdelik bilgi gizlenir.

Senaryo Adımı Tamamlandığında

• Gauge Chart üzerinde hedef (Max) = 100.000 ₺ olarak belirlenir.
• İbre, mevcut değer (Value) = 75.000 ₺ noktasını gösterir.
• Renk alanları kullanılarak ibre hangi seviyede olduğu görselleştirilir (örn. %0–50 kırmızı, %50–80 turuncu, %80–100 yeşil).
• Kullanıcı hedefe ulaşılıp ulaşılmadığını tek bakışta anlayabilir.

Kısıtlamalar

• Gauge Chart yalnızca web uygulamalarında desteklenir.
• Mobil cihazlarda Gauge Chart elementi çalışmaz.

İpuçları ve Best Practices

Maksimum değer (Max) doğru tanımlanmazsa ibre yanlış konumda görünebilir.

• Renk aralıklarını kontrastlı seçmek okunabilirliği artırır.
• Çok fazla Gauge Chart aynı ekrana eklenirse görsel karmaşa yaratabilir, ideal sayı 1–3 arasıdır.