Aprende Google Chart con PHP y MySQL
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
25 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende Google Chart con PHP y MySQL to your Wishlist.

Add to Wishlist

Aprende Google Chart con PHP y MySQL

Conecta PHP y MySQL con la poderosa herramienta (y gratuita) de creación de Gráficas de Google
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
25 students enrolled
Last updated 7/2017
Spanish
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
Includes:
  • 7 hours on-demand video
  • 10 Articles
  • 10 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • El alumno aprenderá a conectar Google Chart y PHP desde MySQL, Archivos planos, JSON y XML
  • El alumno aprenderá a crear gráficas de Área y conectarlos a los datos con PHP y MySQL
  • El alumno aprenderá a incluir anotaciones, tooltips, alcances, dominios, certezas y énfasis en las gráficas
  • El alumno aprenderá a realizar gráficas de barras, sus opciones y sus diferentes roles
  • El alumno aprenderá a graficar las gráficas con cuatro variables
  • El alumno aprenderá a crear gráficas de calendario, cargar los datos desde una base de datos MySQL desde PHP, modificar el aspecto de los cuadros de los días, los nombres de los días, meses y años
  • El alumno aprenderá a realizar diferentes tipos de gráficas con Google Chart
  • El alumno conectará las gráficas con los objetos de iniciación de JavaScript y a una hoja de cálculo de Google Drive
View Curriculum
Requirements
  • Conocimientos básicos de JavaScript, HTML y PHP
  • Conexión a Internet, un editor de código y un navegador moderno
Description

Muchas veces podemos ser expertos en PHP y MySQL, pero cuando necesitamos hacer una gráfica, sufrimos porque no tenemos la herramienta. Google Chart es una maravillosa herramienta (y gratuita) que nos permitirá hacer muchos tipos de gráficas, modificarlas de muchas maneras, tomando los datos de muchas posibles fuentes, como una base de datos MySQL, un archivo en formato JSON, un archivo plano o en formato CSV, un documento XML o incluso una hoja de cálculo de Google Drive.

Este curso no es básico. Es necesario que tengas conocimientos básicos de PHP y JavaScript, así como cierta práctica con MySQL, pero no necesitas ser un experto. También necesitarás un editor de código como APTANA, SublimeText, Dreamweaver o uno similar, así como un navegador moderno.

Los objetivos de este curso son:

  • Aprenderá a conectar Google Chart y PHP desde MySQL, Archivos planos CSV, JSON y XML
  • Aprenderá a crear gráficas de Área y conectarlos a los datos con PHP y MySQL
  • Incluirá anotaciones, tooltips, alcances, dominios, certezas y énfasis en las gráficas
  • Realizará gráficas de barras, sus opciones y sus diferentes roles
  • Creará las gráficas con cuatro variables o de burbujas
  • Creará gráficas de calendario, cargar los datos desde una base de datos MySQL desde PHP, modificar el aspecto de los cuadros de los días, los nombres de los días, meses y años
  • Aprenderá a realizar diferentes tipos de gráficas con Google Chart como:
    • Gráficas de velas
    • 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 línea
    • Los histogramas
    • Las gráficas de mapas
    • Los organigramas
    • Gráficas de dispersión
    • Líneas de tiempo
    • Gráficas de tendencia
    • Gráficas de área escalonada
    • Árboles de palabras
  • Conectará las gráficas con los objetos de iniciación de JavaScript y a una hoja de cálculo de Google Drive

Todas las gráficas las conectamos a PHP y a alguna tabla de MySQL para que puedas hacer poderosas aplicaciones web.

Who is the target audience?
  • Desarrolladores web con conocimientos en PHP y MySQL
Students Who Viewed This Course Also Viewed
Curriculum For This Course
105 Lectures
06:49:57
+
Bienvenida al curso Google Chart con PHP y MySQL
1 Lecture 04:59

