Foro | Los últimos tutoriales de desarrollo web
 

Google Tutorial Gráficas



Google Charts es una pura biblioteca de gráficos basada en JavaScript destinado a mejorar las aplicaciones web mediante la adición de capacidad de cartografía interactiva. Google Charts proporciona amplia variedad de gráficos. Por ejemplo, de líneas, de la tira, las gráficas de áreas, gráficos de barras, gráficos circulares y así sucesivamente.

Este tutorial te enseñará lo básico de Google Charts. Tutorial contiene capítulos en discusiones sobre todos los componentes básicos de Google Charts con ejemplos adecuados.


Audiencia

Este tutorial está diseñado para profesionales de software que están dispuestos a aprender Google Charts en pasos simples y fáciles. Este tutorial le dará una gran comprensión de los conceptos gráficos de Google y después de completar este tutorial va a estar en el nivel intermedio de experties desde donde se toma a sí mismo a un mayor nivel de experiencia.


Requisitos previos

Antes de continuar con este tutorial usted debe tener un conocimiento básico de JavaScript, HTML, CSS y cualquier editor de texto.


Pruebe Google Charts Online

Para la mayoría de los ejemplos dados en este tutorial encontrará Pruébalo opción, por lo que sólo hacen uso de esta opción para ejecutar sus programas en el lugar y disfrutar de su aprendizaje.

Trate siguiente ejemplo usando Inténtelo opción disponible en la esquina superior derecha del cuadro de código de ejemplo siguiente -

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