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