Menyiapkan Data

<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>

 

Membuat DataTable

Semua diagram memerlukan data. Diagram Google Chart Tools mengharuskan data untuk digabungkan dalam class JavaScript yang disebut google.visualization.DataTable. Class ini ditentukan di library Visualisasi Google yang Anda muat sebelumnya.

DataTable adalah tabel dua dimensi dengan baris dan kolom, yang setiap kolomnya memiliki jenis data, ID opsional, dan label opsional. Contoh di atas membuat tabel berikut:

type: string
label: Topping		 type: angka
label: Slice
Jamur 3
Bawang 1
Zaitun 1
Zukini 1
Pepperoni 2

Ada beberapa cara untuk membuat DataTable; Anda dapat melihat daftar dan perbandingan setiap teknik di DataTables dan DataViews. Anda dapat mengubah data setelah menambahkannya, dan menambahkan, mengedit, atau menghapus kolom dan baris.

Anda harus mengatur DataTable diagram dalam format yang diharapkan diagram: misalnya, Batang dan Diagram lingkaran memerlukan tabel dua kolom dengan setiap baris mewakili slice atau batang. Kolom pertama adalah irisan atau label batang, dan kolom kedua adalah nilai irisan atau batang. Diagram lain memerlukan format tabel yang berbeda dan mungkin lebih kompleks. Lihat dokumentasi diagram Anda untuk mempelajari format data yang diperlukan.

Daripada mengisi tabel sendiri, Anda dapat membuat kueri pada situs yang mendukung protokol Sumber Data Alat Diagram--misalnya, halaman Google Spreadsheet. Dengan menggunakan objek google.visualization.Query, Anda dapat mengirim kueri ke situs dan menerima objek DataTable yang terisi yang dapat diteruskan ke diagram. Lihat topik lanjutan Mengkueri Sumber Data untuk mempelajari cara mengirim kueri.

 

Info Selengkapnya