Gráficas HTML con Google Charts

Contenido



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

¿Te pareció interesante este post?

Tienes una empresa o emprendimiento y necesitas mercadeo o transformación digital

1 Comentario on Gráficas HTML con Google Charts

    Eduardo
    31 July, 2016

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

    0
    0

Deja tu comentario

Tu email no va a ser publicado
Tu email no va a ser publicado