Daten vorbereiten

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

 

DataTable erstellen

Für alle Diagramme sind Daten erforderlich. Für Google Chart Tools-Diagramme müssen Daten in eine JavaScript-Klasse namens google.visualization.DataTable eingebunden werden. Diese Klasse ist in der Google-Visualisierungsbibliothek definiert, die Sie zuvor geladen haben.

Ein DataTable ist eine zweidimensionale Tabelle mit Zeilen und Spalten, wobei jede Spalte einen Datentyp, eine optionale ID und ein optionales Label hat. Im obigen Beispiel wird die folgende Tabelle erstellt:

Typ: String
Label: Belag
Typ: Zahl
Label: Segmente
Mit Pilzen 3
Zwiebeln 1
Oliven 1
Zucchini 1
Peperoni 2

Es gibt mehrere Möglichkeiten, eine DataTable zu erstellen. Eine Liste und einen Vergleich der einzelnen Techniken finden Sie in DataTables und DataViews. Sie können die Daten nach dem Hinzufügen ändern und Spalten und Zeilen hinzufügen, bearbeiten oder entfernen.

Sie müssen die DataTable des Diagramms in einem Format organisieren, das das Diagramm erwartet. Zum Beispiel erfordern sowohl das Balkendiagramm als auch das Kreisdiagramm eine zweispaltige Tabelle, in der jede Zeile ein Segment oder einen Balken darstellt. Die erste Spalte enthält das Segment- oder Balkenlabel und die zweite Spalte den Segmentwert oder Balkenwert. Andere Diagramme erfordern andere und möglicherweise komplexere Tabellenformate. Informationen zum erforderlichen Datenformat finden Sie in der Dokumentation Ihres Diagramms.

Statt eine Tabelle selbst auszufüllen, können Sie eine Website abfragen, die das Protokolltools-Datenquellenprotokoll unterstützt, z. B. eine Google-Tabellenseite. Mit dem google.visualization.Query-Objekt können Sie eine Abfrage an eine Website senden und ein ausgefülltes DataTable-Objekt erhalten, das Sie an Ihr Diagramm übergeben können. Weitere Informationen zum Senden einer Abfrage finden Sie unter Datenquelle abfragen.

 

Weitere Informationen