Asp.net Mvc Highchart örneği

Json Verisi ile Dinamik Olarak HighChart Oluşturmak

ALİ ÖZDEMİR

Herkese merhaba,
Bugün sizlere asp.net mvc de highchartlar nasıl dinamik yapılır bunu göstermek istiyorum. HighChart nedir diyorsanız bu siteyi ziyaret edebilirsiniz. http://www.highcharts.com/
Sizler için 2 tane örnek hazırladım. İlki pie chart, diğeri column chart.
Öncelikle pie chart ile başlayalım.
Önce controllerda view tarafı için gerekli verimizi ayarlıyoruz. Kodlar şu şekilde,
public class Data
{
public string Name { get; set; }

public int Count { get; set; }
}

View tarafından ajax ile istekde bulunacağımız metod
public JsonResult GetData()
{
List list = new List()
{
new Data(){ Name = "Elma", Count=20 },
new Data(){ Name = "Portakal", Count=30 },
new Data(){ Name = "Ceviz", Count=10},
new Data(){ Name = "Muz", Count=10 },
new Data(){ Name = "Kahve", Count=30 },
};
return new JsonResult() { Data = list, JsonRequestBehavior = JsonRequestBehavior.AllowGet};
}

View tarafında ise ekranımıza bir tane button ve bir tane div atıyoruz. Butona basıldığı zaman pie chart ın…

View original post 102 kelime daha

Reklamlar

HighCharts

Web Projemde çok kullandığım highchartlardan bahsetmek istiyorum. Highchartlar açık kaynak kodlu, bir çok geliştiricinin görsel anlamda grafiklerle ister web olsun, ister mobil uygulamalarını geliştirip, zenginleştirmesini sağlayan javascript kütüphanelerine sahip gayet esnek ve dinamik yapıdaki interaktif chartlardır. Highchartlar ile birden çok çeşit chartı projenize dahil edip kullanmak gerçekten çok basit. Higchartlar görsellikler olarak harika sonuçlar ortaya çıkarıyor. Line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart tiplerinin hepsini kullanmanız mümkün. Siteye girip incelediğinizde demolarına göz attığınızda örnekleri canlı olarak görebiliyorsunuz veya JsFiddle aracılığıyla client tarafında değişiklik yapıp chartlarda değişiklikleri görebiliyorsunuz. Highchartın demo sayfası : http://www.highcharts.com/demo. Örnek bir higchart görüntüsü:

HighChart
İstediğiniz tipteki chartın kaynak kodlarına View Options diyerek elde edebilirsiniz. Edit In JsFiddle butonuna tıklayarakta JsFiddle’da kaynak kodlarını editeleyebilirsiniz. Yukarıdaki chartın kaynak kodlarının preview penceresi şu şekildedir:

OptionsHighCharts

Bu şekilde diğer örnekleri de görebilmeniz mümkün. Tabi bunlar client tarafındaki oluşturulmuş scriptler. İsterseniz code-behind tarafında da higchartlarla çalışabilirsiniz. Burada kaynak kodları mevcut : https://dotnethighcharts.codeplex.com/SourceControl/latest

Highchart’in kendi metodunun birden çok optionu var. İlerde bu optionları açıklamaya çalışacağım. Tabi highchartı önce referans etmeniz gerekiyor. Higchartın dllerini Bu sayfadaki linklerden indirebilirsiniz.

https://dotnethighcharts.codeplex.com/releases/view/121251

Linkte en son sürüm olarak Dotnet.Highcharts 4.0 sürümü bulunuyor ve bu sürümü .Net Framework 4.0 ve .Net Framework 4.5 destekliyor.

Highchartlar browserlarla gayet uyumlu çalışır ve pluginlere ihtiyaç duymaz. HTML5te sorunsuz çalışır.

Bu makalemde genel olarak higchartsın özelliklerine değindim. İlerdeki makalelerimde biraz daha teknik olarak highchartın optionlarının ne anlama geldiğini ve ne işe yaradıklarından bahsedeceğim.