Google Charts | Bayram Üçüncü

ArcGIS Map Server verileri ile Google Chart çizdirilmesi

22 Tem

Bir önceki yazıda ASP.NET Web API ile tarafından servis edilen JSON verileri ile Google grafiklerinin çizimini yapmıştık. Bu yazıda da yine Google grafik çizimi üzerinde duracağız. Grafik çizimi için kullanacağımız veri ise uzak bir sunucu üzerinde elde edilecek. Uzak sunucu verileri ise ArcGIS firmasının sunmuş olduğu örnek REST servislerinden elde edilecek.

ArcGIS firmasının sunduğu örnek servislere buradan ulaşmak mümkündür. Biz bu servislerden nüfus ile alakalı olan demografik yapı servislerini kullanacağız. Demografik yapıya ait şu anda üç farklı MapServer hizmeti açılmış durumda. Biz bunlardan Demographics/ESRI_Census_USA servisi tarafından sunulan verilerle çalışacağız. USA’de bölgeler ya da eyaletler(states) adı altında sunulan Feature Layer üzerinden bir istatistik alarak örnek bir grafik çizdirmeye çalışalım. Bu örnek istatistiğimiz “2007 yılında nüfusu 9 milyondan büyük olan bölgelerin listesi.” şeklinde olsun.

Örnek uygulamamız, sunucu üzerinde çalışan tek bir HTML dosyası da olabilir, bir ASP.NET uygulaması üzerinden de çalışabiliriz. Yapacağımız şey ArcGIS Server sunucusuna bir sorgu gönderip gelen veriyi işlemek.

Feature Layer Servisi: http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5

Bu servise bir sorgu gönderdiğimizde gelen verinin JSON şekli aşağıdaki gibidir.

Bize grafik çizimi için gerekli olan kısım, kırmızı çerçeve içerisine alınmış features dizisidir. Bu dizi içerisinde her bir attribute, nüfus(POP2007) ve bölge adı(STATE_NAME) bilgileri bulunmaktadır. Bu bilgiler ışığında sorgulama ve çizim işlemlerini javascript ortamında aşağıdaki gibi gerçekleştirebiliriz.

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type="text/javascript">

function getMap() {

   var mapserverUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5/query";
   var parameters = { f: "json", where: "POP2007 > 9000000", returnGeometry: false, outFields: "POP2007,STATE_NAME" };

   $.ajax({
          url: mapserverUrl,
          data: parameters,
          dataType: "jsonp",
          jsonpCallback: "callback",
          success: function (response) {
             createGraphics(response.features);
          }
   });
 }

function createGraphics(data) {

    var table = new google.visualization.DataTable();
    table.addColumn('string', 'STATE');
    table.addColumn('number', '2007 POP');

    for (var i = 0; i < data.length; i++)
        table.addRow([data[i].attributes.STATE_NAME, data[i].attributes.POP2007]);

    var options = { title: 'Population of 2007 in the USA, Bigger than 9 Million' };
    var chart = new google.visualization.ColumnChart(document.getElementById('cbs'));
    chart.draw(table, options);
 }

 google.load("visualization", "1", { packages: ["corechart"] });
 google.setOnLoadCallback(getMap);

</script>

Yaptığımız sorgu standart bir ajax sorgusudur. parameters olarak belirlenen veri kümesi servis URL’i için queryString verilerini barındırmaktadır. Gerisi zaten Google grafik API işlemleri Bu örnek uygulamanın çıktısı aşağıdaki şekilde olacaktır.

Asp.Net Web API verileri ile Google Charts kullanımı

19 Tem

Farklı platformların birbiri ile konuşabilmesi biz yazılımcılar için gerçekten büyük bir nimet. Bunu ASP.NET Web API verilerini kullanarak Google Chart API grafiklerini kolay bir şekilde çizdirebildiğimde bir kez daha anlamış oldum.

Geliştiriciler için birçok kullanışlı ürün ortaya koyan Google Google Chart API uygulaması ile grafik kullanmak isteyenlere yeni bir kapı açmıştır. Platform bağımsız uygulamalar konusunda çok iyi ürünler ortaya koymaya devam etmektedir. Bende bu grafik ürününü incelerken hemen bir Web API oluşturup kullanmak istedim. Başarılı sonuca ulaşınca da bunu sizlerle paylaşmak istedim.

Örnek bir Web API uygulaması üzerinden Google Grafiklerini çizdirmeye çalışalım. Hemen boş bir ASP.NET MVC uygulaması oluşturarak işe başlayalım. Örnek uygulamamızda hedeflenen buradaki Google sütun grafiğini çizmektir. Uygulama çalıştığında ulaşacağımız grafik aşağıdaki gibi olacaktır.

Grafikte kullanılacak olan veri modelini aşağıdaki şekilde oluşturarak işe başlayalım.

public class CompanyReport
{
    public string Year { get; set; }
    public double Sales { get; set; }
    public double Expense { get; set; }
 }

Model sınıfımız yıllara göre satış ve giderleri veren bir özet niteliğinde olup grafikte olması gereken verileri tutmaktadır.

Şimdi de bu veri tipine uygun verileri servis edecek olan bir Api Controller oluşturmalıyız.

public class CompanyController : ApiController
{
    public IEnumerable Get()
    {
         var result = new List
         {
             new CompanyReport{Year = "2008&", Sales = 1000, Expense = 452},
             new CompanyReport{Year = "2009", Sales = 1150, Expense = 652},
             new CompanyReport{Year = "2010", Sales = 950, Expense = 1052},
             new CompanyReport{Year = "2011", Sales = 1150, Expense = 252},
         };

         return result;
     }
 }

Api Controller sınıfımız olan CompanyController sınıfının Get() metodu CompanyReport verilerini içeren JSON tipinde bir veri seti döndürmektedir. Google Chart API aynı şekilde grafik çizim verilerini JSON tipinde almaktadır. Bu sayede en başa dönecek olursak, iki ayrık sistemi JSON ortak noktasında buluşturmuş olacağız.

Grafik çizim işlemini View tarafında bir Script içerisinde gerçekleştirmeye çalışalım. Scrip içerisine referans olan Google Char ve JQuery Javascript dosyalarını Google CDN üzerinden çağırmaktayım.

<script src="https://www.google.com/jsapi" type="text/javascript">// <![CDATA[
  <script type='text/javascript'
          src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
  <script type="text/javascript">

        function drawChart() {
           $.getJSON(&quot;/api/Company&quot;, null, function (items) {
               var table = new google.visualization.DataTable();
               table.addColumn('string', 'Yıllar');
               table.addColumn('number', 'Satışlar');
               table.addColumn('number', 'Giderler');

               for (var i = 0; i < items.length; i++) {
                     table.addRow([items[i].Year, items[i].Sales,items[i].Expense]);
               }

               var options = { title: 'Şirket Raporları' };
               var chart = new google.visualization.ColumnChart(
                                document.getElementById('chart_div'));
               chart.draw(table, options);
           });
        }
  google.load(&quot;visualization&quot;, &quot;1&quot;, { packages: [&quot;corechart&quot;] });
  google.setOnLoadCallback(drawChart);
// ]]></script>

Artık uygulamamızı çalıştırdığımızda Api verileriyle Google grafikleri çizilmiş olacaktır.

Bir sonraki yazıda görüşmek dileğiyle.

Kaynak Kod: Burada