Gráficas HTML con Google Charts



Google Charts es una serie de librerías desarrolladas por google con el fin de ayudar a la realización de múltiples gráficas en HTML para la web, muy sencilla de configurar y con muchas opciones de uso.

Si deseas consultar la fuente de configuración y todas las opciones que puedes utilizar da clic al siguiente link Google Chart

A continuación vamos a ver la configuración básica y algunos ejemplos de lo que se puede hacer con esta librería tan poderosa.

Pie chart

1. Creamos la estructura HTML con la división donde se va a ejecutar la gráfica,incluimos la librería desde google y el archivo de scripts

1
	Document<script src="https://www.google.com/jsapi" type="text/javascript"></script><script src="js/script.js" type="text/javascript"></script>

2. Creamos el script para iniciar la librería de google

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

3. Creamos la función con los datos que se van a graficar

1
2
3
4
5
6
7
8
9
10
11
function drawChart() {
        var data = new google.visualization.DataTable();
        //data.addColumn('string', 'Topping');
        //data.addColumn('number', 'Slices');
        data.addRows([
          ['header', 5,],
          ['aside', 1],
          ['section', 2],
          ['article', 9],
          ['footer', 12]
        ]);

4. Definimos las opciones de la gráfica como titulo y tamaño

1
2
3
var options = {'title':'Etiquetas más usadas en HTML',
              'width':300,
              'height':300};

5. Seleccionamos el tipo de gráfica que queremos utilizar y la asignamos a la división que va a imprimir la gráfica en el navegador

1
2
 var chart = new google.visualization.PieChart(document.getElementById('pie'));
        chart.draw(data, options);

Si deseas cambiar el tipo de gráfica, solo debes consultar la información el sitio web de la librería y cambiar el nombre de la gráfica en la parte subrayada

new google.visualization.PieChart(document.getElementById(‘pie’));

Nota importante: Si la gráfica requiere más de dos datos para poder funcionar te va a arrojar error y va a solicitar los datos necesarios

Area chart

Con solo cambiar en esta linea el texto subrayado por AreaChart podemos obtener otro tipo de gráfica con los mismos datos

new google.visualization.AreaChart(document.getElementById(‘pie’));

Column chart

Con solo cambiar en esta línea el texto subrayado por ColumnChart podemos obtener otro tipo de gráfica con los mismos datos

new google.visualization.ColumnChart(document.getElementById(‘pie’));


Resultado

Like
Like Love Haha Wow Sad Angry
431
       
Haz clic aquí si quieres publicar un comentario para este post
Suscribirse
Notify of
guest

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

1 Comentario
Nuevos
Viejos Más votados
Inline Feedbacks
Ver todos los comentarios
Eduardo
Eduardo
4 Años Hace

¿cómo coloco dos gráficos en una misma página con Google Charts?