Créer un diagramme circulaire avec Google Charts

Créer un diagramme circulaire avec Google Charts

Grossièrement appelés diagrammes de Normandie « camemberts », les diagrammes circulaires sont parfaits pour résumer un ensemble de données à une variable. Il est très facile de créer ce type de diagramme grâce à des librairies comme Highchart ou Google Charts. Aujourd’hui, je vais vous montrer comment créer un diagramme circulaire grâce à Google Chart.

 

<!DOCTYPE html>
<html>
<head>
<title>Diagramme circulaire</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    // Chart 1
    var data = google.visualization.arrayToDataTable([['OS Mobile', 'Parts de marché'],["Android",71.40],["iOS",14.70],["Windows Phone",10.60],["Blackberry",1.00],["Autres",2.30]]);
    var options = {
      title: 'Parts de marché des OS Mobile en Juin 2014 (France)'
    };
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }
</script>

<div id="piechart" style="width: 100%; height: 500px;">&nbsp;</div>

</body>
</html>

Comme vous le voyez, avec juste ces quelques lignes de code, on peut créer un diagramme circulaire vraiment facilement grâce à Google Charts.

Pratique pour un projet rapide, ou montrer des statistiques à votre boss d’une belle façon.

2 Commentaires

laurie

A propos9 mois ago

bonjour J'ai essayé ce code source, mais j'ai un joli rectangle gris au lieu du camembert. Est ce que ça vous inspire un problème ? Je ne comprends pas pourquoi.

Répondre

Imatt

A propos8 mois ago

Bonjour Laurie, ça ne me dit rien comme ça. Aurais-tu un lien à partager pour que je puisse voir ? Merci

Répondre

Laisser un commentaire

Leave a Reply to Imatt or Annuler la réponse

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked