Aprende Google Chart con PHP y MySQL

Los principales temas que estudiaremos en esta sección son:

1. La propiedad isStacked

2. La animación de la gráfica

3. Manejar la opacidad y el fondo de la gráfica

4. Manejar el contorno de la gráfica con chartArea

5. Los parámetros globales de tamaño de letra, color y tipo.

6. Manejar el título, el eje horizontal y vertical

7. El objeto series

8. Modificar los tooltips

Usaremos dentro de las opciones:

hAxis: {title: 'Años',  titleTextStyle: {color: '#333'}},

Propiedades isStacked :

false — No se apilan las gráficas. Valor por omisión.

true — Si se apilan las gráficas.

'percent' — Se apilan las gráficas para sumar 100%

'relative' — Se apilan las gráficas para sumar 1.

'absolute' — Funciona igual que “true”.

Atenuación en la animación. Sus valores posibles son:

    'linear' - Constante.

    'in' - Ease in - Lento inicial.

    'out' - Ease out - Lento al final.

    'inAndOut' - Ease in and out - Lento al inicio y al final.

Es la opacidad de todas las gráficas, donde 0 es completamente transparentes y 1 es completamente opaco.

El valor por omisión es 0.3.

Es el lugar que aparece el título con respecto de la gráfica. El valor es:

    in - Ubicar el título dentro de la gráfica.

    out - Ubicar el título fuera de la gráfica.

    none - Omitir el título.

El valor por omisión es “out”.

Es el color de fondo de la gráfica. Por omisión su valor es “white”. Puede ser número hexadecimal o un nombre del color en inglés.

Un objeto con propiedades para configurar la ubicación y el tamaño del área del gráfico (donde se dibuja el gráfico en sí, excluyendo el eje y las leyendas). Se admiten dos formatos: un número o un número seguido de %.

Ejemplo: chartArea: {left: 20, top: 0, width: '50% ', height: '75%'}

Puede ser una cadena o un arreglo que corresponde a cada una de las opciones de la gráfica, por ejemplo:

colors:['red','#004411'].

CrossHair son las líneas verticales y horizontales que aparecen cuando el usuario selecciona un punto en la gráfica.

Los estados que pueden activar esta propiedad son: focus, selection o ambos (both).

La propiedad CrossHair es un objeto.

dataOpacity

• La transparencia de los puntos de datos, siendo 1.0 completamente opaco y 0.0 totalmente transparente.

• En diagramas de dispersión, histograma, barra y columna, se refiere a los datos visibles: puntos en el gráfico de dispersión y rectángulos en los otros. 

• fontSize: Cambia el tamaño de todas las fuentes de la gráfica.

• fontName: Cambia el tamaño de todas las fuentes de la gráfica.

hAxis.textPosition: Posición del texto del eje horizontal, en relación con el área del gráfico. Valores admitidos: 'out', 'in', 'none'.

Las propiedades width y height manejan el ancho y alto de la gráfica, respectivamente, en pixeles.

Las propiedades para manejar las leyendas en Google Chart

Muchos estilos de líneas discontinuas son posibles a través de la opción lineDashStyle, que toma una matriz de números.

El primer número indica la longitud de un guión, y el segundo indica la distancia después de él.

Si hay un tercer número, esa es la longitud del siguiente guión, y un cuarto número, si está presente, es la longitud del espacio siguiente.

lineWidth:  Ancho de línea de datos en píxeles. Use cero para ocultar todas las líneas y mostrar sólo los puntos. Puede anular valores para series individuales utilizando la propiedad “series”.

orientation: La orientación del gráfico. Cuando se establece en 'vertical', gira los ejes del gráfico de modo que (por ejemplo) un gráfico de columnas se convierta en un gráfico de barras y un gráfico de área crece hacia la derecha en lugar de hacia arriba.

En muchos gráficos de Google, los valores de datos se muestran en puntos precisos. Un gráfico de líneas es sólo un conjunto de estos puntos conectados por líneas, y un gráfico de dispersión no es más que puntos.

Si se establece en true, dibujará series de derecha a izquierda. El valor predeterminado es dibujar de izquierda a derecha.

• Una matriz de objetos, cada uno describiendo el formato de la serie correspondiente en el gráfico.

• Para usar valores predeterminados para una serie, especifique un objeto vacío {}.

• Si no se especifica una serie o un valor, se utilizará el valor global. 

