1. Mixed Chart Elementine Genel Bakış

Mixed Chart elementi, birden fazla grafik türünü tek bir yapı içinde birleştirerek farklı veri türlerini aynı anda görselleştirmenizi sağlar. Bar, line, area gibi grafik tiplerinin aynı grafik üzerinde bir arada kullanılmasına olanak tanır. Bu özellik, hem kategorik hem de zaman serisi verilerini karşılaştırmak, trendleri ve dağılımları aynı anda sunmak için oldukça etkilidir. Karmaşık veri setlerini daha okunabilir hale getirir ve kullanıcıların veriler arasındaki ilişkileri tek bir grafik üzerinden analiz etmesine yardımcı olur.

Mixed Chart elementi hem web hem de mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Birden fazla veri türünü aynı grafikte karşılaştırmak (ör. satış miktarını bar grafikle, satış trendini line grafikle birlikte göstermek)
• Kategorik ve zaman serisi verilerini tek bir görünümde birleştirmek
• Hem toplam değerleri hem de eğilimleri aynı anda analiz etmek (ör. aylık toplam satışlar + satış trend çizgisi)
• Farklı veri ölçeklerini tek bir grafik üzerinden sunmak (ör. adet bazlı bar grafik + oran bazlı line grafik)
• Dağılım ve trendi aynı anda göstermek (ör. gelir dağılımı bar olarak, gelir artış oranı line olarak)
• Karmaşık veri setlerinin okunabilirliğini artırmak. Birden fazla metriği tek bir yerde göstermek dashboard yoğunluğunu azaltır.

2. Temel Özellikler

• Birden fazla grafik tipini tek grafikte birleştirme desteği. Bar, Line, Area gibi farklı grafik türleri aynı görünümde kullanılabilir.
• Farklı veri türlerinin aynı eksen veya ayrı eksenlerde gösterilebilmesi. Sayısal değerler bar grafikle, oran veya trend verileri line grafikle sunulabilir.
• Birden çok veri serisini aynı anda görselleştirebilme. Karmaşık veri kümelerini tek grafik üzerinden analiz etmek için kullanılabilir.
• X (kategori/zaman) ve Y (değer) eksenlerinin özelleştirilebilmesi
• Her bir veri serisi için ayrı renk, çizgi stili, çubuk kalınlığı ve opaklık tanımlama imkânı
• Tooltiplerde birden fazla veri serisinin görüntülenebilmesi. Kullanıcı grafiğin üzerine geldiğinde tüm ilgili veri serileri birlikte gösterilir.
• Veri kaynağından dinamik olarak grafik verisi yükleme. SQL, REST API veya Managed DB aksiyonlarından gelen verilerle anlık güncellenebilir.
• Dashboardlarda karma verileri sade bir görünümle sunma avantajı

2.1. Element Ayarları (Properties)

Mixed Chart elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden grafik veri kaynaklarını, bar/line/point türlerinin yapılandırmalarını, tooltip ayarlarını ve görsel düzenlemeleri detaylı şekilde yapılandırabilirsiniz. Aşağıdaki tüm ayarlar madde madde açıklanmıştır.

2.1.1. Genel Grafik Ayarları – Options

Actions

• Grafikte gösterilecek tüm veri serilerinin yüklendiği SQL aksiyonlarını belirler.
• Birden fazla aksiyon ekleyebilir ve bunları farklı grafik türlerine (bar, line, point) bağlayabilirsiniz.

X Axis Field

• X ekseninde gösterilecek kategori veya tarih değerlerini belirler.
• Tüm grafik türleri bu eksen alanını referans alır.

Axis Value Field

• Y ekseninde gösterilecek temel değer setini belirler.
• Bar veya line serilerinde dikey eksen bu alana göre çizilir.

2.1.2 Mixed Chart – Point Özellikleri

Bu bölüm, Mixed Chart içinde nokta (point) olarak gösterilen veri serilerinin ayarlarını içerir.

Options → Action

• Nokta şeklinde görüntülenecek veri serisinin hangi aksiyondan yükleneceğini belirler.

X Axis Field

• Point verilerinin X ekseninde hangi değere karşılık geldiğini belirtir.

Axis Value Field

• Point üzerindeki değerin veya açıklamanın hangi alandan alınacağını belirler.

Custom Tooltip Line

• Tooltip içinde gösterilecek özel satır bilgisini tanımlar. (Örn. açıklama, alt bilgi, ek metin)

Custom Tooltip Value

• Tooltip içerisinde gösterilecek özel değeri belirler. (Örn. noktanın sayısal değeri veya yüzdesi)

