Fórum | tutoriais mais recente desenvolvimento web
 

Google Charts Tutorial



Google Charts é uma base JavaScript biblioteca de gráficos puro destina-se a melhorar as aplicações da web, adicionando a capacidade de gráficos interativos. Google Charts oferece ampla variedade de gráficos. Por exemplo, gráficos de linha, gráficos de spline, gráficos de área, gráficos de barras, gráficos de pizza e assim por diante.

Este tutorial vai te ensinar noções básicas de Google Charts. Tutorial contém capítulos que discutem todos os componentes básicos do Google Charts com exemplos adequados.


Público

Este tutorial foi concebido para profissionais de software que estão dispostos a aprender Google Charts em passos simples e fácil. Este tutorial vai lhe dar grande compreensão sobre os conceitos gráficos do Google e depois de concluir este tutorial, você vai estar no nível intermediário de experties de onde você pode tomar-se em maior nível de especialização.


Pré-requisitos

Antes de prosseguir com este tutorial, você deve ter um entendimento básico de JavaScript, HTML, CSS e qualquer editor de texto.


Experimente o Google Charts on-line

Para a maioria dos exemplos dados neste tutorial, você vai encontrar Experimente opção, então basta fazer uso desta opção para executar seus programas no local e desfrutar da sua aprendizagem.

Tente seguir o exemplo usando Experimente opção disponível no canto superior direito da caixa de código de exemplo a seguir -

<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>