Muchas veces podemos ser expertos en PHP y MySQL, pero cuando necesitamos hacer una gráfica, sufrimos porque no tenemos la herramienta. Google Chart es una maravillosa herramienta (y gratuita) que nos permitirá hacer muchos tipos de gráficas, modificarlas de muchas maneras, tomando los datos de muchas posibles fuentes, como una base de datos MySQL, un archivo en formato JSON, un archivo plano o en formato CSV, un documento XML o incluso una hoja de cálculo de Google Drive.

Preview 04:59
+
Principios entre Google Chart y PHP
10 Lectures 42:45

En esta sección veremos los siguientes temas:

  1. Bases de Google Chart

  2. Conectar Google Chart con PHP y MySQL

  3. Crear varias gráficas en una página

  4. Leer un archivo plano para graficarlo

  5. Leer un archivo JSON para graficarlo

  6. Leer un archivo XML para graficarlo

  7. El objeto DataTable


Preview 01:42

  1. Cargar la librería

  2. Preparar la información

  3. Personalización de la gráfica

  4. Dibujar la gráfica
Preview 05:32

  1. Cargar la librería

  2. Preparar la información

  3. Personalización de la gráfica

  4. Dibujar la gráfica
Conectar las gráficas de Google Chart con PHP y MySQL
06:02

Para cargar los datos necesitamos crear una tabla de dos dimensiones con el objeto:

google.visualization.DataTable

Desplegar más de una gráfica con Google Chart y PHP
07:06

Muchas veces la información que deseamos graficar se encuentra en archivos planos, posiblemente archivos separados por comas o CVS. Por medio de PHP podemos leer estos datos y graficarlos.

Generar una gráfica desde un archivo plano leído por PHP
05:56

JSON es un formato de intercambio de datos que ha ganado mucha popularidad. Podemos leer este formato fácilmente desde PHP y graficarlo desde Google Chart.

Graficar los datos leídos de un archivo JSON desde PHP
05:04

XML es uno de los primeros formatos para intercambio en la web, por lo que tenemos mucha información almacenada en el mismo. Por medio de PHP podemos leerlo y graficarlo con GoogleChart.

Graficar los datos de un documento XML leídos desde PHP
06:07

  • Podemos crear y poblar una tabla de gráfica (dataTable) de cuatro formas:

Por el constructor DataTable y la poblamos por medio de los métodos addColumn(), addRow(), addRows() y setCell().

El objeto DataTable para crear y poblar las gráficas
04:01

En esta sección estudiamos los siguientes puntos:

  1. Bases de Google Chart

  2. Conectar Google Chart con PHP y MySQL

  3. Crear varias gráficas en una página

  4. Leer un archivo plano para graficarlo

  5. Leer un archivo JSON para graficarlo

  6. Leer un archivo XML para graficarlo

  7. El objeto DataTable
Conclusión a la primera sección: Principios entre Google Chart y PHP
01:12

En esta clase podrás encontrar los apuntes de la primera sección en formato PDF

Apuntes de la primera sección: Principios de Google Chart y PHP
00:03

Contesta las siguientes preguntas

Quiz de la primera sección de Google Chart con PHP y MySQL
5 questions
+
Las propiedades de las gráficas de Área con Google Chart, PHP y MySQL
26 Lectures 01:43:24

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
Preview 01:55

Usaremos dentro de las opciones:

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

Crear una gráfica de tipo Área con PHP y MySQL
07:01

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”.

La propiedad isStacked en la gráfica de Área en Google Chart
05:15

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.

La propiedad animation en la gráfica de Área en Google Charts
05:27

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.

Las propiedades areaOpacity y axisTitlesPosition en las gráficas
04:15

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”.

Las propiedades background para manejar el fondo de las gráficas
03:37

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.

La propiedad chartArea para manejar las dimensiones de la gráfica
05:42

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%'}

La propiedad Colors para cambiar los colores de los elementos de la gráfica
02:40

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

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