Color

• Noktanın rengini belirler. Her point serisi için farklı renk tanımlanabilir.

2.1.3 Mixed Chart – Line Özellikleri

Bu bölüm, Mixed Chart içinde çizgi (line) olarak kullanılan veri serilerine ait ayarları içerir.

Options → Actions

• Line veri serisini yüklemek için kullanılan SQL aksiyonlarını tanımlar.

X Axis Value Field

• Çizgi üzerindeki noktaların X ekseninde hangi değere karşılık geldiğini belirtir.
  (Örn. tarih, kategori)

Axis Value Field

• Line serisinin değerlerini belirler. Çizginin yüksekliği bu veri üzerinden oluşturulur.

Custom Tooltip Title

• Tooltip üzerinde gösterilecek özel başlığı tanımlar. (Örn. "Gelir", "Birim Sayısı", "Trend Değeri")

Custom Tooltip Value

• Tooltip içerisinde gösterilecek özel değeri belirler. Kullanıcı çizgi üzerindeki noktaya geldiğinde görüntülenir.

Color

• Çizgi rengini belirler. Her line serisi için farklı renk seçilebilir.

Label

• Line serisini tanımlayan etikettir. Legend üzerinde bu etiket görünür.

Dash Spacing

• Kesikli çizgi modunda çizgiler arasındaki boşluk miktarını belirler.

Dash Length

• Kesikli çizgilerin uzunluğunu tanımlar.

Line Width

• Çizgi kalınlığını ayarlar. Daha kalın çizgi → vurgulu trend. Daha ince çizgi → hafif görselleştirme için uygundur.

2.2 Elemente Eklenebilen Aksiyonlar

Mixed Chart elementi, veri görselleştirme odaklı pasif bir bileşen olduğu için kullanıcı etkileşimiyle aksiyon tetikleme özelliğini desteklemez. Bu nedenle Mixed Chart seçildiğinde ADD ACTION butonu görüntülenmez ve grafik üzerine özel bir tetikleyici (trigger) eklenemez.

Mixed Chart’ın aksiyon yapısı aşağıdaki prensiplere göre çalışır:

• Mixed Chart üzerinde kullanıcı tıklaması, bar/line/point etkileşimi veya hover işlemleri aksiyon tetiklemez.
• Grafiğin güncellenmesi, Mixed Chart’a bağlı olan Datasource / Actions listesinin dışarıdan tetiklenmesi ile gerçekleşir.
• Kullanıcı seçimleriyle grafik değişimi gerektiren senaryolar (ör. “yıla göre rapor filtrele”, “kategoriyi değiştir”), Button, Radio Group gibi elementler üzerinden aksiyon eklenerek yönetilir.
• Mixed Chart yalnızca veriyi gösterir, herhangi bir işlem başlatmaz.

Mixed Chart elementine aksiyon eklenemez; tüm veri güncellemeleri ve kullanıcı etkileşimleri grafik dışında tanımlanan aksiyonlarla yönetilir.

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

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

Senaryo: Kullanıcı Büyüme Projeksiyonu Analizi
‍

‍

Bir mobil uygulamanın aylık kullanıcı büyümesini takip etmek için Mixed Chart kullanılır.

Senaryoda:

• Gerçekleşen kullanıcı sayısı (Actual Users)
• Tahmini kullanıcı sayısı (Projected Users)
• İyimser büyüme senaryosu (Optimistic Users)

Örneğin (Aylık Büyüme Verileri):

Gerçekleşen Kullanıcı Sayısı (Actual Users)

• Ay 0 → 120 kullanıcı
• Ay 3 → 160 kullanıcı
• Ay 6 → 190 kullanıcı

Tahmini Kullanıcı Sayısı (Projected Users)

• Ay 0 → 130 kullanıcı
• Ay 3 → 170 kullanıcı
• Ay 6 → 200 kullanıcı

İyimser Senaryo (Optimistic Users)

• Ay 0 → 140 kullanıcı
• Ay 3 → 180 kullanıcı
• Ay 6 → 215 kullanıcı

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

• Önemli Alan adları:
  
  • MonthNumber: Uygulamanın yayına alınmasından itibaren geçen ay sayısını belirtir. Grafik üzerinde zaman ekseni olarak kullanılır.
  • ActualUsers: İlgili dönemde uygulamayı gerçekten kullanan toplam kullanıcı sayısını ifade eder. Grafikte ana gerçekleşen veri serisini temsil eder.
  • ProjectedUsers: Matematiksel modelleme veya büyüme tahmini sonucunda hesaplanan kullanıcı sayısını gösterir. Geleceğe yönelik öngörü analizleri için kullanılır.
  • OptimisticUsers: İyimser büyüme senaryosuna göre tahmin edilen kullanıcı sayısını ifade eder. Potansiyel maksimum büyüme eğrisini incelemek için kullanılır.

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

