Merhaba, bu yazıda sizlere C# ile Devexpress Side-by-Side Stacked Bar Chart Control Kullanımı hakkında bilgi vereceğim.
Daha çok grafiksel raporlamalarda kullanacağımız Chart Control hakkında bilgi vereceğim. Bu componenti kullanmak için Devexpress yüklü olması gerekiyor. Bende Devexpress yüklü olduğu için yüklemesini anlatmayacağım yani yüklü varsayarak anlatacağım.
Side-by-Side Stacked Bar Chart Control İşimize Nerede Yarar ?
Bahsettiğim gibi daha çok grafiksel raporlamalarda işimize yarar. Bugün anlatacağım side-by-side stacked bar Chart Control’un türüdür. Bu side-by-side stacked bar üst üste iki değerin toplamının toplam sonucu vermesini sağlar. Örnek vermek gerekirse Pozitif ve Negatif değerler gibi olabilir. Bende bugün aylara göre Pozitif ve Negatif değerler üzerinden gideceğim.
Şimdi yavaş yavaş projemizin nasıl yapılacağına geçmek istiyorum. İlk önce gerekli DLL’leri sistemimize eklememiz gerekiyor.
1 2 3 4 5 6 7 8 9 | DevExpress.Charts.v15.1.Core DevExpress.Data.v15.1 DevExpress.Utils.v15.1 DevExpress.XtraBars.v15.1 DevExpress.XtraCharts.v15.1 DevExpress.XtraCharts.v15.1.UI DevExpress.XtraCharts.v15.1.Wizard DevExpress.XtraEditors.v15.1 DevExpress.XtraPrinting.v15.1 |
Not : Bunları elle eklemek istemiyorsanız, Toolbax bölümünden chart control’u formunuza eklerseniz otomatik olarak Reference bölümüne eklenecektir.
Daha sonra Using Namespace’sine aşağıdaki kodu ekliyoruz.
1 | using DevExpress.XtraCharts; |
Aşağıdaki kodda dinamik olarak chart control nesnesi oluşturuyoruz.
1 | ChartControl sideBySideBarChart = new ChartControl(); |
Daha sonra Series oluşturuyoruz. Bu grafikteki değerlerimizin tutulacağı bir nesnedir. Ben aylara göre ne kadar negatif ne kadar pozitif değer var onu karşılaştıracağım için iki tane Series oluşturdum. Series’ın birinci değeri adı, ikince değeri ise tipi ben burada Bar olarak kullanmayı tercih ettim. Siz farklı tipleri seçebilirsiniz.
1 2 | Series series1 = new Series("Negatif", ViewType.SideBySideStackedBar); Series series2 = new Series("Pozitif", ViewType.SideBySideStackedBar); |
Series’e değerleri eklemeye geldi sıra ben random bir değer oluşturdum her defasında ancak siz Database’den de verileri çekebilirsiniz. Series’in birinci değeri adı, ikinci değeri ise sayı olarak girilmesi gerekiyor.
1 2 3 4 5 6 | Random r = new Random(); for (int i = 0; i < 12; i++) { series1.Points.Add(new SeriesPoint(i + 1, r.Next(0, 100000))); series2.Points.Add(new SeriesPoint(i + 1, r.Next(0, 100000))); } |
Bundan sonra yapacağımız işlem Seriesleri aralık olarak belirlemek yani kaç tane seriesimiz varsa isimlerini yazmak ben iki tane olduğu için ikisini yazıyorum.
1 | sideBySideBarChart.Series.AddRange(new Series[] { series1, series2}); |
Daha sonra serieslerimizi gruplama işlemi yapıyoruz.
1 2 | ((SideBySideStackedBarSeriesView)series1.View).StackedGroup = 0; ((SideBySideStackedBarSeriesView)series2.View).StackedGroup = 0; |
Chartın başlığını belirliyoruz. Daha sonra WordWrap özelliği ile sözcüğü kaydırma özelliğini ‘True’ yapıyoruz. Daha sonra Chart’a title olarak ekliyoruz.
1 2 3 | sideBySideBarChart.Titles.Add(new ChartTitle()); sideBySideBarChart.Titles[0].Text = "Side-By-Side Stacked Bar Chart"; sideBySideBarChart.Titles[0].WordWrap = true; |
Ben burada chart formu tamamen kaplaması için bu işlemi yaptım ancak siz istemezseniz yapmayabilirsiniz.
1 | sideBySideBarChart.Dock = DockStyle.Fill; |
Ben aşağıdaki kodda serieslere renk vermeyi gerek gördüm. Eğer bunları ayarlamazsanız otomatik olarak bir renk verecektir. Ama ben elle vermeyi tercih ettim.
1 2 | ((BarSeriesView)series1.View).Color = Color.Red; ((BarSeriesView)series2.View).Color = Color.Lime; |
Chart Control ile işlemimiz bitti ben dinamik oluşturduğum için chartı forma eklemem gerekliyor. Sizde dinamik oluşturma yapıyorsanız. Onun içinde aşağıdaki kodu projenize eklemeniz gerekiyor.
1 | this.Controls.Add(sideBySideBarChart); |
Soru ve görüşleriniz için [email protected] adresine mail atabilirsiniz.