Información del Editor de gráficas lineales
Editor y visor de gráficas lineales
Ejemplo:
font-size: 1em 
En este tema comentaré algunos detalles sobre la aplicación para generar gráficas lineales en general, aunque estamos hablando de las propias gráficas de líneas, de barras o circulares. Se basa en dos componentes, el editor y el visor de la gráfica. Estos se implementan en los módulos grafica-lineal-editor.js y grafica-lineal.js.
Sobre este párrafo hay tres representaciones de una misma gráfica de muestra. La primera es una imagen PNG de unos 7KB obtenida del editor con una captura de pantalla. La segunda se ejecuta en esta página con el visor de gráficas, manejando los datos desde un objeto literal de JavaScript que se encuentra en un elemento <script> de esta página. Esos datos se exportaron desde el editor en formato de texto con una notación de objeto literal de JavaScript para incluirlos en el script. Puede ver una copia de esos datos en este archivo muestra-objeto-literal.txt con un tamaño menor de 2KB (sería aún menor si quitamos las tabulaciones).
La tercera gráfica se exportó en formato HTML también desde el editor. Ese HTML lo podemos guardar en un archivo de texto como muestra-html.txt) que ocupa unos 25KB. Podemos descargarlo con AJAX como estamos haciendo aquí, aunque realmente conviene usar una versión comprimida quitando las tabulaciones (muestra-html-comprimido.txt) que ocupa unos 21KB. Todas las medidas se pasaron a em's. Con los botones podemos cambiar el font-size del contenedor con borde de rayas rojas y veremos como esta última gráfica adapta su tamaño al de la fuente.
La última gráfica ocupa más, pero también hay que tener en cuenta que no necesita el visor ni ningún otro componente JavaScript o CSS, pues ya contiene todo el estilo en línea. La segunda tiene todas las medidas en píxeles y necesita del visor grafica-lineal.js (que trabaja apoyado en general.js y conector.js), con la ventaja de mostrar rótulos de valores emergentes en cada punto. Las medidas relativas a la fuente de la tercera gráfica podrían ser una ventaja, pero cualquier navegador tiene la capacidad de hacer zoom sobre medidas en píxeles con el mismo resultado.
El editor permite también exportar en JSON con la finalidad de salvar una copia de los datos de la gráfica. La del ejemplo anterior puede verla en el archivo muestra-json.txt. En cualquier momento podemos copiar ese texto y pegarlo en un <textarea> del editor con objeto de importar esos datos. La importación se realiza usando el módulo json2.js de Douglas Crockford que puede encontrar en github.
Otra posibilidad del editor es exportar los valores tabulados en texto plano o bien en una tabla HTML como la siguiente:
| |Fecha|KBx10 o Peticiones | Tamaño | Peticiones |
| 25 Nov 11 | 20,84 | 22 |
| 2 Feb 12 | 25,21 | 30 |
| 4 May 12 | 32,39 | 39 |
| 13 May 12 | 35,04 | 41 |
| 24 May 12 | 36,33 | 44 |
| 8 Jul 12 | 25,51 | 44 |
| 16 Sep 12 | 22,81 | 42 |
| 7 Oct 12 | 23,72 | 29 |
A su vez podemos copiar los valores de esta tabla, o incluso un rango de celdas de una hoja de cálculo, e importarlos en el editor para representarlo en la gráfica. Esta tabla de datos tiene una primera columna con los títulos de la gráfica, eje X y eje Y separados por una barra vertical. En este ejemplo el título de la gráfica es una cadena vacía. En la primera columna de las siguientes filas están los títulos de las categorías. Las siguientes columnas son las series, con los títulos en la primera fila y valores en el resto. Esta disposición es similar a la que se usa en Excel para crear una gráfica a partir de un rango de celdas de una hoja de cálculo.
Esquema de datos en objeto JavaScript
Los datos para la segunda gráfica anterior se toman desde el objeto Wextensible.datosGraficas, en su entrada muestra. Esta referencia es la misma que la del identificador del elemento <div> donde se construye la gráfica. Los datos se presentan a continuación:
Wextensible.datosGraficas = {
muestra: {
xy: {
tipoGrafica: "lineas",
udsTramoDiv: 5,
minUdsTramoDiv: 15,
textoVertical: true,
noWrap: true,
categoriasEntreTramos: true,
columnasSeries: 2,
tamanyoFuenteTituloGrafica: 12,
tamanyoFuenteTituloEje: 12,
colorFondoAreaTrazado: "lightyellow",
rotulosValores: "no",
categorias: ["25 Nov 11", "2 Feb 12",..."],
series: [
{
titulo: "Tamaño",
gruesoLinea: 2,
formaPunto: "circulo",
valores: [20.84, 25.21, ...]
},
{
titulo: "Peticiones",
colorLinea: "red",
gruesoLinea: 2,
formaPunto: "circulo",
valores: [22, 30, 39, ...]
}
]
},
x: {
titulo: "Fecha",
longitud: 200,
colorNumero: "black"
},
y: {
titulo: "KBx10 o Peticiones",
longitud: 240,
topLeft: true,
invertir: true,
decimales: 2,
colorNumero: "black"
},
css: {
grafica: "border: blue solid 1px;",
tituloGrafica: "padding-bottom: 8px;",
rotuloValorEmergente: "color: white;"
}
}
}Tiene cuatro grupos de datos:
xycontiene las propiedades generales de la gráficaxcontiene las propiedades del eje Xycontiene las propiedades del eje Ycsscontiene declaraciones de estilo CSS que se aplicarán de forma adicional a ciertos elementos de la gráfica.
En el objeto de datos anterior realmente no están todas las propiedades posibles. Estas se aplican inicialmente al crear la gráfica y luego se sobrescriben con los datos del objeto que se pase. Por lo tanto no es necesario pasar valores si son los predeterminados, que son los siguientes:
valoresIni: {
//Estos valores son para wxGL.xy (área trazado y valores, es decir, propiedades
//generales de la gráfica)
general: {
titulo: "",
tipoGrafica: "barras",
udsTramoDiv: 100,
minUdsTramoDiv: 0,
textoVertical: false,
noWrap: false,
categoriasEntreTramos: false,
intercambiarEjes: false,
columnasSeries: 1,
margenBarras: 2,
colorTitulos: "black",
familiaFuenteTitulos: "Arial, sans-serif",
tamanyoFuenteTituloGrafica: "16",
tamanyoFuenteTituloEje: "16",
colorFondoGrafica: "transparent",
colorFondoAreaTrazado: "transparent",
colorBordeAreaTrazado: "black",
gruesoBordeAreaTrazado: 1,
estiloBordeAreaTrazado: "none",
rotulosValores: "val",
rotulosValoresEmergentes: "cat-val-por",
leyendasSeries: true,
colorFondoLeyendasSeries: "transparent",
categorias: [],
usarColoresDefault: true,
coloresCategorias: [],
series: [
{
titulo: "",
colorLinea: "blue",
gruesoLinea: 1,
estiloLinea: "solid",
formaPunto: "cuadrado",
tamanyoPunto: 4,
rotulosSeries: "none",
valores: []
}
]
},
//Estos valores sirven para los dos ejes wxGL.x, wxGL.y
eje: {
titulo: "",
longitud: 400,
numTramosSubDiv: 1,
lineasDiv: true,
lineasSubDiv: false,
topLeft: false,
interior: false,
invertir: false,
decimales: 0,
miles: false,
colorLinea: "gray",
colorNumero: "gray",
familiaFuenteNumero: "Arial, sans-serif",
longDiv: 12,
longSubDiv: 5
},
//Estilo CSS adicional en algunos elementos que pueden agregarse
//aparte de los anteriores. Estos sobrescriben los anteriores, pero
//es útil para dar otros estilos que los anteriores no recogen.
css: {
grafica: "border: gray solid 1px;",
tituloGrafica: "",
tituloTop: "",
tituloBottom: "",
areaTrazado: "",
leyendasSeries: "",
rotulosSeries: "",
rotuloValor: "",
rotuloValorEmergente: "",
valorCategoriaX: "",
valorCategoriaY: ""
}
}Estos valores iniciales se declaran en el módulo grafica-lineal.js. La parte de datos general se aplica a xy, mientras que la parte expuesta en eje se aplica indistintamente a los ejes x e y. La denominación de la última parte css es la misma en ambos casos.
En principio no es necesario conocer las descripciones de las propiedades si vamos a generar una gráfica con el editor. De todas formas en el desplegable siguiente se presenta una lista informativa sobre todas las propiedades.
Descripciones de propiedades
Esta lista es una copia de este momento por lo que podría no estar actualizada con posibles correcciones de errores o mejoras. En el editor también tiene esta utilidad pero ahí si que se obtiene una lista actualizada.
Tipos de gráficas
En el editor podemos crear los tipos de gráficas de barras, de líneas y circular:
Ejemplo:
El tipo de líneas crea los puntos usando el módulo conector.js que sirve para dibujar líneas oblicuas con terminaciones. Las usé en el editor de diagramas para manejar conectores. Las terminaciones de cada segmento pueden ser círculos, cuadrados, flechas o ninguno. Las líneas oblicuas se dibujan aplicando el estilo de transformaciones de rotación (transform: rotate()).
Crear gráficas con datos en un string
Además de crear una gráfica tomando los datos desde una estructura de objeto JavaScript, también podemos crear de forma rápida una gráfica partiendo de un string, como este ejemplo:
Ejemplo:
La gráfica anterior sólo necesita una tabla de datos. En este caso hemos pasado los datos en el objeto Wextensible.datosGraficas que se encuentra en un script en este documento, portando también los datos de las gráficas anteriores. Los datos que construyen este ejemplo son los de la entrada muestraString:
Wextensible.datosGraficas = {
grafica1: {...},
grafica2: {...},
...
muestraString: "Grafica|Meses|Uds\tSerie 1\tSerie 2\tSerie 3\n" +
"Enero\t39990\t50000\t25000\n" +
"Febrero\t8800\t65400\t33555\n" +
"Marzo\t10500\t78000\t22100"
}Es una tabla como la vista más arriba, pero estructurada en una cadena JavaScript. Las filas se separan con el salto de línea \n y las columnas con la tabulación \t. La referencia muestraString coincide con el identificador del elemento <div> donde construiremos la gráfica.
Dado que no se le pasan datos de configuración, los valores iniciales crearán un tipo de grafica de barras así como el resto de configuraciones predeterminadas, incluso el ancho y alto. Si queremos modificar algo más podemos usar la función cargarGraficaString() como en este ejemplo:
Ejemplo:
Ahora usamos esa función del módulo grafica-lineal.js para crear una gráfica con un string pero actualizando el tipo de gráfica y sus dimensiones. El siguiente código está en el window.onload de esta página:
wxGL.cargarGraficaString("funcString",
"Grafica|Meses|Uds\tSerie 1\tSerie 2\tSerie 3\n" +
"Enero\t40\t50\t25\n" +
"Febrero\t90\t65\t33\n" +
"Marzo\t100\t78\t22",
document.getElementById("tipo-grafica").value,
document.getElementById("ancho-grafica").value,
document.getElementById("alto-grafica").value
); Muestras de uso y código fuente
En este apartado se exponen ejemplos con objeto de mostrar el uso del visor de gráficas lineales y comentar los recursos necesarios para ponerlo en ejecución.
- Muestra uso con recursos originales
Sin necesidad de usar estilo CSS externo, en esa página se usan los tres recursos de JavaScript originales de este sitio, comprimidos (o minimizados). Su código fuente original lo puede encontrar aquí:
Son los JS originales estructurados en el espacio de nombres Wextensible y con una envoltura para el cargador de módulos. Puede ver más sobre estos temas en espacios de nombres y cargador de módulos.
- Muestra uso con recursos integrados
En este ejemplo usamos grafica-lineal-visor.js que es la agrupación en un mismo archivo de los tres recursos anteriores general.js, conector.js y grafica-lineal.js. He modificado el espacio de nombres a Visor. Además he reducido el recurso general.js sólo con las funciones que se necesitan.
- Código minimizado: grafica-lineal-visor-min.js (60KB)
- Código original: grafica-lineal-visor.js (114KB)
Estos códigos son copias de este momento de los recursos originales, por lo que no recoge correcciones y mejoras posteriores.