INSERT INTO GrowthProjections
(Id, MonthNumber, ActualUsers, ProjectedUsers, OptimisticUsers)
VALUES
(NEWID(),  0, 120, 125, 140),
(NEWID(),  3, 160, 160, 180),
(NEWID(),  6, 190, 220, 215),
(NEWID(), 12, 220, 245, 250),
(NEWID(), 18, 240, 270, 270),
(NEWID(), 24, 260, 280, 295),
(NEWID(), 30, 280, 270, 320);

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

• Verileri Sağlayan ve Filtreleyen Aksiyon (GetGrowthProjections):

SELECT
    MonthNumber,
    ActualUsers,
    ProjectedUsers,
    OptimisticUsers,
    Id
FROM dbo.GrowthProjections
ORDER BY MonthNumber;

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

Adım 4 - Elementleri Ekleme

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

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

• Label > Properties > Value alanına “Kullanıcı Büyüme Trendleri” metnini ekleyin.
• Label alanının fontunu Label > Styling > Text > Style > Heading 2 olarak ayarlayın.

• Mixed Chart > Properties içerisinde yeni iki Line ve bir Point daha ekleyin.

• Mixed Chart içerisine verileri sağlayacak MixedChart > Properties > Options > Action > GetGrowthProjections aksiyonunu ekleyin. Aşağıdaki tanımlamaları yapın:

• Mixed Chart > Properties içerisindeki birinci Line için Options alanına aşağıdaki tanımlamaları yapın:

• Birinci Line içerisindeki Color alanını mavi (448EF7) olarak ayarlayın.
• İkinci Line içinde benzer şekilde aşağıdaki tanımlamaları yapınız.

• İkinci Line içerisindeki Color alanını turkuvaz (5ABFC1) olarak ayarlayın.
• Üçüncü Line içinde benzer şekilde aşağıdaki tanımlamaları yapınız.

• Üçüncü Line içerisindeki Color alanını turuncu (E76033) olarak ayarlayın.
• Point için de aşağıdaki tanımlamayı yapın:

• Son olarak Point içerisindeki Color alanını pembe (D84293) olarak ayarlayın.

Preview:

Uygulama test edildiğinde, seçilen ay aralığındaki gerçekleşen, tahmini ve iyimser kullanıcı sayılarına ait verilerin Mixed Chart üzerinde doğru şekilde görüntülendiği gözlemlenir.

4. Ortak Özellikler (Properties)

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

Mixed Chart, birden fazla veri serisini ve grafik tipini aynı yapıda barındırdığı için doğru ayarlandığında güçlü analizler sunar. En iyi sonuçlar için aşağıdaki tavsiyelere dikkat edilmelidir:

• Bar ve line türlerini mantıklı şekilde eşleştirin. Toplam değerleri bar ile, trend veya oranları line ile göstermek en doğru yaklaşımdır.
• X eksenindeki verileri mutlaka düzenli ve tutarlı sağlayın. Kategoriler veya tarihler sıralanmamışsa bar/line/point yapıları doğru hizalanmayabilir.
• Çok fazla veri serisi kullanmaktan kaçının. 3’ten fazla line + 3’ten fazla bar grafik aynı anda kullanıldığında grafik karışabilir.

6. Kısıtlamalar

Mixed Chart elementi kullanılırken aşağıdaki sınırlamalar göz önünde bulundurulmalıdır:

• Kullanıcı etkileşimiyle aksiyon tetiklemez. Bar’a, çizgiye veya point’e tıklama işlem başlatmaz.
• Birden fazla veri kaynağı kullanıldığında tüm aksiyonların paralel veri yapısına sahip olması gerekir. X eksenindeki değerler uyumsuzsa grafikler hizalanmaz.
• Formatsız veya hatalı veri tipleri çizim bozukluklarına yol açabilir. Özellikle sayısal olmayan alanlar Y ekseninde hata üretir.
• Aşırı büyük veri setleri performans problemi yaratabilir. Çok fazla bar + line + point kombinasyonu tarayıcı render süresini artırır.
• Kesikli çizgi ayarları (dash) yalnızca line serileri için geçerlidir; bar ve point için uygulanamaz.
• Çoklu Y ekseni kullanımında tüm veri serilerinin doğru eksene bağlanması gerekir; aksi halde değerler yanlış temsil edilir.