Graphique Google
Des simples graphiques linéaires aux arborescences hiérarchiques complexes, la galerie Google Chart fournit un grand nombre de types de graphiques prêts à l'emploi :
- Diagramme de dispersion
- Graphique en ligne
- Graphique à barres / à colonnes
- Graphique en aires
- Diagramme circulaire
- Graphique en anneau
- Organigramme
- Carte / Carte géographique
Comment utiliser Google Chart ?
Pour utiliser Google Chart dans votre page Web, ajoutez un lien vers le chargeur de graphiques :
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
Google Chart est facile à utiliser.
Ajoutez simplement un élément <div> pour afficher le graphique :
<div id="myChart" style="max-width:700px; height:400px"></div>
L'élément <div> doit avoir un identifiant unique.
Chargez ensuite l'API Google Graph :
- Charger l'API de visualisation et le package corechart
- Définir une fonction de rappel à appeler lorsque l'API est chargée
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
C'est tout!
Graphique linéaire
Code source
function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
['Price', 'Size'],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// Set Options
var options = {
title: 'House Prices vs Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Nuages de points
Pour diffuser les mêmes données, remplacez google.visualization par ScatterChart :
var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
Diagramme à barres
Code source
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain', 44],
['USA', 24],
['Argentina', 15]
]);
var options = {
title: 'World Wide Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Camemberts
Pour convertir un graphique à barres en graphique à secteurs , remplacez simplement : google.visualization
. BarChart
avec :
google.visualization. Diagramme circulaire
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
Tarte 3D
Pour afficher le Pie en 3D, il suffit d'ajouter is3D: true aux options :
var options = {
title: 'World Wide Wine Production',
is3D: true
};