Es relativamente fácil comenzar a desarrollar graficos. Todo lo que se requiere es el script incluido en la página junto con un solo nodo canvas o container para representar el gráfico.
El uso de un nodo canvas o un nodo container depende la libreia que se quiere usar para desarrollar el gráfico.
Existen diversas librerias en el mercado; unas son de uso gratuito otras son de uso comercial; en esta plataforma hablaremos solo de las librerias de uso gratuito.
Ahora, acerca de los charts de líneas comencemos por decir que se suelen usar para mostrar tendencias (trends)
Los gráficos de líneas son tremendamente populares para una variedad de casos de uso empresarial porque demuestran una tendencia general de forma rápida y concisa, de una manera que es difícil de malinterpretar.
En particular, son buenos para representar tendencias para diferentes categorías durante el mismo período de tiempo, para facilitar la comparación
En terminos de ingenieros: los gráficos de línea son útiles cuando quieres mostrar los cambios en valor de una variable dada con respecto a los cambios en alguna otra variable; la otra variable usualmente es el tiempo.
Ejemplo 1, muestra gráficas de línea usadas para mostrar la velocidad de un vehículo durante intervalos específicos de tiempo.
Ejemplo 2, muestra como también se pueden trazar múltiples líneas en una sola gráfica y proporcionar diferentes opciones para dibujar cada una de ellas.
Bar charts
Seccion 1
Los gráficos de barras son excelentes para comparar varios valores diferentes, especialmente cuando algunos de estos se dividen en categorías codificadas por colores.
Las gráficas de barras son útiles cuando quieres comparar una sola métrica para diferentes entidades---por ejemplo, el número de carros vendidos por diferentes compañías o el número de personas en ciertos grupos de edad en un pueblo
Por ejemplo, usando la libreria Chart.js puedes crear gráficas de barras estableciendo la llave type a bar. Por defecto, esto creará gráficas con barras verticales. Si quieres crear gráficas con barras horizontales, tendrás que establecer el type a horizontalBar.
Ejemplo 1: Creemos una gráfica de barra que trace la densidad de todos los planetas en nuestro sistema solar. La información de densidad ha sido tomada de la Hoja de Datos Planetarios proporcionada por la NASA.
Ejemplo 2: Hagamos la gráfica de densidad más interesante anulando los valores por defecto para gráficas de barra usando el siguiente código. Después, el type de la gráfica ha sido establecido a horizontalBar esta vez.
Bar charts
Seccion 2
En Seccion 1, definimos que un gráfico de barras puede ser vertical o horizontal y mostramos ejemplos de ello, ahora vamos a volver a hablar del grafico de barras tipo vertical pero refereido como garfico de columnas; debido a que algunas librerias prefieren usar los terminos column y horizontal chart en vez de bar chart
Los gráficos de columnas son excelentes para comparar valores uno al lado del otro; se usan para mostrar los cambios a lo largo de un periodo de tiempo, cuando se desea llamar la atención sobre las cifras totales.
Por lo general, tiene sentido usar gráficos de columnas para comparaciones en paralelo de diferentes valores.
Ejemplo 3, toma como base valores mostrados en Ejemplos 1, 2 para representar lo enunciado anteriormente
Un uso considerado de expertos es aquel: cuando se desea resaltar o contrastar cifras clave con una tendencia general, se suele combinar un gráfico de columnas con uno de líneas:
Ejemplo 4: miestra lo que se denomina Stacked Column chart, que consiste en representar los datos como columnas apiladas para comparar cantidades; lo cual es una característica esencial de los gráficos de columnas; se utilizan a menudo para visualizar datos que se acumulan en una suma; estos gráficos muestran etiquetas de datos para cada sección individual de la pila.
Pie & Doughnut charts
Los gráficos circulares (Pie charts) y de anillos (Doughnut charts) son útiles cuando se desea mostrar la proporción en la que algo se divide entre diferentes entidades
Los gráficos circulares muestran claramente las proporciones; muestran fácilmente la parte que cada valor constituye del todo. Son mucho más intuitivos que simplemente enumerar porcentajes que suman 100%.
Importante: para que un gráfico circular sea eficaz, debe tener seis categorías o menos; más que eso y el gráfico estará demasiado lleno y los valores serán demasiado indistintos para obtener información.
Ejemplo 1, es un gráfico circular que muestra los datos de exportaciones de petróleo de los cinco principales países en 2020. Los datos están en miles de millones de dólares estadounidenses.
Ejemplo 2, es un gráfico de anillos con la misma data xe Ejemplo 1; donde estableciendo el valor de rotación igual a -Math.PI toma ese punto de inicio 180 grados en sentido antihorario; luego, estableciendo el valor de la circunferencia en Math.PI hace que el gráfico solo abarque un semicírculo.
Scales 1
Changing Grid Lines
Se puede mostrar u ocultar las líneas de cuadrícula de un gráfico utilizando display key; su valor inicial es true, por lo que las líneas de la cuadrícula se muestran by default
El color de las líneas de la cuadrícula se puede especificar utilizando color key.
Si desea que las líneas de la cuadrícula estén compuestas por guiones en lugar de líneas continuas, puede proporcionar un valor para la longitud y el espaciado de los guiones como valor de borderDash key.
Puede establecer width y color de las líneas para el first or zero index utilizando zeroLineWidth y zeroLineColor keys respectivamente.
Ejemplo 1: muestra el mismo gráfico de velocidad de auto, especificando un conjunto diferente de opciones de gráfico.
Configuring Linear Scales
Las escalas lineales se utilizan para graficar datos numéricos. Estas escalas se pueden crear en el eje x o en eje y
En la mayoría de los casos, las librerias detectan automáticamente los valores mínimo y máximo de las escalas; sin embargo, esto puede resultar en cierta confusión.
Si se quiere graficar calificaciones; si las calificaciones máximas fueron 200 pero ningun estudiante obtuvo más de 180 puntos, la escala alcanzará un máx de 180; en tales casos, el lector no tendrá forma de saber si las calificaciones máximas fueron 180 o 200.
Ejemplo 2: muestra el código para especificar los valores de escala mínimos y máximos para la escala horizontal en el gráfico de barras para un tutorial anterior de esta serie..
Scales 2
Configuring Time Scales
Se puede mostrar u ocultar las líneas de cuadrícula de un gráfico utilizando display key; su valor inicial es true, por lo que las líneas de la cuadrícula se muestran by default
El color de las líneas de la cuadrícula se puede especificar utilizando color key.
Si desea que las líneas de la cuadrícula estén compuestas por guiones en lugar de líneas continuas, puede proporcionar un valor para la longitud y el espaciado de los guiones como valor de borderDash key.
Puede establecer width y color de las líneas para el first or zero index utilizando zeroLineWidth y zeroLineColor keys respectivamente.
Ejemplo 1: muestra el mismo gráfico de velocidad de auto, especificando un conjunto diferente de opciones de gráfico.
Configuring Radial Linear Scales
Las escalas lineales se utilizan para graficar datos numéricos. Estas escalas se pueden crear en el eje x o en eje y
En la mayoría de los casos, las librerias detectan automáticamente los valores mínimo y máximo de las escalas; sin embargo, esto puede resultar en cierta confusión.
Si se quiere graficar calificaciones; si las calificaciones máximas fueron 200 pero ningun estudiante obtuvo más de 180 puntos, la escala alcanzará un máx de 180; en tales casos, el lector no tendrá forma de saber si las calificaciones máximas fueron 180 o 200.
Ejemplo 2: muestra el código para especificar los valores de escala mínimos y máximos para la escala horizontal en el gráfico de barras para un tutorial anterior de esta serie..
Atelier: Graphs 2
Doble eje: line & column
l>
Gráfico que muestra una combinacion de column y line chart, utilizando varios ejes Y
El uso de varios ejes permite visualizar juntos los datos en diferentes rangos.
El ejemplo que se presenta, muestra un reporte semanal de progreso de proyecto.
Ejes Multiples
Gráfico que muestra el uso de varios ejes y, donde cada serie tiene un eje separado.
Múltiples ejes permiten visualizar juntos datos en diferentes rangos.
Lo cual los convierte en una herramienta poderosa para ilustrar las correlaciones.
Fijar Nuevos Datos
Gráfico que muestra el uso de botones para reproducir dos nuevas series de datos en un solo container.
Para lograr ello, el script combina el metodo de busqueda document.getElementById con un addEventListener
Luego, para volver a la serie original se debe actualizar la pagima
Data visualization
ESTE EJERCICIO MUESTRA COMO GENERAR UN CHART EN HIGHCHARTS COMBINANDOLO CON LA LIBREIA JQUERY.DATATABLE
SE PRESENTA EL EJERCICIO CON EL FIN DE QUE EL LECTOR SE FAMILIARICE CON LA ESTRUCTURA DE ESTE TIPO DE SCRIPT
PARA PROBARSE A SI MISMOS SU COMPRENSION DEL SCRIPT NO DUDEN EN EMPEZAR A HACER CAMBIOS Y VER SUS RESULTADOS
Alternar Gráfico
ESTE EJERCICIO MUESTRA COMO ALTERNAR ENTRE GRAFICOS DIFERENTES CON EL USO DE BOTONES
SE PRESENTA EL EJERCICIO CON EL FIN DE QUE EL LECTOR SE FAMILIARICE CON LA ESTRUCTURA DE ESTE TIPO DE SCRIPT
CONCENTREN SU COMPRENSION EN EL SCRIPT UBICADO DENTRO DE LOS TAGS BODY; EN LA PARTE FINAL QUE EMPIEZA CON $(document).on('click', '.chart-update', function() {
Cambiar tipo Chart
OTRO EJERCICIO QUE MUESTRA COMO ALTERNAR ENTRE GRAFICOS DIFERENTES, EN ESTE CASO CON EL USO DE BOTONES RADIALES
SE PRESENTA EL EJERCICIO CON EL FIN DE QUE EL LECTOR SE FAMILIARICE CON LA ESTRUCTURA DE ESTE TIPO DE SCRIPT
CONCENTREN SU COMPRENSION DEL SCRIPT, EN LA PARTE QUE EMPIEZA CON EL COMMENT: // Column chart
Project: Reports 1
Progreso Construction
este gráfico mostrará las horas-hombre mensual acumuladas en relacion a las horas-hombre mensual programadas; para el paquete total de disciplinas de trabajo (movimiento de tierras, concreto estructural, equipos, tuberias, instalaciones electricas, etc)
que se han consumido para la ejecucion de la obra durante el mes analizado; en orden, de proyectar cumplir con el cronograma de construcción
este ejercicio toma la data desde un archivo json; veran la ruta especificada en el script en $.getJSON('json/data_day3.json', function(json) {
Progreso Disciplinas
este ejercicio reporta las horas-hombre semanal acumuladas en relacion a las horas-hombre semanal programadas; en este caso, para la disciplina de trabajo: concreto estructural.
el ejercicio esta disenado para alterna entre gráficos denominados: overall, rebar, formwork, pouring.
luego este ejercicio, al igual que el anterior, tomara la data desde un archivo json; por lo tanto, habra un archivo json para cada gráfico programado, mencionados lineas arriba.
Reporte Semanal
este gráfico reporta las horas-hombre semanal acumuladas en relacion a las horas-hombre semanal programadas; para el paquete total de disciplinas de trabajo (movimiento de tierras, concreto estructural, equipos, tuberias, instalaciones electricas, etc)
que se han consumido para la ejecucion de la obra durante el mes analizado; en orden, de proyectar cumplir con el cronograma de construcción
este ejercicio, a diferencia de los dos anteriores, muestra la data de las series en el mismo script
Status Disciplinas
Este es un gráfico diseñado para mostrar:
1) El progreso mensual de cada disciplina de construcción, realizado en términos de porcentaje ( % )
2) Incluir el desglose de cada disciplina en sus principales actividades de trabajo y, también mostrar su progreso en porcentajes.
Nota: para ver el desglose de las disciplinas, hacer click en cada columna de disciplinas
Luego, para volver a gráfico principal, hacer click en boton 'Back to items'
Earned Value Analisis
Earned Value Analisis es una técnica cuantitativa de gestión de proyectos para evaluar el desempeño del proyecto y predecir los resultados finales del proyecto, basada en la comparación del progreso y el presupuesto de los paquetes de trabajo con el trabajo planificado y los costos reales.
El Earned Value Analisis utiliza tres piezas clave de información del proyecto: el valor planificado, el valor real y el valor ganado.
El Earned Value Analisis es el método preferido para medir el progreso de mega proyectos en el sector del Oil & Gas.
a partir de este formato, se suele calcular la variación del costo y la variación del cronograma del proyecto; es decir, sirve para predecir sobrecostos y retrasos en la programación.
el ejercicio que se muestra, presenta datos reales obtenidos durante la ejecucion de un LNG project
Gastos - Curva-S
Un gráfico que incluye la relación entre el costo directo, el costo indirecto, el costo del mes actual y el costo mensual acumulado; donde:
los indicadores mostrarán: a) si el proyecto está adelantado o retrasado en el cronograma (SV); b) si el proyecto se encuentra en una condición de sobre o bajo presupuesto, es decir, ahorros o pérdidas (CV); c) la rentabilidad del trabajo realizado (IPC); d) la eficiencia del cronograma o su progreso (SPI)
los valores a su vez compararán lo programado (PV) vs lo que se ejecutó (EV) y el costo real (AC)
los indicadores y valores facilitarán apreciar el costo real del mes analizado; a través de un proceso interactivo donde se compara el desempeño real con el desempeño planeado, para realizar los ajustes necesarios; luego se repite el proceso, cada vez, en los meses siguientes.
Project: Reports 2
Tendencias - Costo Directo
Un gráfico diseñado para mostrar:
1) un seguimiento de los gastos necesarios para la construcción de la obra, tales como: a) recursos de materiales, mano de obra, equipo; b) servicios como: diseño, laboratorio, geotecnia, topografía, otros; c) materiales como hormigón, acero, encofrados, armaduras, otros;
2) monitorear la gestión de la obra (dirección de obra, recursos internos, subcontratos); producir una ponderación sobre la incidencia de los recursos (cemento, operario, peón, acero, terraplenes, etc.) en el presupuesto de obra.
3) producir una ponderación sobre la incidencia de los recursos (cemento, operario, peón, acero, terraplenes, etc.) en el presupuesto de obra.
Inventario Materiales
Trayendo a la industria de la construcción una técnica de Gestión de Inventario.
Después de obtener el presupuesto para las diferentes tareas de construcción, los materiales se tabulan siguiendo un orden descendente con respecto de sus costos parciales; segun sea el uso que se de a todos los diferentes materiales.
Entonces, se aplica el análisis ABC, que clasifica los materiales en diferentes categorías según sea la cantidad mayor estimada para cada material; en orden de priorizarlos.
Se traza un gráfico que muestra el porcentaje total de items vs el porcentaje total del costo.
Este gráfico se traza teniendo el % acumulado de items como eje x teniendo el % acumulado del costo total como eje y
Los ítems que van hasta el 20% son de clase A, hasta el 50% son ítems de clase B y hasta el 100% son ítems de clase C.
Chart a ser Definido
A SER DEFINIDO Y PUBLICADO EN ACUERDO CON
TERCERA PARTE INTERESADA EN CONTRATAR
LOS SERVICIOS DE ESTA PLATAFORMA
Chart a ser Definido
A SER DEFINIDO Y PUBLICADO EN ACUERDO CON
TERCERA PARTE INTERESADA EN CONTRATAR
LOS SERVICIOS DE ESTA PLATAFORMA
Chart a ser Definido
A SER DEFINIDO Y PUBLICADO EN ACUERDO CON
TERCERA PARTE INTERESADA EN CONTRATAR
LOS SERVICIOS DE ESTA PLATAFORMA
Chart a ser Definido
A SER DEFINIDO Y PUBLICADO EN ACUERDO CON
TERCERA PARTE INTERESADA EN CONTRATAR
LOS SERVICIOS DE ESTA PLATAFORMA
Atelier: Dashboards
Highcharts dashboard
A ser comentado durante las proximas semanas
por ahora, se presenta el ejercicio para que el lector se vaya familiarizando con la estructura html de este dashboard
no duden en empezar a hacer cambios para probarse a si mimos su comprension del documento html
Flat dashboard
A ser comentado durante las proximas semanas
por ahora, se presenta el ejercicio para que el lector se vaya familiarizando con la estructura html de este dashboard
no duden en empezar a hacer cambios para probarse a si mimos su comprension del documento html
Economy dashboard
A ser comentado durante las proximas semanas
por ahora, se presenta el ejercicio para que el lector se vaya familiarizando con la estructura html de este dashboard
no duden en empezar a hacer cambios para probarse a si mimos su comprension del documento html
Project Management
A ser comentado durante las proximas semanas
por ahora, se presenta el ejercicio para que el lector se vaya familiarizando con la estructura html de este dashboard
no duden en empezar a hacer cambios para probarse a si mimos su comprension del documento html
Project Milestones
A ser comentado durante las proximas semanas
por ahora, se presenta el ejercicio para que el lector se vaya familiarizando con la estructura html de este dashboard
no duden en empezar a hacer cambios para probarse a si mimos su comprension del documento html
Testing
A ser comentado durante las proximas semanas
por ahora, se presenta el ejercicio para que el lector se vaya familiarizando con la estructura html de este dashboard
no duden en empezar a hacer cambios para probarse a si mimos su comprension del documento html
Project: Dashboards
Practica 1
Practica a ser comentado durante proximas semanas
por ahora, se presenta la practica para que el lector:
primero, analice el diseno grafico de este dashboard (descargue la imagen)
segundo, convierta ese analisis en elementos html (headers sections divs columns otros); en un papel
Luego, vaya al editor y, empiece a desarrollar un borrador del documento HTML
luego, haga correcciones en dicho borrador y vea resultados
Practica 2
Practica a ser comentado durante proximas semanas
por ahora, se presenta la practica para que el lector:
primero, analice el diseno grafico de este dashboard (descargue la imagen)
segundo, convierta ese analisis en elementos html (headers sections divs columns otros); en un papel
Luego, vaya al editor y, empiece a desarrollar un borrador del documento HTML
luego, haga correcciones en dicho borrador y vea resultados
Practica 3
Practica a ser comentado durante proximas semanas
por ahora, se presenta la practica para que el lector:
primero, analice el diseno grafico de este dashboard (descargue la imagen)
segundo, convierta ese analisis en elementos html (headers sections divs columns otros); en un papel
Luego, vaya al editor y, empiece a desarrollar un borrador del documento HTML
luego, haga correcciones en dicho borrador y vea resultados
Practica 4
Practica a ser comentado durante proximas semanas
por ahora, se presenta la practica para que el lector:
primero, analice el diseno grafico de este dashboard (descargue la imagen)
segundo, convierta ese analisis en elementos html (headers sections divs columns otros); en un papel
Luego, vaya al editor y, empiece a desarrollar un borrador del documento HTML
luego, haga correcciones en dicho borrador y vea resultados
Practica 5
Practica a ser comentado durante proximas semanas
por ahora, se presenta la practica para que el lector:
primero, analice el diseno grafico de este dashboard (descargue la imagen)
segundo, convierta ese analisis en elementos html (headers sections divs columns otros); en un papel
Luego, vaya al editor y, empiece a desarrollar un borrador del documento HTML
luego, haga correcciones en dicho borrador y vea resultados
Practica 6
Practica a ser comentado durante proximas semanas
por ahora, se presenta la practica para que el lector:
primero, analice el diseno grafico de este dashboard (descargue la imagen)
segundo, convierta ese analisis en elementos html (headers sections divs columns otros); en un papel
Luego, vaya al editor y, empiece a desarrollar un borrador del documento HTML
luego, haga correcciones en dicho borrador y vea resultados