Un tema es un conjunto de valores de opción predefinidos que trabajan juntos para lograr un comportamiento gráfico específico o un efecto visual. Actualmente solo hay un tema disponible.

• Tooltips es un objeto para modificar los pequeños recuadros que aparecen cuando seleccionamos un punto en la gráfica. Un ejemplo puede ser:

{textStyle: {color: '#FF0000'}, showColorCode: true}

• vAxis.direction: La dirección en la que crecen los valores a lo largo del eje vertical. Especifique -1 para invertir el orden de los valores.

Las principales opciones que vimos en la sección fueron:

1. La propiedad isStacked

2. La animación de la gráfica

3. Manejar la opacidad y el fondo de la gráfica

4. Manejar el contorno de la gráfica con chartArea

5. Los parámetros globales de tamaño de letra, color y tipo.

6. Manejar el título, el eje horizontal y vertical

7. El objeto series

8. Modificar los tooltips

En esta clase puede encontrar los apuntes de la sección 2: Las opciones de las gráficas en Google Chart

Los temas que estudiaremos en esta sección son:

1. Anotaciones

2. Remarcar tramos de la gráfica con “certeza” o “énfasis”.

3. Incluir los intervalos de la gráfica

4. Añadir valores en los tooltips

5. Manejar tooltips en HTML

6. Formatear los tooltips desde una función

7. Desplegar los tooltips por medio de un evento

8. Mandar una gráfica a un PNG

• Las anotaciones son marcas que aparecen en la línea de la serie.

• Los textos de las anotaciones aparecen cuando el cursor se posiciona sobre las anotaciones.

Indica si un punto de datos es seguro o no. El modo en que se visualiza depende del tipo de gráfico; por ejemplo, se puede indicar mediante líneas de trazos o un relleno de rayas.

• Indica el rango de datos potencial para un punto específico.

• Los intervalos se muestran normalmente como indicadores de rango de estilos de barras.

• Estiliza ciertas propiedades de diferentes aspectos de sus datos. Esos valores son:

• color

• opacity

• stroke-width

• stroke-color

• stroke-opacity

• fill-color

• fill-opacity

• Texto a mostrar cuando el usuario se sitúa sobre el punto de datos asociado con esta fila.

• Nota: esto no es compatible con la visualización del gráfico de burbujas. El contenido de las herramientas de HTML de la gráfica de burbuja no es personalizable.

• Debemos activar la propiedad isHtml a true en las opciones.

• En la definición de la columna debemos activar también el HTML

data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

• Por medio del método “setAction()” podemos detectar un evento en los tooltips.

• Lo más adecuado es colocar el tooltip en “selection” para que el usuario pueda seleccionar la opción.

• Esperar a que termine de dibujarse la gráfica por el evento “ready”:

google.visualization.events.addListener(chart, 'ready', function () {

//

});

Los puntos revisados en esta sección fueron:

1. Anotaciones

2. Remarcar tramos de la gráfica con “certeza” o “énfasis”.

3. Incluir los intervalos de la gráfica

4. Añadir valores en los tooltips

5. Manejar tooltips en HTML

6. Formatear los tooltips desde una función

7. Desplegar los tooltips por medio de un evento

8. Mandar una gráfica a un PNG

En esta clase encontrará los apuntes a la sección tres: DataFormat

1. Crear gráficas de barras horizontales

2. Crear barras horizontales con varias series

3. Crear barras apiladas

4. Las propiedades bar, bars y axes

5. Las gráficas de columnas

6. Los estilos de gráficas de columnas

7. Las anotaciones de las gráficas de columnas

8. Apilar las series en las gráficas de columnas

• Tenemos los valores en forma horizontal.

• Podemos incluir varias series.

• Podemos apilar varias series.

Para aprovechar las opciones de hAxis y vAxis necesitamos el método: convertOptions(opciones)

• Podemos graficar varias series.

• Cambiamos los colores con la propiedad “colors”.

• Por medio de la propiedad isStacked podemos apilar las series dentro del mismo grupo.

• Sus valores posibles son:

• true

• false

• La propiedad axes nos permite manejar los ejes x y y.

• La propiedad bar, con su parámetro groupWidth nos permite controlar el ancho del grupo de barras, donde 100% indicaría que no hay espacio entre los grupos.

• Tenemos los valores en forma vertical.

• Podemos incluir varias series.

• Podemos apilar varias series.

• Tenemos las gráficas “clásicas” y “material”.

• color

• opacity

• fill-color

• fill-opacity

• stroke-color

• stroke-opacity

• stroke-width

