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 Alat Google Diagram memerlukan data untuk digabungkan dalam class JavaScript yang disebut google.visualization.DataTable. Class ini ditentukan di library Google Visualization yang Anda muat sebelumnya.

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

jenis: string
label: Topping		 type: number
label: Slice
Jamur 3
Bawang Bombay 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, serta menambahkan, mengedit, atau menghapus kolom dan baris.

Anda harus mengatur DataTable diagram dalam format yang diharapkan oleh diagram: misalnya, Diagram batang dan Diagram lingkaran memerlukan tabel dua kolom dengan setiap baris mewakili irisan atau batang. Kolom pertama adalah label irisan atau 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 mengkueri situs yang mendukung protokol Datasource Chart Tools--misalnya, halaman Google Spreadsheets. Dengan menggunakan objek google.visualization.Query, Anda dapat mengirim kueri ke situs dan menerima objek DataTable terisi yang dapat diteruskan ke diagram. Baca topik lanjutan Membuat Kueri Sumber Data untuk mempelajari cara mengirim kueri.

 

Informasi Selengkapnya