7 Temmuz 2014 Pazartesi

Visual C# Chart kullanımı ( Grafik )

Merhaba arkadaşlar.
Size bugün Chart yani grafik kullanımını anlatacağım.
Öncelikle Chart ne işe yarar?
Chart bildiğin grafik( Çubuk,pasta,çizgiler,eğilim çizgileri vs) hazırlamak için kullanılan bir tür Microsoft tarafından geliştirilen Component'dir. Bir çok projede iş görür niteliktedir ve tasarımını renklendirerek iyileştirebiliyorsunuz. Microsoftun sitesinde yazdığı gibi 'Microsoft Chart for .NET Framework 3.5 SP1' den itibaren bulunur ve .net framework 2.0 de yoktur.(Şahsen aradım). Chart Componentinden ufak bir ekran görüntüsü.


Visual c# Chart
Chart Ekran Görüntüsü


Örneklerle anlatmaya geçeyim hemen.


Chart componenti toolbox da data sekmesinin altında mevcuttur. ordan sürükleyerek formumuza ekleyelim.
Boyutlarını ve kişisel ayarlarınızı yapın ve kod kısmına geçelim hemen.

Ben network kim ne kadar dosya indirmiş kim ne kadar dosya yüklemiş onların takibini yaptığım için grafiği de ona göre hazırlayacağım.

            this.chart1.Titles.Clear();//Chart da varsayılan olarak gelen başlıkları temizliyoruz.
            this.chart1.Series.Clear();//Chart da varsayılan olarak gelen series (Liste) temizliyoruz.
            this.chart1.Series.Add("Download");//2 adet çubuk türü olacak biri upload diğeri download. Downloadı ekledik.
            this.chart1.Series.Add("Upload");//Uploadı ekledik
            this.chart1.Series[0].Color = Color.Red;//Downloadın rengini belirledik.(Grafiksel iyileştirmek için)
            this.chart1.Series[1].Color = Color.Orange;//Uploadın rengini belirledik.
            for (int i = 0; i < 7; i++)//Ben 7 adet kayıt gösteriyorum çünkü bu stilde ekrana 7 adet kayıt sığıyor.
            {
                this.chart1.Series[0].Points.AddXY(kisi[i].ToString(), double.Parse(down[i].ToString())/1024.0/1024.0);//x parametresi altta yazacak yazıyı belirliyor y ise o yazının değerini belirliyor.
                this.chart1.Series[1].Points.AddXY(kisi[i].ToString(), double.Parse(up[i].ToString()) / 1024.0 / 1024.0);//Burda o kişiye birde upload değeri eklememize yarıyor. Ben kb olarak aldığım değeri gb ye çevirmek için 2 kez 1024 e bölüyorum.
            }

Bu arada kisi, up, down değişkenleri bende arraylist isterseniz siz string, int ve double dizi değişkenlerle de bu işlemi yapabilirsiniz.

İşin basit tarafını anlatmak gerekirse.

1- Başlık Eklemek: chart1.Series.Add("Başlık Tanımı");
2- Değer Eklemek:chart1.Series[int türünde seri ID değerini yazıyoruz yada string olarak başlık tanımı yazılabilir"].Points.AddXY("Burda Kalemin Tanımını Giriyoruz", "Burda da double yada int türünde değeri giriyoruz.")/1024.0/1024.0);


Bir çok değişik grafikleme özelliğine sahip. Misal pasta diliminden tutun da noktalı değerlere kadar bir çok çeşidi vardır. Bilmek istediğiniz çeşidini yorum olarak attığınızda size 24 saat içinde örnek uygulamasını hazırlar makaleye eklerim. Şu an sadece çubukların ihtiyaç olacağını düşündüğüm için böyle bir anlatım yolu izledim.


Yorumlarınız benim için önemli google içinde

3 yorum:

  1. C# projeme "PASTA GRAFİĞİ" ekleyeceğim. ve grafik için gereken verileri ise veritabanından çekeceğim bunu anlatır mısınız lütfen

    YanıtlaSil
    Yanıtlar
    1. ArrayList kisi = new ArrayList();
      ArrayList down = new ArrayList();
      kisi.Add("Microsoft");
      kisi.Add("Apple");
      kisi.Add("Google");
      down.Add(105);
      down.Add(170);
      down.Add(612);
      this.chart1.Titles.Clear();
      this.chart1.Series.Clear();
      this.chart1.Series.Add("Web Browser Kullanım Oranı");
      chart1.Series[0].ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Pie;
      for (int i = 0; i < 3; i++)
      {
      this.chart1.Series[0].Points.AddXY(kisi[i].ToString(), double.Parse(down[i].ToString()));

      }

      Ben arraylist yaptım, sen veri tabanından datatable olarak çekersin. Ayrıca datasourceden direk olarak bağlayabilirsin veri tabanına. Kolay gelsin.

      Sil
    2. Ayrıca videoyu izlersen arayüzden kod yazmadan nasıl yapıldığını görürsün.

      https://www.youtube.com/watch?v=JRNbx1mOBcs

      Sil