Forum | Derniers tutoriels de développement web
 

Google Charts Tutorial



Google Charts est une bibliothèque JavaScript pur à base de cartographie destiné à améliorer les applications Web en ajoutant une capacité de cartographie interactive. Google Charts fournit grande variété de graphiques. Par exemple, des graphiques linéaires, des graphiques, des diagrammes spline de la région, les graphiques à barres, camemberts et ainsi de suite.

Ce tutoriel va vous apprendre rudiments de Google Charts. Tutorial contient des chapitres qui envisagent tous les composants de base de Google Charts avec des exemples appropriés.


Public

Ce tutoriel est conçu pour les professionnels de logiciels qui sont prêts à apprendre Google Charts en quelques étapes simples et faciles. Ce tutoriel va vous donner une grande compréhension sur Google Charts concepts et après avoir terminé ce tutoriel, vous serez au niveau intermédiaire de experties d'où vous pouvez vous prendre au plus haut niveau d'expertise.


Conditions préalables

Avant de procéder à ce tutoriel, vous devriez avoir une compréhension de base de JavaScript, html, css et un éditeur de texte.


Essayez Google Charts en ligne

Pour la plupart des exemples donnés dans ce tutoriel , vous trouverez Essayer il option, alors assurez juste utilisation de cette option pour exécuter vos programmes à l'endroit et profiter de votre apprentissage.

Essayez de suivre par exemple en utilisant Essayez l' option disponible dans le coin supérieur droit de la boîte de code exemple ci - dessous -

<html>
<head>
<title>Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});     
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('string', 'Browser');
   data.addColumn('number', 'Percentage');
   data.addRows([
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
	  ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7]
   ]);
   
   // Set chart options
   var options = {'title':'Browser market shares at a specific website, 2014',
      'width':550,
      'height':400};

   // Instantiate and draw the chart.
   var chart = new google.visualization.PieChart(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>