Chuẩn bị dữ liệu 

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

 

Tạo một DataTable

Tất cả các biểu đồ đều yêu cầu dữ liệu. Các biểu đồ trong Công cụ biểu đồ của Google yêu cầu dữ liệu được gói trong một lớp JavaScript có tên là google.visualization.DataTable. Lớp này được xác định trong Thư viện Google Hình ảnh mà bạn đã tải trước đó.

DataTable là một bảng hai chiều gồm các hàng và cột, trong đó mỗi cột có một loại dữ liệu, một mã nhận dạng không bắt buộc và một nhãn không bắt buộc. Ví dụ ở trên sẽ tạo bảng sau:

type: string
label: Lớp phủ bên trên		 type: number
nhãn: Lát cắt
Nấm 3
Hành 1
Quả ô liu 1
Quả bí ngòi 1
Pepperoni 2

Có một số cách để tạo DataTable; bạn có thể xem danh sách và thông tin so sánh về từng kỹ thuật trong DataTables và DataViews. Bạn có thể sửa đổi dữ liệu của mình sau khi thêm, cũng như thêm, chỉnh sửa hoặc xoá cột và hàng.

Bạn phải sắp xếp DataTable của biểu đồ theo định dạng mà biểu đồ mong đợi: ví dụ: cả Thanh và Biểu đồ hình tròn đều yêu cầu một bảng 2 cột, trong đó mỗi hàng đại diện cho một lát cắt hoặc thanh. Cột đầu tiên là nhãn lát cắt hoặc nhãn thanh và cột thứ hai là lát cắt hoặc giá trị thanh. Các biểu đồ khác yêu cầu các định dạng bảng khác nhau và có thể phức tạp hơn. Hãy xem tài liệu về biểu đồ để tìm hiểu định dạng dữ liệu bắt buộc.

Thay vì tự điền vào bảng, bạn có thể truy vấn một trang web hỗ trợ giao thức Nguồn dữ liệu của công cụ biểu đồ (ví dụ: trang Bảng tính Google). Khi sử dụng đối tượng google.visualization.Query, bạn có thể gửi một truy vấn đến một trang web và nhận được đối tượng DataTable đã điền sẵn để chuyển vào biểu đồ. Hãy xem chủ đề nâng cao Truy vấn một nguồn dữ liệu để tìm hiểu cách gửi một truy vấn.

 

Thông tin khác