3 de febrero de 2014

Google Charts para crear gráficos en tu sitio web


Google Charts a través de su API ofrece la posibilidad de visualizar datos en tu sitio web. La galería gráfica provee diferentes tipos de gráficos listos para su uso: desde gráficos de barras o líneas simples a mapas de árboles jerárquicos complejos.


Los gráficos se representan mediante la tecnología HTML5 / SVG (Scalable Vector Graphics) para garantizar la compatibilidad entre navegadores (incluyendo VML o Vector Markup Language para versiones anteriores de Internet Explorer) y la portabilidad entre plataformas para iPhones, iPads y Android. Los usuarios no tendremos que instalar plugins o software adicional, sólo es necesario disponer de un navegador web.

La forma común de mostrar los gráficos en tu sitio web es mediante la inserción de código javascript en un documento html. Sólo tenemos que indicar los parámetros correspondientes a cada gráfico a utilizar.

  • Gráfico de Líneas (Line Chart)
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Año', 'Ingresos', 'Gastos'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);
        var options = {
          title: 'Balance de la Compañía'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

 Cargando gráfico de líneas... por favor, espere

Si queremos presentar las líneas de forma curva añadimos el parámetro curveType:

Información detallada de todos los parámetros de configuración: Line Chart

  • Gráfico de Barras (Column Chart)
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Año', 'Ingresos', 'Gastos'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);
        var options = {
          title: 'Balance de la Compañía',
          hAxis: {title: 'Año', titleTextStyle: {color: 'red'}}
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

 Cargando gráfico de barras... por favor, espere

Hay tres maneras diferentes de definir los colores de las columnas: valores RGB, nombres de los colores en inglés, y estilos css:

Información detallada de todos los parámetros de configuración: Column Chart

  • Gráfico Circular (Pie Chart)
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Tareas', 'Horas por día'],
          ['Trabajo',     11],
          ['Comida',      2],
          ['Transporte',  2],
          ['Televisión',  2],
          ['Dormir',      7]
        ]);
        var options = {
          title: 'Mi actividad diaria',
          is3D: true,
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

 Cargando gráfico circular... por favor, espere

El parámetro is3D con valor true indica que el gráfico se visualiza en tres dimensiones. Para mostrarlo en dos dimensiones, cambiamos su valor a false.
Información detallada de todos los parámetros de configuración: Pie Chart

Tal vez te interese instalar esta extensión en tu navegador Google Chrome para generar gráficos en 3D e imprimirlos de forma sencilla:


Crea gráficos online de 2D o 3D. El modo edición es fácil e intuitivo. Además puedes imprimir el gráfico generado.


Todos los ejemplos de gráficos se pueden encontrar en Chart Gallery, así como otros añadidos por la comunidad Additional Charts Gallery


6 comentarios:

Juan Mishquero dijo...

Por favor alguien que me ayude como poner dos graficas en la misma pagina lo estuve intentand pero se me sobreponen apoyen.....

Jose Maria Acuña Morgado dijo...

Hola Juan, ¿me puedes proporcionar la url del blog o página web en la que estás haciendo las pruebas?
Si puedo echarle un vistazo, podré ayudarte :)
Un saludo!

Anónimo dijo...

Buenos días.

Para que los datos de las gráficas se "jalen" de una Base de Datos en sql server, como podría ser?
porque en tu código tu capturas los valores que aparecen en la gráfica, pero necesito jalar los valores de acuerdo a las consultas de sql

Jose Maria Acuña Morgado dijo...

Hola, desde una página estática o html no puedes extraer registros de una base de datos.
Para ello tendrías que utilizar un lenguaje de programación del lado del servidor (php, java, .net, C#, etc).

Además, tendrías que parsear los datos para utilizarlos tipo array.

Un saludo y gracias por comentar!!

Base De Datos dijo...

Quisiera colocar 2 Google Chart en la misma pagina y no funciona, como debería ser el código?

Jose Maria Acuña Morgado dijo...

Buenos días Base De Datos,
disculpas por no haber contestado antes pero me ha sido imposible.

Evidentemente, la Api de Google está diseñada para poder cargar en una misma página html tantos gráficos como queramos.

La solución la puedes copiar de la página: how-to-add-two-google-charts-on-the-one-page

Gracias por visitar el blog.
Un saludo!!