Grafiği Çiz 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
//Div that will hold the pie chart
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

Son adım grafiği çizmektir. Öncelikle, kullanmak istediğiniz grafik sınıfının bir örneğini örneklendirmeniz ve ardından üzerinde draw() yöntemini çağırmanız gerekir.

Grafiğinizi örneklendirme

Her grafik türü, grafiğin dokümanlarında listelenen farklı bir sınıfı temel alır. Örneğin, pasta grafik google.visualization.PieChart sınıfını, çubuk grafik ise google.visualization.BarChart sınıfını temel alır. Hem pasta hem de çubuk grafikler, bu eğiticinin başında yüklediğiniz ana grafik paketinde bulunur. Ancak, sayfanızda ağaç haritası veya coğrafi grafik istiyorsanız "ağaç harita" veya "coğrafi harita" paketlerini de yüklemeniz gerekir.

Google grafik oluşturucuları tek bir parametre alır: görselleştirmenin çizileceği DOM öğesine referans.

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

Grafiğinizi çizin

Verilerinizi ve seçeneklerinizi hazırladıktan sonra grafiğinizi çizmeye hazırsınız demektir.

Grafiğinizi barındırması için sayfanızda bir HTML öğesi (genellikle bir <div>) olmalıdır. Grafiğinizde bu öğeye bir referans iletmeniz gerekir. Bu nedenle, document.getElementById() kullanarak referans almak için kullanabileceğiniz bir kimlik atayın. Bu öğenin içindeki her şey, çizildiğinde grafikle değiştirilir. Bu <div> öğesini açıkça boyutlandırmanız gerekip gerekmediğini düşünün. Şimdilik grafik boyutunu <div> HTML'de belirtin.

Her grafik, iki değer alan bir draw() yöntemini destekler: verilerinizi barındıran bir DataTable (veya DataView) nesnesi ve isteğe bağlı bir grafik seçenekleri nesnesi. Seçenekler nesnesi gerekli değildir. Bu nesneyi yok sayabilir veya grafiğin varsayılan seçeneklerini kullanmak için null değerini iletebilirsiniz.

draw() çağrısından sonra grafiğiniz sayfaya çizilir. Verileri veya seçenekleri her değiştirdiğinizde ve grafiği güncellemek istediğinizde draw() yöntemini çağırmanız gerekir.

draw() yöntemi eşzamansızdır: Yani hemen döndürülür ancak döndürdüğü örnek hemen kullanılamayabilir. Birçok durumda bu normaldir; grafik bir süre sonra çizilecektir. Ancak, draw() öğesini çağırdıktan sonra grafikteki değerleri ayarlamak veya almak isterseniz hazır etkinliğinin doldurulduğunu belirten hazır etkinliğini tetiklemesini beklemeniz gerekir. Sonraki sayfada etkinlikleri dinleme konusunu ele alacağız.

Sorun giderme

Grafiğiniz sayfada görünmüyorsa sorunlarınızı çözmenize yardımcı olabilecek bazı yaklaşımları aşağıda bulabilirsiniz:

  • Yazım hatalarını arayın. JavaScript'in büyük/küçük harfe duyarlı bir dil olduğunu unutmayın.
    • JavaScript hata ayıklayıcısı kullanın. Firefox'ta JavaScript konsolunu, Venkman Debugger'ı veya Firebug eklentisini kullanabilirsiniz. Chrome'da geliştirici araçlarını (Üst Karakter + Ctl + J) kullanabilirsiniz.
  • Google Görselleştirme API'sı tartışma grubunda arama yapın. Sorunuzun yanıtını içeren bir yayın bulamıyorsanız sorunuzu, sorunu gösteren bir web sayfasının bağlantısıyla birlikte gruba gönderin.

 

 

 

Daha Fazla Bilgi