Gráficos de Google

Desde gráficos de línea simples hasta árboles de estructura compleja, la biblioteca de gráficos de Google ofrece una gran variedad de tipos de gráficos disponibles en cualquier momento:

  • Gráfico de Puntos Dispersos (Scatter Chart)
  • Gráfico de Línea (Line Chart)
  • Gráfico de Barras / Columnas (Bar / Column Chart)
  • Gráfico de Área (Area Chart)
  • Gráfico de Pastel (Pie Chart)
  • Gráfico de Donut (Donut Chart)
  • Gráfico de Estructura Organizativa (Org Chart)
  • Mapa / Gráfico Geográfico (Map / Geo Chart)

¿Cómo usar Google Chart?

Si desea usar Google Chart en su página web, por favorAgregar un enlace al cargador de gráficos:

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

Google Charts es fácil de usar.

Sólo hay que agregar una <div> El elemento puede mostrar el gráfico:

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

El elemento <div> debe tener un ID único.

Luego, cargar el API de Google Graph:

  1. Cargar el API de Visualización y el paquete corechart.
  2. Establecer una función de devolución de llamada, que se llama después de que se carga el API.
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

¡Y eso es todo!}

Gráfico de línea

Código fuente

function drawChart() {
// Establecer datos
var data = google.visualization.arrayToDataTable([
  ['Precio', 'Tamaño'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]);
// Establecer opciones
var options = {
  title: 'Precio de viviendas y superficie de viviendas',
  hAxis: {title: 'Metros cuadrados'},
  vAxis: {title: 'Precio en millones'},
  legend: 'none'
};
// Dibujar gráfico
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Prueba personalmente

Gráfico de dispersión

los mismos datos para generarGráfico de dispersión, por favor cambia google.visualization cambia por ScatterChart:

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

Prueba personalmente

Gráfico de barras

Código fuente

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italia', 55],
  ['Francia', 49],
  ['España', 44],
  ['Estados Unidos', 24],
  ['Argentina', 15]
]);
var options = {
  title: 'Producción de vino global'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Prueba personalmente

Gráfico de pastel

Si deseas convertir un gráfico de barras enGráfico de pastelCon:

google.visualization.PieChart

Reemplazar:

google.visualization.BarChart

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

Prueba personalmente

Gráfico de pastel 3D

Para mostrar un gráfico de pastel en 3D, simplemente necesitas cambiar is3D: true Añadir a las opciones: }}

var options = {
  title: 'Producción mundial de vino',
  is3D: true
};

Prueba personalmente