La propiedad CrossHair para señalizar los puntos de la gráfica
05:22

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.

Las propiedades dataOpacity y enableInteractivity
03:32

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. 
Las propiedades fontSize y fontName en Google Chart
02:50

  • 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.

La propiedad TitleTextStyle en Google Chart
03:28

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 del eje horizontal (hAxis) en Google Chart
06:54

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

Las propiedades width y height de una gráfica en Google Chart
03:03

Las propiedades para manejar las leyendas en Google Chart
06:30

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.

La propiedad lineDashStyle para hacer líneas punteadas
04:25

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”.

Cambiar el ancho de las líneas con la propiedad lineWidth de Google Chart
02:22

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.

La propiedad Orientation en Google Chart
02:18

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.

Manejar los puntos en la gráfica en Google Chart
04:26

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

La propiedad reverseCategories en Google Chart
01:24

  • 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. 
La propiedad series en Google Chart
05:56

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.

La propiedad theme para cambiar el tema de la gráfica
01:49

  • 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}

La propiedad tooltip para manejar los cuadros emergentes de la gráfica
05:23

  • 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.

La propiedad vAxis para manejar el eje vertical de la gráfica
06:28

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
Conclusión a la sección 2: Las opciones de las gráficas en Google Chart
01:18

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

Apuntes a la sección 2: Las opciones de las gráficas en Google Chart
00:04

Contesta las siguientes preguntas sobre el tema:

Quiz de la segunda sección de Google Chart con PHP y MySQL
5 questions
+
El manejo de información en Data Format
11 Lectures 45:14

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


Preview 01:46

  • 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.
Preview 08:43

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.

Manejar la certeza y enfatizar la gráfica en Google Chart
06:56

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

  • Los intervalos se muestran normalmente como indicadores de rango de estilos de barras.
Incluir intervalos en las gráficas dentro de los datos con Google Chart
05:32

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

  • color

  • opacity

  • stroke-width

  • stroke-color

  • stroke-opacity

  • fill-color

  • fill-opacity
Añadir el valor de los tooltips en los datos y mostrarlos en la gráfica
04:09

  • 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.
Manejar los tooltips en formato HTML en Google Chart
02:59

  • 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}});

Formatear los tooltips desde una función
05:22

  • 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.

Desplegar los tooltips mediante un evento
04:10

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

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

//

});

Mandar una gráfica a png en Google Chart
04:38

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

Conclusión a la sección tres: DataFormat
00:57

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

Apuntes a la sección tres: DataFormat
00:02

Contesta las siguientes preguntas:

Quiz a la sección 3: Data Form
5 questions
+
Gráficas de barras en Google Chart
11 Lectures 34:13
  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
Preview 01:35

  • 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)

Preview 04:24

  • Podemos graficar varias series.

  • Cambiamos los colores con la propiedad “colors”.
Crear una gráfica de barras horizontales con varias series
03:18

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

  • Sus valores posibles son:

    • true

    • false
Crear una gráfica de barras horizontales apiladas
03:26

  • 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.

Las propiedades bar, bars y axes en las barras horizontales
06:00

  • Tenemos los valores en forma vertical.

  • Podemos incluir varias series.

  • Podemos apilar varias series.

  • Tenemos las gráficas “clásicas” y “material”.
Las gráficas clásicas de columnas en Google Chart
03:59

  • color

  • opacity

  • fill-color

  • fill-opacity

  • stroke-color

  • stroke-opacity

  • stroke-width
Los estilos en las gráficas "clásicas" de columnas en Google Chart
04:02

annotations: {

   textStyle: {

             fontName: 'Times-Roman',

             fontSize: 38,

             bold: true,

             italic: false,

             // Opacidad.

             opacity: 0.8

     }

},

