Merhaba, bu yazıda sizlere C# ile Devexpress Chart Control Bar Chart ile Line Chart Kullanımı hakkında bilgi vereceğim.
Geçmiş yazılarımda Side-by-Side ve sadece Bar Chart hakkında bilgi vermiştim. Bugün Bar Chart ve Line Chart’ın aynı grafik üzerinde kullanılması hakkında bilgi vereceğim.
İşimize Nerede Yarar ?
Bu özellikleri ayrı ayrıda kullanabilirsiniz. Ancak ben değişik bir olay yaparak bunları bir arada kullanarak bir grafik çıkaracağım. Bu bizim işimize nerede yarar örneğin yıllık bir satış grafiğiniz olsun Bar Chart ile aylara göre satışları gösterirsiniz. Line Chart ile geçmiş yılların ortalamasını gösterebilirsiniz.
Ş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 chart = new ChartControl(); |
Daha sonra Series oluşturuyoruz. Bu grafikteki değerlerimizin tutulacağı bir nesnedir. Ben iki yılın aylarını karşılaştırma yapacağım için iki tane Series oluşturdum. Otomatik olarak bu yıl ve önceki yıl yaptım. Series’ın birinci değeri adı, ikince değeri ise tipi ben burada Bar ve Line olarak seçiyoruz.
1 2 3 | Series series1 = new Series(DateTime.Now.AddYears(-1).Year.ToString(), ViewType.Bar); Series series2 = new Series(DateTime.Now.Year.ToString(), ViewType.Bar); Series series3 = new Series("Ortalama", ViewType.Line); |
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 7 8 | 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))); series3.Points.Add(new SeriesPoint(i + 1, r.Next(0, 100000))); } |
Bundan sonra yapacağımız işlem Seriesleri chartımza eklemek olacak.
1 2 3 | chart.Series.Add(series1); chart.Series.Add(series2); chart.Series.Add(series3); |
Ben burada chart formu tamamen kaplaması için bu işlemi yaptım ancak siz istemezseniz yapmayabilirsiniz.
1 | chart.Dock = DockStyle.Fill; |
Burada Serieslerin tiplerini ayarlıyoruz. Ben bu tipleri seçerek devam ettim farklı tipleri deneyerek kendinize göre güzel olanı seçebilirsiniz.
1 2 | ((BarSeriesView)series1.View).FillStyle.FillMode = FillMode.Hatch; ((BarSeriesView)series2.View).FillStyle.FillMode = FillMode.Hatch; |
Burada Line Chartımızın rengini ve marker’ı görünür belirliyoruz.
1 2 | ((LineSeriesView)series3.View).Color = Color.Orange; ((LineSeriesView)series3.View).MarkerVisibility = DevExpress.Utils.DefaultBoolean.True; |
Chart’a başlık eklemek için ChartTitle nesnesi üretiyoruz.
1 | ChartTitle chartTitle1 = new ChartTitle(); |
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 4 | ChartTitle chartTitle1 = new ChartTitle(); chartTitle1.Text = "Yıllık Satış ve Ortalama Raporu"; chartTitle1.WordWrap = true; chart.Titles.Add(chartTitle1); |
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(chart); |
Bunu bir GroupBox,FlowLayoutPanel vs. gibi nesnelere de ekleyebilirsiniz.
Soru ve görüşleriniz için [email protected] adresine mail atabilirsiniz.
