Merhaba arkadaşlar bu makalemizde asp.net de morris.js kütüphanesinin yardımı ve ajax methodunu kullanarak verilerimizi yani meyveler ve satış miktarlarını grafik şeklini vereceğiz.Sayfanın sonunda projemizin kaynak dosyalarına ulaşabilirsiniz.

Sonuç olarak ekran görüntümüz aşağıdaki gibi olacaktır.

Öncelikle kullanacağımız kütüphaneleri projemize ekleyeceğiz.Ajax methodunu kullanacağımız için jquery.min.js kütüphanesini ve grafik çizmek için kullanılacak morris.js ile yardımcı raphael.js kütüphanelerini sayfamıza ekliyoruz.

 <script type="text/javascript" src="/jquery.min.js"></script>
 <script type="text/javascript" src="/morris/raphael-min.js"></script>
 <script type="text/javascript" src="/morris/morris.min.js"></script>

Kütüphanelerimizi ekledikten sonra geliyoruz webmethoda.Verilerimizi c# tarafından göndereceğimiz  method asağıdaki gibidir.

       [WebMethod]
        public static string VerlileriDoldur()
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("[");

            List<Meyve> listem = new List<Meyve>();

            listem.Add(new Meyve() { Deger = 25, Ad = "Elma" });
            listem.Add(new Meyve() { Deger = 35, Ad = "Armut" });
            listem.Add(new Meyve() { Deger = 15, Ad = "Muz" });
            listem.Add(new Meyve() { Deger = 45, Ad = "Portakal" });
            listem.Add(new Meyve() { Deger = 55, Ad = "Erik" });


            foreach (var item in listem)
            {
                sb.Append("{");
                sb.Append(string.Format("y :'{0}', a:{1}", item.Ad, item.Deger));
                sb.Append("},");
            }
            sb = sb.Remove(sb.Length - 1, 1);
            sb.Append("]");
            return sb.ToString();

        }
        public class Meyve
        {
            public int Deger { get; set; }
            public string Ad { get; set; }
        }

Burada verilerimizi dinamik olmayan bir liste oluşturup bu listeden çektik siz dinamik verilerinizi kullanarak bu işlemi gerçekleştirebilirsiniz. Dikkat edilmesi gerek nokta verilerimizi straing builder fonksiyonu ile json formatında birleştirip tek bir string gibi gönderiyouz ki asp tarafında yazacağımız kod ile json gibi okuyup morris kütüphanesine data olarak verebilelim.

Şimdi asp tarafında ki ajax methodumuzu ve grafiğin gösterileceği div i oluşturalım.

            <script>               
                $.ajax({
                    type: "POST",
                    url: "/WebForm1.aspx/VerlileriDoldur",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                       
                        var data = eval(r.d);
                        Morris.Area({
                            element: 'morris-area-example',
                            data: data,
                            xkey: 'y',
                            ykeys: ['a'],
                            labels: ['Satış Miktarı'],
                            resize: true,
                            hideHover: true,
                            lineColors: ['#FEA223'],
                            parseTime: false,
                            fillOpacity: 0.6
                        });

                    },
                    failure: function (response) {
                        alert('There was an error.');
                    }
                });
            </script>
         <div id="morris-area-example" style="height: 200px; width:500px"></div> 

Ajax methodumuzda c# tarafında oluşturduğumuz webmethodu çağırıp eval(r.d) yöndemiyle strin gelen verilemizi json formatına çeviriyoruz. Bu örneğimizde morris kütüphanesinin area tipini kullandık. bu grafik ile ilgili ayarlar a buraya tıklayarak olaşabilirsiniz.Son olarak da grafiğimizin oluşacağı div i ekliyoruz ve böyllikle belirtmiş olduğumuz uzunluk ve boyutta c# web method ile göndermiş olduğumuz verilerimiz grafik şeklini almış bulunmaktadır.

Projemizin kaynak dosyasına buraya tıklayarak ulaşabilirsiniz.

İyi günler iyi çalışmalar :)