Chart

Verileri grafik olarak gösteren nesnedir. Çizgi, sütun, pasta, alan, nokta gibi farklı türlerle sayısal verileri görsel hale getirir.

Bu nesnenin tek bir değeri yoktur. Chart bir görsel nesnedir; kullanıcıdan veri almaz, kendisine verdiğiniz veriyi çizer. Grafiği iki parçadan oluşturursunuz: çizilecek veri (Data ya da DataSource) ve bu verinin nasıl çizileceğini anlatan seri tanımları (Charts listesi). Veriyi ya da serileri kodla değiştirdikten sonra Reload() çağırarak grafiği yeniden çizdirirsiniz.

Ne zaman kullanılır?

Tablolaşmış sayıları tek bakışta anlaşılır kılmak istediğinizde kullanılır: aylık talep sayıları, departman bazında bütçe dağılımı, yıllara göre satış gibi. Sayıların listesini göstermek istiyorsanız DataGrid daha uygundur; Chart ise o sayıların grafiğini çizer.

Türetilmiş grafik nesneleri

Chart taban nesnedir. LineChart, SplineChart, BarChart, AreaChart, PieChart ve ScatterChart nesneleri bu taban nesneden türer; ek bir özellik getirmezler, yalnızca varsayılan seri türünü (örn. BarChart için BarSeries) ön ayarlı verirler. Bu sayfadaki tüm özellikler, olaylar ve kod kalıpları altı nesnenin hepsi için geçerlidir.

Tasarımcı özellikleri

Bir Chart seçildiğinde Özellik Görüntüleyici sekmelere ayrılır.

General

Özellik	Açıklama
`Name`	Nesnenin koddaki adı (ör. `Chart1`). Koddan bu adla erişirsiniz.

Veri kaynağı (Data Source)

Chart'ın çizeceği veriyi buradan beslersiniz. Veriyi ya hazır bir veri kaynağından çekersiniz ya da koddan kendiniz verirsiniz.

Özellik	Tip	Açıklama
`DataSource`	`DataSource`	Grafiğin bağlanacağı veri kaynağı (sorgu, liste vb.). Satırlar grafiğe dönüşür.
`Data`	`Object`	Grafiğe doğrudan kod ile verilen veri nesnesi (satır listesi). Veri kaynağı yerine kendi hazırladığınız veriyi vermek için kullanılır.

Behavior

Özellik	Tip	Açıklama
`Charts`	`List<ChartItem>`	Grafik serilerinin listesi. Her seri bir grafik türü (`Type`) ve hangi alanı çizeceğini (`ArgumentField` / `ValueField`) tutar.
`ArgumentAxis`	`ChartArgumentAxis`	Yatay eksen (X). Kategorilerin / etiketlerin gösterildiği eksendir.
`ValueAxis`	`ChartValueAxis`	Dikey eksen (Y). Sayısal değerlerin gösterildiği eksendir.
`Legend`	`ChartLegend`	Açıklama kutusu. Serilerin renk ve adlarını gösteren gösterge.
`Tooltip`	`ChartTooltip`	İmleç bir noktanın üzerine gelince çıkan bilgi balonu.
`Hover`	`ChartHover`	İmleç grafiğin üzerindeyken oluşan vurgulama davranışı.
`Selection`	`ChartSelection`	Grafik üzerinde bir öğenin seçilebilmesi ve seçili görünümü.
`Animation`	`ChartAnimation`	Grafik çizilirken oynatılan hareket efekti.
`Stack`	`ChartStack`	Serilerin üst üste yığılarak (stacked) gösterilmesi ayarı.
`Rotate`	`Boolean`	Grafiği döndürür; örneğin sütun grafiği yatay çubuk grafiğe çevirir.
`ZoomAndPan`	`ChartZoomAndPan`	Kullanıcının grafikte yakınlaşıp kaydırabilmesi (zoom / pan) ayarı.

Appearance

Özellik	Tip	Açıklama
`Title`	`MultiLanguageText`	Grafiğin üstünde görünen başlık. Çok dilli bir metin nesnesidir; düz string değil.
`Visible` / `Client Visible`	`Boolean`	Nesnenin görünürlüğü.
`Enabled` / `Client Enabled`	`Boolean`	Nesnenin aktif olup olmadığı.
`Loading`	`Boolean`	Grafiğin yükleniyor durumunda olup olmadığı. `ShowLoading()` / `HideLoading()` ile yönetilir.

Yardımcı nesneler ve enum'lar

