Vamos a ver cómo integrar esta gráfica que tenemos aquí es el que dice Line Chart en el archivo Morris
donde se lo vamos a abrir aquí en el editor voy a cerrar algunos archivos registro ya no solo la mayoría
de ellos además del Tascón y Morris.
Y si vemos aquí por ejemplo se llama lincharlos y que vamos a hacer una búsqueda por linchan para no
estar buscando tanto.
Entonces es este que está aquí podemos copiar y pegarlo en nuestro editor lo luego a poner arriba poner
antes que todo
lo que creó un tipo con la clase de Rob y lo pegó y aquí voy a copiar esto.
Quiero sorprender así como resumen de registros nada más para separar esa parte.
Entonces va a crear esta forma.
De momento puedes ver que queda como el espacio vacío no se ve nada y entonces vamos a ver por ejemplo
si abrimos este puede ser que aquí dice Blanchard de Leydi podemos volver pues eczema Morris Line entonces
sí se llama entonces la librería es Morris J.V y ocupamos cargar por ejemplo el Morrisey S.C. también
el Morris J.V y ese archivo de Rafael también Rafael.
Estas son librerías de gráficos entonces vamos a ver cómo integrarlas a nuestro proyecto.
Primero vamos a copiar estos dos en Bower components así que voy a abrir una cerrar raíz del proyecto
abrimos admin CSS lanzó hacia atrás Brower components Júzcar por Morris y vamos a copiar este Morrisey
ese es lo pego acá y luego el Morrisey minipunto Jota ese lo pego acá y también necesito estar aquí
dice Rafael.
Volvemos un poco más
Rafael .1.000 punto.
Jota es entonces esos tres archivos serán necesarios.
Vamos a copiar todo esto y aquí en el templates Fuhrer vamos a cargar esas librerías de aquí tal vez
y voy a eliminar todo esto.
Pongo J.V y aquí también pongo Jota dice entonces eso va a lanzarla lanzar las librerías quien CSS no
es quien dejé de enlazar el CSS.
Copiar por ejemplo destruye Thaler de pegarlo aquí y ese archivo se llamaba Morris Morris punto CSS
no pegó aquí entonces sí guardó cambios y recargamos e inspecciona el código nomás para ver que no tenga
errores de dependencias o algo tengo terror en el no importa puedes ver que no hace falta nada.
Lo único que nos hace falta es que si abrimos Morris donde buscamos ese inline charts Line Charta vamos
a encontrar que por ejemplo más abajo tiene este idea de Chart.
Esto es lo que lo ejecuta.
Si vas a encontrar que tenemos este código.
Estos son los datos que grafica y veremos un poco más adelante como crear o mostrar los registros desde
una base de datos pero puedo copiar esta línea y abrirse JS Y lapón PJ es el que contiene lo que ayuda
a la interfaz de nuestro proyecto se puede pegar nada más para ver el ejemplo funcionando.
Y puedes ver que aparece la gráfica y tiene estos puntos todo en los puntos estos y estas naciones que
ser aquí.
Esto es por el archivo de CSS y también la gráfica de Morris y Rafael hacen que se vea de esta forma
ahora los datos son estos de aquí puedes ver que lo que dice y agrega Es la parte de abajo.
Mientras que lo que dice item son los valores que están aquí entonces esto se adapta yo por ejemplo
aquí tuviera uno que tuviera 4 aquí 2 uno cuatro dos uno dos tres y 1 recargará puedes ver cómo la gráfica
se adapta es decir va a tomar los datos que tenga y se va a adaptar de forma correcta.
Vamos a personalizar esto un poco más.
Por ejemplo puedes ver qué dice Blanchard ya puedo cerrar este de Morris ya puedo cerrar el Führer ya
puedo ser algebra puedes ver que se llama linchar podría poner aquí un
un Heydi propio y ponerle gráfica registros entonces puedo copiar este y aquí lo cambias en el elemento
que es donde defines tú cómo se va a llamar ese Heydi que tiene o que se va graficarlo.
Puedes ver que sigue viéndose bastante bien.
Entonces tenemos nuestra gráfica con Morris pero puedes ver que están estos datos y esto es puro dato
por así llamarlo números duros es puro HTML y eso es una sintaxis muy similar a Jayson.
Entonces podremos crear un pequeño servicio que nos haga la consulta la base de datos y muestre estos
datos como Jayson crear tus propios servicios va a ser una de las cosas que hoy en día te vas a encontrar
más seguido como desarrollador.
Vamos a ver cómo crear uno muy sencillo un servicio y base de Marle registrados punto PHP voy a tomar
alguno de los que aquí tenemos nada más para agregar a la sesión y en las funciones pleno no ocupa nada
no ocupamos que tenga template así que nada más ocupo la sesión y ocupo las funciones y las funciones
es donde viene la conexión a la base de datos y aquí vamos a poner nuestro sitio en cuál va a ser igual
a select y llegamos a seleccionar la fecha de registro la fecha en que nuestros usuarios fueron registrando
y vamos a ponerle un cont después pondrás resultados y lo vamos a crear su propio alias para que no
nos regreses y fechas registros cosas así lo vamos a poner un alias El Provost from registrados y vamos
a poner aquí la zona registrados registrados grupo voy a los agrupe y los voy a agrupar por fecha pero
voy a ponerle Grub voy a darle un Death es decir Créme una fecha con el campo de fechas registro y aquí
lo voy a poner orden voy y le ponemos la fecha registro entonces esto va a ser el Kairi.
Por ejemplo si tú lo copias y lo pegas copiar y aquí en registrados en 50 pegás le da asco.
Puedes ver que no regresa.
Los registros de cada día y puedes ver que tenemos el día y luego viene cuantos registros hubo ese día.
Entonces este va a ser la sintaxis para crear los registros del día que es más o menos lo que ocupamos
para graficarlo de esta forma.
Aquí están por mes pero nosotros vamos a graficar por día puedes hacerlo por mes.
También creamos un resultado que va a ser igual a una conexión y hacemos un query con este 50 después
vamos a hacer el recorrido y aquí voy a poner Weyl registro día que va a ser igual.
Ha resultado Fetch Ashok y por ejemplo aquí ya esto me va a tener los resultados los resultados de cada
día.
Puedo poner aquí un Neco pre
y compré y un Bardock
ha registrado día entonces tengo que abrir este servicio en mi navegador y que veo el servicio Fontova
servicio ya han registrado punto PHP
y pareciera que se haya registrado en plural y puedes ver que me regresan un arreglo.
Nosotros en este archivo de JavaScript.
Esto lo grabamos en Jayson.
Los datos deben de venir en Jayson y aquí están en un arreglo.
Entonces la función que convierte arreglos Allais sones y Jayson en ya son 5 y lo vas a poner y recargamos
y puedes ver que cada uno es un Jayson.
Ahora que están separados hay cuatro ya y son distintos.
Si vemos este ejemplo puede ser que todo esto es un solo Jayson entonces vamos a crear aquí un arreglo
y lo voy a llamar arreglo registro iba va a ser igual a un arreglo entonces voy a cerrar esto o eliminar
esta parte y aquí voy a tomar por ejemplo la fecha la fecha de registro es esta llave entonces aquí
voy a poner fecha igual a registro día y vamos a poner la fecha del registro entonces puedes ver que
esa fecha lo que tiene es también horas minutos y segundos.
Entonces voy a poner aquí registro y va a ser igual la fecha y va a ser igual a esquilas a poner año
mes y día nada más.
Entonces esto me va a eliminar la hora los minutos y los segundos que estamos STR Time y le pasamos
la fecha
entonces vamos a convertir la fecha de año me decidía hora minuto y segundo a nada más año me decidía
y las vamos a asignar a este registro en su campo fecha registro también es un arreglo pero no lo declaramos
acá afuera es el no va por fuera porque vamos a ir creando e ir asignando arreglo y registros en cada
iteración y se va a reescribir en cada iteración después tenemos el registro y voy a poner aquí cantidad
es decir cuántas personas se inscribieron ese día en que ponemos registro día y este es resultado
es decir este arreglos registros aún no lo hemos usado pero estamos creando por así llamarlo al vuelo
este arreglo que dice el registro en campo fecha y cantidad este no lo declaré afuera porque se va a
estar reescribiendo en cada iteración.
Entonces va a estar que dentro nada más y aquí es donde vamos a enlazarlo con el arreglo que está afuera
tenemos arreglo registros y ponemos igual a registro
entonces que lo compré y compré y le pongo un bar donde arreglo registro ya no va a regresarme.
Cuatro arreglos o cuatro o cuatro Jayson me debe regresar todo en uno solo y parecer que es un arreglo
de cuatro posiciones entonces en este se va creando el vuelo y se asigna al elemento al final y después
ya éste queda afuera con los cuatro elementos y si lo queremos convertir a Jayson aquí nada más Pongolle
son 5
y puedo guardar cambios y recargar y ya me crea un Jayson
ahora si yo copio este Jayson aquí desde la parte de las comillas nadamas los corchetes y lo pego aquí
y guardamos cambios y recargamos
puedes ver que no funciona y por qué no funciona bueno si lo regresamos un poco puedes ver que aquí
dice ECS y luego dice Aquí viene una y griega es eso en esta parte que está aquí el logo del que dice
y agrega aquí dice Euterpe entonces es este acá si yo creo mi propio servicio y lo pego aquí puedes
ver que mis llaves se llaman fecha y otras se llaman cantidad.
Entonces aquí tendría que ir fecha
y acá tendrá que ir cantidad
y puedo recargar
y puedes ver cara si me van a aparecer un registro este día 16 y luego aquí otro y a todos los demás
días otro registro acá pero seguimos teniendo código duro si alguien más vuelve acá a inscribirse este
archivo se va a actualizar cada vez pero este código que está aquí no.
Entonces cómo puedo enlazar este archivo o este código de Javascript con mi servicio que acabo de crear
voy a eliminar todo esto con este código y aquí voy a poner una función de Cuadri que se llama Get Jayson
Get Jayson y le passes la web Relay en este caso la web es servicio Nyom registrados punto PHP y la
función Boira y aquí pon tricomas hicieramos por ejemplo consolón
estos datos voy a cortar este aquí Morris recargo aquí por ejemplo te puedes ver no se ve nada.
Este no debe tener los pres de tener un eco nada más eco algo así.
Entonces ahora sí podemos recargar aquí y puedes ver que ya en la consola me pintas estos cuatro objetos
entonces así es como lo leo si habrá que Lak lo que corté lo puedo pegar aquí y ahora este data lo pongo
aquí y ya se va a pasar como los datos para la gráfica de Morris y recargamos
y puedes ver que con eso ya se ven los registros entonces cada vez va a estar leyendo de este archivo
de PHP y va a pintar la gráfica dependiendo de lo que este servicio esté teniendo como registros conforme
más usuarios se registren este Jayson irá creciendo e irá actualizando la gráfica automáticamente y
así es como puedes estar Cuadri para leer Jayson con la función de que Jayson.