Przygotowywanie danych 

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

 

Utwórz DataTable

Wszystkie wykresy wymagają danych. Wykresy w narzędziach Google do tworzenia wykresów wymagają umieszczenia danych w klasie JavaScript o nazwie google.visualization.DataTable. Ta klasa jest zdefiniowana w załadowanej wcześniej bibliotece wizualizacji Google.

DataTable to dwuwymiarowa tabela z wierszami i kolumnami, z których każda ma określony typ danych, opcjonalny identyfikator i opcjonalną etykietę. Przykład powyżej tworzy taką tabelę:

type: string
label: Dodatki		 type: number
etykieta: Wycinki
Grzyby 3
Cebula 1
Oliwki 1
Cukinia 1
Pepperoni 2

DataTable można utworzyć na kilka sposobów. Listę i porównanie każdej metody możesz zobaczyć w DataTables i DataView. Po dodaniu danych możesz je modyfikować oraz dodawać, edytować i usuwać kolumny lub wiersze.

DataTable wykresu musisz uporządkować w formacie zgodnym z oczekiwanym formatem: na przykład wykresy słupkowe i wykresy kołowe wymagają dwukolumnowej tabeli, w której każdy wiersz reprezentuje wycinek lub słupek. Pierwsza kolumna zawiera etykietę wycinka lub słupka, a druga wartość wycinka lub słupka. Inne wykresy wymagają innych i prawdopodobnie bardziej złożonych formatów tabel. Informacje o wymaganym formacie danych znajdziesz w dokumentacji wykresu.

Zamiast samodzielnie wypełniać tabelę, możesz zamiast tego wysłać zapytanie do witryny obsługującej protokół źródła danych narzędzi do tworzenia wykresów, na przykład do strony Arkuszy kalkulacyjnych Google. Za pomocą obiektu google.visualization.Query możesz wysłać zapytanie do witryny i otrzymać wypełniony obiekt DataTable, który możesz przekazać na wykres. Aby dowiedzieć się, jak wysłać zapytanie, zapoznaj się z częścią dla zaawansowanych o wysyłaniu zapytania do źródła danych.

 

Więcej informacji