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. Önce kullanmak istediğiniz grafik sınıfının bir örneğini oluşturmanız, ardından bunun üzerindeki draw() yöntemini çağırmanız gerekir.

Grafiğinizi örneklendirme

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

Google grafik oluşturucuları tek bir parametre alır: Görselleştirmenin çekileceği DOM öğesine bir 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ır olursunuz.

Grafiğinizi korumak için sayfanızda bir HTML öğesi (genellikle <div>) olmalıdır. Grafiğinize bu öğe için bir referans iletmelisiniz. Bu nedenle, ona document.getElementById() kullanarak referans almak için kullanabileceğiniz bir kimlik atayın. Bu öğenin içindeki her şey çizim sırasında değiştirilecek. Bu <div> öğesini açık bir şekilde boyutlandırmanız gerekip gerekmediğini düşünün, ancak şimdilik grafik boyutunu <div> HTML'de belirtin.

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

draw() numarasını aradığınızda grafiğiniz sayfada ç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ıztır, yani hemen döndürür, ancak döndürdüğü örnek hemen kullanılamayabilir. Çoğu durumda sorun yoktur; grafik zaman içinde çizilecektir. Ancak, draw() çağrısından sonra bir grafikte değer ayarlamak veya almak isterseniz grafiğin hazır etkinliği beklemesini beklersiniz. Bu, etkinliğin doldurulduğunu gösterir. Sonraki sayfada etkinlikleri dinlemeyi ele alacağız.

Sorun giderme

Grafiğiniz sayfaya çizilmiyorsa sorunlarınızı çözmenize yardımcı olabilecek bazı yaklaşımları aşağıda bulabilirsiniz:

  • Yazım hataları olup olmadığına bakı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, Vnkman Hata Ayıklayıcısı'nı 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ıtlandığı bir yayını bulamıyorsanız sorunuzu, sorunu gösteren bir web sayfasının bağlantısıyla birlikte grupta yayınlayın.

 

 

 

Daha Fazla Bilgi