Graphiques Google

De simples graphiques en lignes complexes aux arbres hiérarchiques, la bibliothèque de graphiques Google propose un grand nombre de types de graphiques disponibles à tout moment :

  • Graphique en nuage de points
  • Graphique en ligne
  • Graphique en barres / Graphique en colonnes
  • Graphique en surface
  • Graphique en secteurs
  • Graphique en forme de donut
  • Organigramme
  • Carte / Graphique géographique

How to use Google Chart?

If you want to use Google Chart on your web page, pleaseAdd a link to the chart loader:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

Google charts are easy to use.

Just add a <div> The element can display the chart:

<div id="myChart" style="max-width:700px; height:400px"></div>

The <div> element must have a unique ID.

Then load Google Graph API:

  1. Load Visualization API and corechart package
  2. Set a callback function to be called after the API is loaded
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

That's it!

line chart

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 price vs. house area',
  hAxis: {title: 'square meters'},
  vAxis: {title: 'price in million'},
  legend: 'none'
};
// Draw the chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Essayez-le vous-même

scatter plot

to generate the same data asscatter plotplease change google.visualization change to ScatterChart:

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

Essayez-le vous-même

bar chart

code source

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italie', 55],
  ['France', 49],
  ['Espagne', 44],
  ['États-Unis', 24],
  ['Argentine', 15]
]);
var options = {
  title: 'Production mondiale de vin'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Essayez-le vous-même

Diagramme circulaire

Pour convertir le diagramme en barres en forme de colonnes, il suffit deDiagramme circulaire，il suffit d'utiliser :

google.visualization.PieChart

Remplacer :

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

Essayez-le vous-même

Diagramme circulaire 3D

Pour afficher le diagramme circulaire en 3D, il suffit de is3D: true Ajouter à l'option :

var options = {
  title: 'Production mondiale de vin',
  is3D: true
};

Essayez-le vous-même