<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>
Créer un élément DataTable
Tous les graphiques nécessitent des données. Les graphiques des outils Google Chart nécessitent que les données soient encapsulées dans une classe JavaScript appelée google.visualization.DataTable. Cette classe est définie dans la bibliothèque de visualisation Google que vous avez chargée précédemment.
Un tableau (DataTable) est une table à deux dimensions avec des lignes et des colonnes. Chaque colonne possède un type de données, un ID facultatif et une étiquette facultative. L'exemple ci-dessus crée le tableau suivant:
| type: chaîne label: |
type: number label: Tranches |
|---|---|
| Des champignons | 3 |
| Oignons | 1 |
| Olives | 1 |
| La courgette | 1 |
| Pepperoni | 2 |
Il existe plusieurs façons de créer un DataTable. Vous pouvez afficher une liste et une comparaison de chaque technique dans DataTables et DataViews. Vous pouvez modifier vos données après les avoir ajoutées, et ajouter, modifier ou supprimer des colonnes et des lignes.
Vous devez organiser les DataTable de votre graphique dans le format attendu: par exemple, les graphiques à barres et à secteurs nécessitent un tableau à deux colonnes dans lequel chaque ligne représente une tranche ou une barre. La première colonne représente l'étiquette de la tranche ou de la barre, et la seconde colonne la valeur de la tranche ou de la barre. D'autres graphiques nécessitent des formats de table différents et éventuellement plus complexes. Consultez la documentation de votre graphique pour connaître le format de données requis.
Plutôt que de remplir vous-même une table, vous pouvez interroger un site Web compatible avec le protocole de source de données Chart Tools, par exemple une page Google Sheets. L'objet google.visualization.Query vous permet d'envoyer une requête à un site Web et de recevoir un objet DataTable renseigné que vous pouvez transmettre à votre graphique. Pour savoir comment envoyer une requête, consultez la page avancée Interroger une source de données.