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ả biểu đồ đều yêu cầu dữ liệu. Biểu đồ trong Công cụ biểu đồ của Google yêu cầu dữ liệu phải đượ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 Hình ảnh Google mà bạn đã tải trước đó.

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

loại: chuỗi
nhãn: Topping		 loại: số
nhãn: Lát cắt
Nấm 3
Hành tây 1
Ô 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à so sánh từng kỹ thuật trong DataTables và DataView. Bạn có thể sửa đổi dữ liệu của mình sau khi thêm, đồng thời thêm, chỉnh sửa hoặc xoá các 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 đồ dự kiến: chẳng hạn như cả Thanh và biểu đồ hình tròn đều yêu cầu bảng hai cột trong đó mỗi hàng đại diện cho một lát hoặc thanh. Cột đầu tiên là nhãn Slice hoặc Bar, còn cột thứ hai là Giá trị lát cắt hoặc 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 của biểu đồ để tìm hiểu về định dạng dữ liệu bắt buộc.

Thay vì tự điền 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 của Google. Bằng cách sử dụng đối tượng google.visualization.Query, bạn có thể gửi truy vấn đến một trang web và nhận được đối tượng DataTable đã điền để có thể truyền vào biểu đồ. Xem chủ đề nâng cao Truy vấn nguồn dữ liệu để tìm hiểu cách gửi truy vấn.

 

Thông tin khác