Mixed Chart elementi, farklı grafik türlerini (ör. Bar + Line) tek bir görselde birleştirerek karmaşık veri setlerini kapsamlı ve anlaşılır şekilde sunar. Çoklu veri serilerini karşılaştırmak, farklı ölçümleri aynı anda analiz etmek veya trend + dağılım bilgilerini birlikte göstermek için kullanılır.

Mixed Chart elementi hem web hem de mobil uygulamalarda desteklenir.

Kullanım Alanları

• Satış miktarı (Bar) ile satış trendini (Line) aynı grafikte göstermek,
• Web site trafiği (Bar) ile dönüşüm oranını (Line) birlikte takip etmek,
• Gelir ve gider dağılımlarını karşılaştırmalı sunmak,
• KPI değerlerini farklı görselleştirme stilleriyle aynı ekranda göstermek vb. 

Satış ve Gelir Takibi

Bir e-ticaret sitesinde aylık satış adetleri Bar Chart ile, satış gelirleri ise Line Chart ile aynı Mixed Chart üzerinde gösterilir.

• X ekseni: Ay bilgileri (Ocak, Şubat, Mart…)
• Bar Chart serisi: Satış miktarı
• Line Chart serisi: Satış geliri (₺)
• Tooltip üzerinde hem satış hem gelir bilgisi birlikte gösterilir.

Veri Kaynağı Bağlama

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

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

SELECT 'January' AS SalesMonth, 1200 AS SalesCount, 150000.00 AS SalesRevenueUNION ALLSELECT 'February', 1000, 130000.00UNION ALLSELECT 'March', 1400, 170000.00UNION ALLSELECT 'April', 1600, 200000.00UNION ALLSELECT 'May', 1800, 220000.00UNION ALLSELECT 'June', 2000, 250000.00

UI Design Modülü İşlemleri

1. Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın.
2. Custom > SalesMixedData aksiyonunu seçin.
3. Mixed Chart elementini ekleyin.
4. Properties paneli Options alanından SalesMixedData aksiyonunu seçin.

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

Genel Özellikler

• Options > Actions
  
  • Açıklama: Grafikte gösterilecek verilerin çekileceği SQL aksiyonlarını seçin.
  • Örnek: SalesMixedData
• X Axis Field
  
  • Açıklama: X ekseninde gösterilecek alan.
  • Örnek: SalesMonth
    
• Axis Value Field
  
  • Açıklama: Y ekseninde gösterilecek veri alanı.

Mixed Chart – Point (Nokta) Özellikleri

• Options > Action: Nokta verilerini getiren aksiyonu seçin.
• X Axis Field: Noktaların konumlandırılacağı alan.
• Axis Value Field: Nokta değerlerini belirler.
• Custom Tooltip Line: Tooltip’te özel satır bilgisi.
• Custom Tooltip Value: Tooltip içindeki özel değer.
• Color: Nokta rengi.

Mixed Chart – Line (Çizgi) Özellikleri

• Options > Actions: Çizgi verilerini getiren aksiyon.
• X Axis Value Field: Çizginin yatay eksen verisi.
• Axis Value Field: Çizginin değer alanı.
• Custom Tooltip Title: Tooltip başlığı.
• Custom Tooltip Value: Tooltip içeriği.
• Color: Çizgi rengi.
• Label: Çizgi serisini tanımlayan etiket.
• Dash Spacing: Kesikli çizgi aralıkları.
• Dash Length: Kesikli çizgi uzunluğu.
• Line Width: Çizgi kalınlığı.

Senaryo Adımı Tamamlandığında

• X ekseninde: Ay isimleri (Ocak–Haziran) görünür.
• Bar serisi: Satış miktarı mavi çubuklarla gösterilir.
• Line serisi: Satış geliri yeşil çizgi ile gösterilir.
• Tooltip açıldığında: Hem satış adedi hem satış geliri bilgisi gösterilir.
• Kullanıcı satış performansını hem adet hem gelir bazında kolayca analiz edebilir.

Kısıtlamalar

• Çok fazla seri eklendiğinde grafik karmaşıklaşabilir.
• “Tooltip Custom” özellikleri yalnızca web uygulamalarında gelişmiş gösterim sunar.

İpuçları ve Best Practices

Bar ve Line serilerinde renk kontrastlarını yüksek tutun.

• Çok fazla kategori eklerseniz okunabilirlik azalır → ideal ay sayısı: 6–12.
• Büyük veri kümelerinde performans için sorguları sınırlayın.
• Mobil görünüm için çizgi kalınlıklarını ve eksen yazı boyutlarını optimize edin.