Las anotaciones en las gráficas "clásicas" de columnas en Google Chart
02:38

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.
Apilar las series en una gráfica de columnas en Google Chart
03:57

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
Conclusión a la sección cuatro: Gráficas de barras verticales y horizontales
00:51

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

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

Conteste las siguientes preguntas:

Quiz a la sección 4: Gráficas de barras
1 question
+
Las gráficas de Burbuja en Google Chart
7 Lectures 18:28
  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
Preview 01:16

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.
Preview 04:09

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

La propiedad colorAxis en las gráficas de burbuja en Google Chart
05:41

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

La propiedad bubble en las gráficas de burbujas en Google Chart
04:20

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

Otras propiedades en las gráficas de burbuja de Google Chart
01:44

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
01:16

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

Apuntes a la sección cinco: Gráficas de burbujas
00:02
+
Las gráficas de calendario en Google Chart
9 Lectures 32:10
  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
Preview 01:39

  • 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.
Preview 06:48

  • 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 },

Modificar el tamaño de los cuadros de los días y su aspecto en Google Chart
08:45

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

Cambiar el aspecto de las celdas en los gráficos de calendario
03:51

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

Cambiar el aspecto de los días de la semana y sus etiquetas
03:04

Modificar el aspecto de las etiquetas y contorno de los meses en Google Chart
03:33

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

    • underYearSpace

    • yearLabel
Modificar el aspecto de la leyenda del año en las gráficas de calendario
03:09

  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
Conclusión a la sección seis: Gráficas de calendario
01:19

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

Apuntes de la sección seis: Las gráficas de calendario
00:02
+
Otras gráficas en Google Chart
19 Lectures 01:25:34
  • 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
Preview 02:07

  • 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.
Preview 07:10

  • 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.
Las gráficas de cascada o waterfall
04:32

  • 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.
Visualizar la tabla de una gráfica en Google Chart
03:39

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

Las gráficas de dona en Google Chart
03:19

  • 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.
Las gráficas de Gantt en Google Chart
09:58

  • 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.
Las gráficas Gauge o indicadores en Google Chart
05:05

  • 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).
Las gráficas geográficas en Google Chart
08:50

  • 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.

Los histogramas en Google Chart
04:20

  • 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.
Las gráficas de línea en Google Chart
03:11

  • 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 gráficas de Mapas con Google Chart
05:10

  • 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 organigramas en Google Chart
04:54

  • 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.
Las gráficas de dispersión de dos variables en Google Chart
04:16

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

Lineas de tiempo en Google Chart
04:20

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

Las gráficas de tendencias en Google Chart
05:55

  • 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.
Las gráficas de área escalonada en Google Chart
03:19

  • 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).

Los árboles de palabras en Google Chart
03:42

  • 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
Conclusión de la sección siete: Las otras gráficas de Google Chart
01:45

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

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

Contesta las preguntas de opción múltiple:

Quiz de la sección siete: las gráficas de Google Chart
5 questions
+
Otras formas de poblar las gráficas
8 Lectures 37:59

  • 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:
Preview 03:55

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).

La propiedad "cols" de los objetos de iniciación de JavaScript
03:22

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.

La propiedad "rows" de los objetos de iniciación de JavaScript
07:40

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.

Leer un archivo JSON con AJAX
07:32

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.

Crear el archivo JSON desde PHP leyendo una tabla de MySQL
07:54

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

Leer los datos de una gráfica desde una hoja de cálculo de Google Drive
05:09

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

Apuntes a la sección 8: Otras formas de poblar una gráfica
00:02
+
A manera de conclusión
3 Lectures 05:07
  • 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
Conclusión al curso de Google Chart con PHP y MySQL
04:58

Los ejercicios del curso Google Chart con PHP y MySQL

Ejercicio del curso Google Chart con PHP y MySQL
00:02

Estructuras de las tablas
00:06
About the Instructor
Francisco Javier Arce Anguiano
4.3 Average rating
983 Reviews
12,862 Students
34 Courses
Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.