Crea gráficas dinámicas SVG con la herramienta gratis de Google

Elige la gráfica que necesitas de una lista muy completa que abarca desde gráficas simples de barra hasta las más complejas, como árboles jerárquicos.

Personaliza la gráfica que seleccionaste para que se adecúe a la información que necesitas presentar y al lugar donde la colocarás con un set de opciones. Podrás visualizar la gráfica en todos los navegadores sin necesidad de instalar plugins, ya que Google se ha encargado de la compatibilidad para las versiones obsoletas de Internet Explorer y los smartphones.

Este servicio gratuito sigue creciendo, conecta fácilmente tus gráficas y controles a un panel de administración interactivo. Para que los datos estén siempre actualizados puedes conectarte a la información en tiempo real, utilizando una variedad de herramientas de conexión y protocolos.

Las gráficas están realizadas con HTML5 y SVG.

Gráfica de área

area chart

Esta gráfica es muy sencilla de configurar ya que se pueden establecer los datos con un array donde se ingresan los valores y las leyendas de cada eje.

Gráfica de barras horizontal o vertical

bar chart

Se puede cambiar la grid de fondo, elegir la dirección vertical u horizontal de las barras.

Gráfica de burbujas

bubble chart

Las bubble chart se utilizan para visualizar un set de datos que se puede analizar desde 2 a 4 dimensiones. Las dos primeras dimensiones se visualizan como coordenadas, la tercera como un color y la cuarta como tamaño.

Gráfica de velas

candlestick chart

Son utilizadas generalmente para poder mostrar el cambio del comportamiento de las acciones en la bolsa. En esta clase de gráficas si hay ganancia se muestra una caja rellena, y si hay pérdida como una caja vacía.

Gráfica mixta

combo chart

Esta gráfica es un combo donde se pueden combinar valores de los siguientes tipos: línea, área, barras, de velas y stepped área.

Gráfica de gauge o circular

gauge chart

Carga una o más gráficas que muestran un porcentaje de una determinada magnitud.

Gráficas geográficas

globe chart

Se configuran dos nodos: la región que colorea las regiones por completo y el marcados que designa ciertas áreas utilizando burbujas.

Gráfica de línea

line chart

Gráfica de pastel

pie chart

Gráfica de dispersión

scatter chart

Emplea esta gráfica para mapear la correlación entre dos grupos de números o valores.

Gráfica en tramos

stepped area chart

Tabla

table chart

Una tabla interactiva que puede ser ordenada fácilmente y paginada.

Gráfica de árbol

tree chart

Una representación visual de un árbol de datos donde cada nodo se representa como un rectángulo con un color y tamaño definido por el usuario.

En el siguiente link accede a ejemplos interactivos preparados por Google.

Demo

¿Cómo añado una gráfica de Google en mi sitio web?

Para poder emplear las gráficas de Google tenemos que añadir en la etiqueta <head> el script que permitirá embeber esta función en nuestro sitio.

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

Cada gráfica tiene su código particular, que podrás configurar a tu gusto.

Se debe colocar el código de la gráfica deseada dentro de la etiqueta <head> y cambiar la id de la div donde llamaremos a la gráfica de chart_div al nombre de nuestro agrado.

Enlaces adicionales

Si deseas realizar una prueba antes de utilizar la gráfica utiliza este editor de código en vivo que proporciona Google. Además puedes consultar algunas clases de gráficas adicionales que te pueden servir de inspiración.

 

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

    Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>