Gráfico de Google
Desde gráficos de líneas simples hasta mapas de árboles jerárquicos complejos, la galería de gráficos de Google proporciona una gran cantidad de tipos de gráficos listos para usar:
- Gráfico de dispersión
- Gráfico de linea
- Gráfico de barras/columnas
- Gráfico de área
- Gráfico circular
- Gráfico de anillos
- Organigráma
- Mapa / Gráfica geográfica
¿Cómo usar el gráfico de Google?
Para usar Google Chart en su página web, agregue un enlace al cargador de gráficos:
<script
src="https://www.gstatic.com/charts/loader.js">
</script>
Google Chart es fácil de usar.
Simplemente agregue un elemento <div> para mostrar el gráfico:
<div id="myChart" style="max-width:700px; height:400px"></div>
El elemento <div> debe tener una identificación única.
Luego carga la API de Google Graph:
- Cargue la API de visualización y el paquete corechart
- Establecer una función de devolución de llamada para llamar cuando se carga la API
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
¡Eso es todo!
Gráfico de líneas
Código fuente
function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
['Price', 'Size'],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// Set Options
var options = {
title: 'House Prices vs Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Gráfico de dispersión
Para diagrama de dispersión de los mismos datos, cambie google.visualization a ScatterChart:
var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
Gráfica de barras
Código fuente
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Italy', 55],
['France', 49],
['Spain', 44],
['USA', 24],
['Argentina', 15]
]);
var options = {
title: 'World Wide Wine Production'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
Gráficos circulares
Para convertir un gráfico de barras en un gráfico circular , simplemente reemplace:
google.visualization. BarChart
con:
google.visualization. Gráfico circular
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
Pastel 3D
Para mostrar el pastel en 3D, simplemente agregue is3D: true a las opciones:
var options = {
title: 'World Wide Wine Production',
is3D: true
};