Chart'ı koddan kurarken bu yardımcı nesneleri ve sabit listelerini (enum) kullanırsınız.

ChartItem (bir seri)

Charts listesindeki her eleman bir seridir. Her seri, verinin hangi alanını hangi türde çizeceğini söyler.

Alan	Tip	Açıklama
`Type`	`ChartType`	Serinin türü (çizgi, sütun, pasta...).
`ArgumentField`	`String`	X eksenine düşen alanın adı (kategori / etiket).
`ValueField`	`String`	Y eksenine düşen sayısal alanın adı (değer).
`Name`	`String`	Serinin gösterge (legend) üzerinde görünen adı.
`Color`	`String`	Serinin rengi (ör. `"#3366ff"`).
`BarWidth`	`Nullable<Int32>`	Sütun serilerinde çubuk genişliği.
`ScaleName`	`String`	Çoklu eksen senaryolarında serinin bağlandığı eksen ölçeğinin adı.

ChartType (seri türleri)

LineSeries, SplineSeries, BarSeries, ScatterSeries, AreaSeries, PieSeries

ChartPosition (gösterge ve eksen konumu)

Left, Top, Right, Bottom — Legend.Position, ArgumentAxis.Position ve ValueAxis.Position için kullanılır.

ChartInteraction (zoom / pan davranışı)

None, Pan, Zoom, Both — ZoomAndPan.InteractionWithArguments ve ZoomAndPan.InteractionWithValues için kullanılır.

ChartZoomRegion (zoom kısayol tuşu)

Shift, Alt, Ctrl — ZoomAndPan.ZoomRegionKey için kullanılır; kullanıcının hangi tuşa basılı tutarak bölge seçip yakınlaşacağını belirler.

Eksen nesneleri (ChartArgumentAxis / ChartValueAxis)

Her iki eksen de aynı alanları taşır:

Alan	Tip	Açıklama
`Enabled`	`Boolean`	Eksenin etkin olup olmadığı.
`Position`	`ChartPosition`	Eksenin konumu.
`ShowGrid`	`Boolean`	Arka plan ızgara çizgilerini gösterir.
`ShowLabels`	`Boolean`	Eksen etiketlerini gösterir.
`ShowLine`	`Boolean`	Eksen çizgisini gösterir.
`ShowTicks`	`Boolean`	Eksen üzerindeki çentikleri gösterir.
`TickSize`	`Nullable<Int32>`	Çentik uzunluğu.
`IndentFromAxis`	`Nullable<Int32>`	Etiketlerin eksenden uzaklığı.
`ScaleName`	`String`	Eksen ölçeğinin adı (çoklu eksen için).

Modül nesneleri

Nesne	Alanlar
`ChartLegend`	`Enabled` (`Boolean`), `Position` (`ChartPosition`)
`ChartStack`	`Enabled` (`Boolean`), `Series` (`List<String>`) — birlikte yığılacak seri adları
`ChartZoomAndPan`	`Enabled` (`Boolean`), `InteractionWithArguments` / `InteractionWithValues` (`ChartInteraction`), `ZoomRegionKey` (`ChartZoomRegion`)
`ChartTooltip`, `ChartHover`, `ChartSelection`, `ChartAnimation`	Yalnızca `Enabled` (`Boolean`) taşır; ilgili davranışı açıp kapatır.

Olaylar

Chart bir görsel nesnedir; kullanıcıdan değer almadığı için değer değişim olayları (OnValueChanged vb.) yoktur. Nesnenin tek tetiklediği kullanıcı olayları, VisualControl tabanından gelen tıklama olaylarıdır.

Yaşam döngüsü olayı beklemeyin

Chart nesnesinde OnInit, OnLoad, OnDataLoad, OnPreRender, OnRender, OnPropertyChanging / OnPropertyChanged gibi olaylar tanımlı değildir. Grafiğin verisini, formun kendi yaşam döngüsü kodunda (örn. form yüklenirken çalışan kodunuzda) hazırlayıp Reload() ile çizdirin.

Sunucu / İstemci olayları

Olay	Ne zaman çalışır
`OnClick`	Grafiğe tıklanınca.
`OnDoubleClick`	Grafiğe çift tıklanınca.

Tıklamayı koddan tetiklemek için FireClick() metodunu kullanabilirsiniz.

Metotlar