annotations: {

   textStyle: {

             fontName: 'Times-Roman',

             fontSize: 38,

             bold: true,

             italic: false,

             // Opacidad.

             opacity: 0.8

     }

},

Las gráficas de burbujas grafican cuatro variables:

• La primer variable es el eje de las “equis”.

• La segunda variable es el eje de las “yes”.

• La tercera variable es el color de la burbuja.

• La cuarta variable es el tamaño de la burbuja.

Los temas que estudiamos en la sección cuatro fueron:

1. Crear gráficas de barras horizontales

2. Crear barras horizontales con varias series

3. Crear barras apiladas

4. Las propiedades bar, bars y axes

5. Las gráficas de columnas

6. Los estilos de gráficas de columnas

7. Las anotaciones de las gráficas de columnas

8. Apilar las series en las gráficas de columnas

Apuntes a la sección cuatro: Las gráficas de barras horizontales y verticales

1. Manejo de las gráficas de burbujas

2. La propiedad colorAxis

3. La propiedad bubble para el control del texto en la burbuja

4. Otras propiedades en las gráficas de burbujas

Las gráficas de burbujas grafican cuatro variables:

• La primer variable es el eje de las “equis”.

• La segunda variable es el eje de las “yes”.

• La tercera variable es el color de la burbuja.

• La cuarta variable es el tamaño de la burbuja.

Por medio de la propiedad de tipo objeto colorAxis podemos identificar una tercera variable por medio del color.

La propiedad bubble nos permitirá controlar el contenido de la burbuja.

Las gráficas de burbuja aceptan las diferentes propiedades, como backgroundColor, animation, etc.

Los temas vistos en la sección 5 son:

1. Manejo de las gráficas de burbujas

2. La propiedad colorAxis

3. La propiedad bubble para el control del texto en la burbuja

4. Otras propiedades en las gráficas de burbujas

Conclusión a la sección cinco: Gráficas de burbujas

1. Las gráficas de calendario

2. Modificar el tamaño de los cuadros de los días

3. Cambiar el aspecto de las celdas en los calendarios

4. Cambiar el aspecto de los días de la semana

5. Modificar el aspecto de las etiquetas

6. Modificar el aspecto de la leyenda del año

• Las gráficas de calendario nos servirán para ver tendencias en el tiempo, generalmente en periodos amplios, como meses o años.

• Tomará como base una fecha en JavaScript con el objeto “new Date” y una medida numérica.

• Si el valor de la medida es negativo, el color del día se tornará naranja oscuro.

• Para modificar el tamaño del recuadro del día utilizamos el parámetro:

calendar: { cellSize: 10 },

Podemos modificar el aspecto de las celdas como el contorno, el ancho del mismo y su opacidad con cellColor:.

Por medio de la propiedad dayOfWeekLabel podemos cambiar el aspecto de las letras de los días de la semana.

• Para modificar el aspecto de las leyendas de los años contamos con las siguientes propiedades:

• underYearSpace

• yearLabel

1. Las gráficas de calendario

2. Modificar el tamaño de los cuadros de los días

3. Cambiar el aspecto de las celdas en los calendarios

4. Cambiar el aspecto de los días de la semana

5. Modificar el aspecto de las etiquetas

6. Modificar el aspecto de la leyenda del año

Apuntes de la sección seis: Las gráficas de calendario

• Las gráficas de vela o candlestick

• Las gráficas de cascada

• Visualización de una tabla

• Las gráficas de dona

• Gráficas de Gantt

• Los indicadores o gráficas de Gauge

• Gráficas geográficas

• Las gráficas de vela o candlestick se usan para mostrar un valor de apertura y cierre superpuesto encima de una varianza total.

• Se utilizan a menudo para demostrar comportamiento del valor común de compra-venta.

• Por medio de las gráficas candlestick podemos hacer una gráfica de cascada o waterfall.

• El valor inicial debe ser igual al valor mínimo y el valor de cierre al valor máximo.

• Una tabla que puede ser ordenada y paginada.

• Las celdas de tabla se pueden formatear utilizando cadenas de formato o insertar directamente HTML como valores de celda.

Por medio de la opción pieHole podemos hacer una gráfica de dona, a partir de una gráfica de pie.

• Una gráfica de Gantt ilustra el desglose de un proyecto en sus tareas componentes.

• Los gráficos de Google Gantt ilustran el inicio, el final y la duración de las tareas dentro de un proyecto, así como las dependencias que pueda tener una tarea.