Metot	Açıklama
`Reload()`	Grafiği yeniden çizer. `Charts` ya da `Data` değiştirdikten sonra çağrılmalıdır.
`ShowLoading()`	Grafiğin üzerine yükleniyor göstergesi koyar.
`HideLoading()`	Yükleniyor göstergesini kaldırır.
`ToggleLoading()`	Yükleniyor göstergesini açıp kapatır.
`Show()` / `Hide()`	Nesneyi gösterir / gizler.
`ScrollTo()`	Sayfayı nesnenin görüneceği yere kaydırır.
`FireClick()`	Tıklama olayını koddan tetikler.

Kod örnekleri

Chart'ın değeri yoktur; kodla genelde serilerini ve verisini besler, sonra Reload() çağırırsınız. Sunucu örnekleri turuncu, istemci örnekleri kırmızı çerçevelidir.

Form kodu (C#, sunucu)

Form kodunda nesneye doğrudan adıyla erişirsiniz. Bu erişim tipli olduğu için Charts, Data, Reload() gibi yalnızca Chart'a ait üyeleri doğrudan kullanabilirsiniz:

// Başlık çok dilli bir metin nesnesidir; düz string atanamaz.
Chart1.Title = new MultiLanguageText(new Dictionary<string, string> {
    { "tr-TR", "Aylık Talep Sayısı" },
    { "en-US", "Monthly Request Count" }
});

// Görünürlük ve aktiflik
Chart1.Visible = true;
Chart1.Enabled = true;

Akış (Flow) kodu (C#, sunucu)

Akış kodunda nesneye Document1.Controls["Chart1"] üzerinden erişirsiniz. Bu indeksleyici taban bir kontrol döndürür; Visible / Enabled gibi ortak üyeler buradan çalışır:

// Grafiği gizle (ortak üye, cast gerekmez)
Document1.Controls["Chart1"].Visible = false;

Charts, Data ya da Reload() gibi yalnızca Chart'a ait üyelere akış kodundan erişmek için döndürülen kontrolü Chart tipine çevirin:

// Tipli erişim için cast
var chart = (Bimser.CSP.FormControls.Controls.Chart)Document1.Controls["Chart1"];
chart.Reload();

İstemci kodu (TypeScript, tarayıcı)

İstemci tarafında nesnelere this. ile erişilir ve özellik adları küçük harfle yazılır:

this.Chart1.visible = true;
this.Chart1.enabled = true;

Veriyi nereden veriyorsunuz?

Grafiği bir veri kaynağına bağlarsanız (DataSource), satırlar otomatik çizilir. Veriyi kod ile hazırlamak isterseniz Data özelliğine kendi hazırladığınız satır listesini verin ve Reload() çağırın. İkisini aynı anda kullanmayın; karışıklığa yol açar.

Örnek 1: Koddan sütun grafiği kurma (Data + Charts + Reload)

En sık kullanılan kalıp budur: satırları hazırlayıp Data'ya verir, Charts ile tek bir sütun serisi tanımlar ve Reload() ile çizdirirsiniz. ArgumentField X eksenindeki alanın adı, ValueField ise Y eksenindeki sayısal alanın adıdır.

// Çizilecek satırlar (her satır AY ve TUTAR alanlarını taşır)
var rows = new List<Dictionary<string, object>> {
    new Dictionary<string, object> { { "AY", "Ocak" },  { "TUTAR", 12 } },
    new Dictionary<string, object> { { "AY", "Şubat" }, { "TUTAR", 19 } },
    new Dictionary<string, object> { { "AY", "Mart" },  { "TUTAR", 8  } }
};

// Tek sütun serisi: AY -> X, TUTAR -> Y
Chart1.Charts = new List<Bimser.CSP.FormControls.Controls.ChartItem> {
    new Bimser.CSP.FormControls.Controls.ChartItem {
        Type          = Bimser.CSP.FormControls.Controls.ChartType.BarSeries,
        ArgumentField = "AY",
        ValueField    = "TUTAR",
        Name          = "Talep Sayısı",
        Color         = "#3366ff"
    }
};

Chart1.Data = rows;   // bağlı veri (Object)
Chart1.Reload();      // grafiği yeniden çiz

Örnek 2: Koddan pasta grafiği kurma

Pasta grafiği için seri türünü PieSeries seçersiniz. ArgumentField dilim etiketini, ValueField dilim büyüklüğünü taşır. Göstergeyi sağa alıp animasyonu açalım.

var rows = new List<Dictionary<string, object>> {
    new Dictionary<string, object> { { "DEPARTMAN", "Satınalma" }, { "ADET", 42 } },
    new Dictionary<string, object> { { "DEPARTMAN", "BT" },        { "ADET", 27 } },
    new Dictionary<string, object> { { "DEPARTMAN", "İK" },        { "ADET", 15 } }
};

Chart1.Charts = new List<Bimser.CSP.FormControls.Controls.ChartItem> {
    new Bimser.CSP.FormControls.Controls.ChartItem {
        Type          = Bimser.CSP.FormControls.Controls.ChartType.PieSeries,
        ArgumentField = "DEPARTMAN",
        ValueField    = "ADET",
        Name          = "Departman Bazında Talep"
    }
};

// Gösterge sağda dursun
Chart1.Legend.Enabled  = true;
Chart1.Legend.Position = Bimser.CSP.FormControls.Controls.ChartPosition.Right;

// Çizim animasyonu açık
Chart1.Animation.Enabled = true;

Chart1.Data = rows;
Chart1.Reload();

Örnek 3: Çok serili yığılmış (stacked) sütun grafiği

Aynı satırda birden çok değer alanı varsa her biri için ayrı bir ChartItem eklersiniz. Stack.Series ile hangi serilerin üst üste yığılacağını belirlersiniz; serinin Name'i ile eşleşir.

var rows = new List<Dictionary<string, object>> {
    new Dictionary<string, object> { { "AY", "Ocak" },  { "ONAYLI", 8 }, { "BEKLEYEN", 4 } },
    new Dictionary<string, object> { { "AY", "Şubat" }, { "ONAYLI", 11 }, { "BEKLEYEN", 8 } },
    new Dictionary<string, object> { { "AY", "Mart" },  { "ONAYLI", 6 }, { "BEKLEYEN", 2 } }
};

Chart1.Charts = new List<Bimser.CSP.FormControls.Controls.ChartItem> {
    new Bimser.CSP.FormControls.Controls.ChartItem {
        Type = Bimser.CSP.FormControls.Controls.ChartType.BarSeries,
        ArgumentField = "AY", ValueField = "ONAYLI",
        Name = "Onaylı", Color = "#2e7d32"
    },
    new Bimser.CSP.FormControls.Controls.ChartItem {
        Type = Bimser.CSP.FormControls.Controls.ChartType.BarSeries,
        ArgumentField = "AY", ValueField = "BEKLEYEN",
        Name = "Bekleyen", Color = "#ed6c02"
    }
};

// İki seriyi üst üste yığ
Chart1.Stack.Enabled = true;
Chart1.Stack.Series  = new List<string> { "Onaylı", "Bekleyen" };

Chart1.Data = rows;
Chart1.Reload();

Örnek 4: Yükleniyor göstergesi ile veri kaynağından besleme

Veriyi yavaş bir sorgudan çekiyorsanız, önce yükleniyor göstergesini açın, satırları aldıktan sonra Data'ya verip Reload() çağırın ve göstergeyi kapatın.

Chart1.ShowLoading();   // grafiğin üzerine yükleniyor göstergesi koy

// rows: bir veri kaynağından / sorgudan dönen satır listesi
List<Dictionary<string, object>> rows = SorgudanSatirlariGetir();

Chart1.Charts = new List<Bimser.CSP.FormControls.Controls.ChartItem> {
    new Bimser.CSP.FormControls.Controls.ChartItem {
        Type          = Bimser.CSP.FormControls.Controls.ChartType.LineSeries,
        ArgumentField = "TARIH",
        ValueField    = "TUTAR",
        Name          = "Günlük Tutar"
    }
};

Chart1.Data = rows;
Chart1.Reload();

Chart1.HideLoading();   // göstergeyi kaldır

Örnek 5: Eksenleri ve zoom/pan davranışını ayarlama

Çok sayıda veri noktası olan bir grafikte ızgarayı açıp, kullanıcının Ctrl tuşuyla yatay yakınlaşmasına izin verebilirsiniz.

// X ekseni: etiketler ve ızgara görünsün
Chart1.ArgumentAxis.ShowLabels = true;
Chart1.ArgumentAxis.ShowGrid   = true;
Chart1.ArgumentAxis.Position   = Bimser.CSP.FormControls.Controls.ChartPosition.Bottom;

// Y ekseni: çizgi ve çentikler görünsün
Chart1.ValueAxis.ShowLine  = true;
Chart1.ValueAxis.ShowTicks = true;

// Yatay eksende yakınlaşma + kaydırma, Ctrl ile bölge seçimi
Chart1.ZoomAndPan.Enabled                  = true;
Chart1.ZoomAndPan.InteractionWithArguments = Bimser.CSP.FormControls.Controls.ChartInteraction.Both;
Chart1.ZoomAndPan.InteractionWithValues    = Bimser.CSP.FormControls.Controls.ChartInteraction.None;
Chart1.ZoomAndPan.ZoomRegionKey            = Bimser.CSP.FormControls.Controls.ChartZoomRegion.Ctrl;

Chart1.Reload();

İpuçları

Grafiğin türünü (çizgi, sütun, pasta...) Charts listesindeki her serinin Type alanından belirlersiniz. Tek bir grafikte birden çok seri gösterebilirsiniz.
Charts ya da Data özelliğini koddan değiştirdiyseniz mutlaka Reload() çağırın; aksi halde grafik eski halinde kalır.
Title düz string değil, çok dilli bir MultiLanguageText nesnesidir. new MultiLanguageText(new Dictionary<string,string>{ ... }) ile kurun.
Sütun grafiği yatay çubuk grafiğe çevirmek için ayrı bir tür aramayın; Rotate özelliğini açmanız yeterlidir.
Çok sayıda veri noktası varsa ZoomAndPan özelliğini açarak kullanıcının grafikte yakınlaşıp kaydırmasına izin verin.
Akış kodundan tipli üyelere (Charts, Data, Reload()) ulaşmak için Document1.Controls["Chart1"] sonucunu Chart tipine cast edin; ortak üyeler (Visible, Enabled) için cast gerekmez.
LineChart, BarChart, PieChart vb. türetilmiş nesneler aynı kod yüzeyini paylaşır; bu sayfadaki tüm örnekler onlar için de geçerlidir.

Tüm tasarımcı özellikleri (tam liste)

General: Name

Data Source: Data, DataSource

Behavior: Animation, ArgumentAxis, Charts, Hover, Legend, Rotate, Selection, Stack, Tooltip, ValueAxis, ZoomAndPan

Appearance: Title, Visible, Client Visible, Enabled, Client Enabled, Loading

Yardımcı tipler: ChartItem (Type, ArgumentField, ValueField, Name, Color, BarWidth, ScaleName), ChartArgumentAxis / ChartValueAxis (Enabled, Position, ShowGrid, ShowLabels, ShowLine, ShowTicks, TickSize, IndentFromAxis, ScaleName), ChartLegend (Enabled, Position), ChartStack (Enabled, Series), ChartZoomAndPan (Enabled, InteractionWithArguments, InteractionWithValues, ZoomRegionKey), ChartTooltip / ChartHover / ChartSelection / ChartAnimation (Enabled)

Enum'lar: ChartType (LineSeries, SplineSeries, BarSeries, ScatterSeries, AreaSeries, PieSeries), ChartPosition (Left, Top, Right, Bottom), ChartInteraction (None, Pan, Zoom, Both), ChartZoomRegion (Shift, Alt, Ctrl)

Metotlar: Reload, ShowLoading, HideLoading, ToggleLoading, Show, Hide, ScrollTo, FireClick

Olaylar: OnClick, OnDoubleClick

Türetilmiş nesneler: LineChart, SplineChart, BarChart, AreaChart, PieChart, ScatterChart

Bu sayfa hakkında ne düşünüyorsunuz?

Ne zaman kullanılır?​

Tasarımcı özellikleri​

General​

Veri kaynağı (Data Source)​

Behavior​

Appearance​

Yardımcı nesneler ve enum'lar​

ChartItem (bir seri)​

ChartType (seri türleri)​

ChartPosition (gösterge ve eksen konumu)​

ChartInteraction (zoom / pan davranışı)​

ChartZoomRegion (zoom kısayol tuşu)​

Eksen nesneleri (ChartArgumentAxis / ChartValueAxis)​

Modül nesneleri​

Olaylar​

Sunucu / İstemci olayları​

Metotlar​

Kod örnekleri​

Form kodu (C#, sunucu)​

Akış (Flow) kodu (C#, sunucu)​

İstemci kodu (TypeScript, tarayıcı)​

Örnek 1: Koddan sütun grafiği kurma (Data + Charts + Reload)​

Örnek 2: Koddan pasta grafiği kurma​

Örnek 3: Çok serili yığılmış (stacked) sütun grafiği​

Örnek 4: Yükleniyor göstergesi ile veri kaynağından besleme​

Örnek 5: Eksenleri ve zoom/pan davranışını ayarlama​

İpuçları​