• Esta gráfica presenta un indicador con un dial. Las gráficas se basan en SVG o VML.

• Podemos cambiar los rangos verde, amarillo y rojo.

• Esta gráfica muestra un mapa por países, por regiones o por continentes.

• Las gráficas son creadas en SVG o VML.

• No son escalables ni arrastrables.

• Necesitas una llave de los mapas de Google (mapsApiKey).

• Un histograma es un gráfico que agrupa los datos numéricos en contenedores, mostrando los contenedores como columnas segmentadas.

• Se utilizan para describir la distribución de un conjunto de datos: la frecuencia con la que los valores caen en intervalos.

• Un gráfico de líneas que se representa en el navegador mediante SVG o VML.

• Muestra las tooltips cuando se pasa sobre puntos de la misma.

• El gráfico de mapa de Google muestra un mapa utilizando la API de Google Maps.

• Los datos se muestran como marcadores en el mapa.

• Las organigramas son diagramas de una jerarquía de nodos, comúnmente usados para representar relaciones superiores - subordinadas en una organización.

• Un árbol genealógico es un tipo de organigrama.

• Los gráficos de dispersión trazan puntos en un gráfico sobre dos variables.

• Cuando el usuario se sitúa sobre los puntos, se muestran los tooltips con más información.

Una línea de tiempo es un gráfico que describe cómo se utiliza un conjunto de recursos en el tiempo.

Una línea de tendencia es una línea superpuesta en un gráfico que revela la dirección general de los datos.

• Un gráfico de área escalonada que se representa en el navegador mediante SVG o VML.

• Muestra los tooltips cuando se cierne sobre los pasos.

• Un árbol de palabras representa múltiples secuencias paralelas de palabras.

Podría ser usado para mostrar qué palabras preceden más seguido a una palabra objetivo (por ejemplo, "Gatos son ...") o para mostrar una jerarquía de términos (por ejemplo, un árbol de decisión).

• Las gráficas de vela o candlestick

• Las gráficas de cascada

• Visualización de una tabla

• Las gráficas de dona

• Gráficas de Gantt

• Los indicadores o gráficas de Gauge

• Gráficas geográficas

Apuntes de la sección siete: Las otras gráficas de Google Chart

Existen diversas maneras de representar datos visualmente, más allá de los gráficos tradicionales como barras y líneas. Se pueden utilizar gráficos de sectores, mapas de calor, diagramas de caja, gráficos de burbujas, e incluso pictogramas con iconos o imágenes que representan los datos. La elección del tipo de gráfico dependerá del tipo de datos y de la información que se desea resaltar.

• Puede inicializar un DataTable pasando un objeto de JavaScript al parámetro de datos.

• Puede codificar este objeto “a mano”, de acuerdo con la siguiente descripción:

Propiedad cols:

• cols es una matriz de objetos que describe el ID y el tipo de cada columna.

Cada propiedad es un objeto con las siguientes propiedades (con distinción entre mayúsculas y minúsculas).

Propiedad rows:

• La propiedad rows contiene una matriz de objetos de fila.

Cada objeto de tipo fila (row) tiene una propiedad requerida llamada “c”, que es una matriz de celdas (cell) en esa fila.

Por medio de AJAX podemos disparar un archivo de servidor (por ejemplo, PHP), el cual lee un archivo en el servidor y lo regresa como una cadena.

Por medio de AJAX podemos disparar un archivo de servidor (por ejemplo, PHP), el cual lee un archivo en el servidor y lo regresa como una cadena.

Podemos almacenar los datos de una gráfica en una hoja de cálculo de Google Drive.

Apuntes a la sección 8: Otras formas de poblar una gráfica

ColorZilla es una herramienta que nos permita detectar un color de un elemento de una página web.

Herramientas para encontrar colores armónicos

Páginas para descargar fuentes e íconos

Crear gradientes de forma sencilla por medio de dos herramientas

Herramientas para las Cajas  flexibles

Herramientas para objetos SVG y Curvas Bezier Cuadráticas

Herramienta para diseños display: grid;

• El alumno :

• Aprender a crear gráficas y conectarlas a una tabla de MySQL por medio PHP

• Aprender a incluir anotaciones, tooltips, alcances, dominios, certezas y énfasis en las gráficas

• Realizar gráficas de barras, sus opciones y sus diferentes roles

• Aprender a crear las gráficas de burbujas con cuatro variables

Los ejercicios del curso Google Chart con PHP y MySQL