Mejoras sparkline

[frans]

Pintar el mismo número de meses para todas las sparkline (desde [sep09]

Display info sobre cada punto cuando ratón pasa por encima (buscar una pago que lo permito)

Clic = ampliar en layer

[sergio]

Carlos, a ver si puedes echarle un vistacillo a la maquetación ... thx

[carlos]

He ajustado el ancho y la altura para que tenga el mismo tamaño que tenía el antiguo sparkline. No obstante, hay algunas cosas que discutir. En primer lugar, el estilo por defecto del plugin no encaja al 100% con el diseño del sitio, habría que ajustarlo. En segundo lugar, al usar tamaños tan pequeños para pintar la gráfica (100x15), no se aprecia que ésta varíe demasiado (aparece casi plana), pues la escala se reduce bastante. Seguramente habría que aumentar un poco su altura.

Juan, ¿qué te parece si aumentamos el alto a 35px? Te adjunto una captura de cómo quedaría la gráfica. Habría que reubicar el texto resumen del número de votos, o quizás la entrada completa.

[juan]

No estoy seguro de cómo quedará si aumentamos a 35px. Me preocupa, la verdad. Quizás estaría bien tener un pantallazo de toda la página para hacernos una idea mejor. Otra cosa: el diseño de la spark no se puede cambiar?!?! Qué putada si no es así, puesto que la práctica mayoría de estos plugins son editables, al menos un poco... No tenemos otra alternativa de plugin? Le pasé este a Sergio, pero si indagamos un poco más no sé.

[carlos]

Juan, tío, a veces parece que no te lees bien mis comentarios, ¿eh? ;-)

Aquí tienes una captura de la página completa tal y como me pides (aunque el nuevo sparkline sólo se está aplicando a la hilera top5 políticos, que es lo que me ha dejado listo Sergio).

En cuanto a tus preguntas:

- "El diseño de la spark no se puede cambiar?!?!": ¿Alguien ha dicho que no? :-) Sí, estoy seguro de que el diseño se podrá cambiar al menos mínimamente. Si te relees mi comentario anterior, en él decía: "En primer lugar, el estilo por defecto del plugin no encaja al 100% con el diseño del sitio, habría que ajustarlo". Tengo pendiente de ver si los ajustes de aspecto se pueden realizar por CSS o por Javascript (es la primera vez que me encuentro con este plugin).

- "No estoy seguro de cómo quedará si aumentamos a 35px": En la primera captura puedes ver también cómo quedará la gráfica si aumentamos a 35px. Por supuesto, como decía en mi anterior comentario, habrá que reubicar el resumen de votos para que no se vea descuadrado, y tal vez pegarlo todo más al nombre del político, pero antes de hacer todo eso he adjuntado esta pequeña prueba para que veas que, si no subimos a unos 35px y lo dejamos en 15px como el anterior, con este plugin no quedan nada claras las subidas y bajadas de la gráfica (como verás en la primera captura, en la versión de 15px de alto, la gráfica aparece "casi" plana). La cosa está en que, si subimos a 35px de alto, hay que reubicar los elementos, porque como podrás ver en las capturas, tal como está aparecerían descuadrados. Es una cuestión de escala: Al usar este plugin una gráfica más "densa", la escala para un número de píxeles tan pequeño abarca tanto en tan poco espacio que casi no se aprecian las diferencias.

En resumen: Si usamos este plugin (que no tiene por qué ser el que finalmente usemos), tenemos que retocar el aspecto, pero probablemente habrá que subir de 15px (sparkline antigua) a unos 35px aprox. el alto de la gráfica, reubicar el recuento de votos para que no parezca descuadrado, y quizás pegarlo todo un poco más al nombre del político. Tú me dices qué ves mejor.

[carlos]

¿Qué objetivo se persigue exactamente con el cambio de gráfica? Sergio no me lo comentó el viernes cuando me pasó el ticket, sólo me comentó que si podía echarle un vistazo a la maquetación.

Por las características de éste otro plugin, supongo que una de ellas es hacer que los puntos de la gráfica muestren unos tips al dejar el ratón encima.

¿Hay algún detalle más? Por si doy con algún otro plugin que encaje bien con los propósitos perseguidos.

[carlos]

Otra cosa: Este plugin nuevo jquery.flot.js no parece orientado tanto a pintar gráficas "en línea" (pequeñitas, del tamaño de palabras, que puedan ir incluso en mitad de un párrafo; "sparklines", vaya), sino más bien a pintar grandes gráficas con todo detalle (de ahí el grosor de las líneas, las sombras, los puntos destacados que ocupan >5píxeles, etc). Quizás no va a ser el más apropiado para nuestros propósitos. Si me comentas qué perseguimos al sustituir la sparkline, tal vez encuentre otro más adecuado.

[carlos]

En las Google Chart Tools, se pueden especificar tooltips (aunque quizás son algo feas):

 http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/linechart.html

Lo mismo se puede cambiar el texto anotado y usarlo como tooltip (esto es: que el número de votos del punto de la gráfica al que se esté apuntando aparezca en el mismo sitio en el que aparece el resumen de votos, reemplazando a éste). Si el puntero está fuera de la gráfica, pues se mostraría el resumen habitual. Hay un ejemplo de éste comportamiento con Google Chart Tools aquí:

 http://code.google.com/intl/es-ES/apis/visualization/documentation/gallery/annotatedtimeline.html

[juan]

Claro que te leo hombre! Si no no te respondería!!! Pero a veces es dificil hacerse una idea concreta por aquí, la verdad.

- Lo que enviaste en la primera captura no me convencía y con la segunda pues lo confirmo: prefiero no cambiar nada y utilizar un plugin que no implique recolocar elementos que ya tenemos funcionando. Creo que cambiando aquí tocaría hacer cambios en otro sitio y esto no me parece que sea la mejor solución. Como mucho pegaría todo un poco más al nombre del político, pero seguro que no es suficiente, no?

Si el diseño se puede cambiar, entonces está claro: imitamos el que tenemos ahora cuando encontremos el plugin adecuado.

La idea del nuevo plugin es que los puntos puedan transmitir información (lo que tu dices: sacar tooltips). Las de Google no parecen muy malas. No son muy visuales, pero a lo mejor se puede retocar algo, no? Desde luego mejoraría lo que tenemos ahora :)

Dime si no te queda algo claro...

[carlos]

Estoy de acuerdo en que probablemente no es suficiente pegarlo más al nombre del político.

Ahora que me has confirmado el objetivo de cambiar la sparkline: Con las de Google es bastante posible que nos pueda quedar algo similar a lo que tenemos, pero con tooltips (aunque no sea muy visual). A ver si hago alguna prueba y te cuento.

[carlos]

Parece ser que Google Chart Tools tampoco nos vale. La versión de sparklines (gráfico de líneas pequeño, sin ejes de coordenadas) no tiene la posibilidad de pintar tooltips. Y la versión de gráfico de líneas grande (que sí tiene esta posibilidad) muestra forzosamente los ejes de coordenadas, y los tooltips no se muestran bien para un tamaño tan pequeño. Adjunto los archivos de prueba que he creado.

Sigo buscando.

[juan]

Vaya... :\

[carlos]

He encontrado una librería de dibujado de gráficos de Ruby (gruff) que ha sido portada a Javascript. La primera pequeña prueba ha resultado ser bastante buena, juzgad vosotros mismos (adjunto fichero de prueba). Juan, dime qué te parece.

[carlos]

Juan, ¿has podido echarle un ojo al último fichero de prueba? ¿Qué te parece?

[juan]

Cierto, perdona. Vamos acercándonos a lo que necesitamos, este sería perfecto si pudiéramos pintar puntos sobre la línea, para que el rollover no esté tan oculto. Pero va por buen camino :)

[frans]

IMHO no deberíamos dedicar más tiempo a buscar la sparkline ideal (nuestro tiempo y nuestro presupuesto no es ilimitado). Cojamos la que más nos vale y probemos a ver qué tal ¿vale?

[carlos]

Frans, ok. Voy a ver si se pueden pintar puntos sobre la línea en la última sparkline como comenta Juan, y hacer que el grueso de la línea sea menor. Si no se pudieran pintar los puntos, tiramos con ésta última de todas formas sobre la anterior, ¿no?

[frans]

os dejo elegir, lo habéis mirado mejor que yo ;) ¡Txs por la investigación!

[juan]

Por mi ok, pero a ver si podemos añadir esos puntos. Sin ellos me parece que pierde mucho valor :\

[carlos]

Vale, ya lo he conseguido. Esta sparkline sería más o menos definitiva: Líneas de poco grosor, puntos bien marcados, y tooltips sobre los puntos. He intentado que los puntos se pinten de otro color, pero parece ser que no es posible (habría que probar a modificar el código Javascript, y no creo que merezca la pena). Queda bastante resultona. ¿Qué opináis? Adjunto fichero de prueba.

[frans]

me parece que ha quedado muy bien :)

+ sugerencias:

• "<b>2</b> votos positivos (abr/10)" en lugar de "Votos <b>2</b>"
• no incluir la raya gorda azul en el tooltips (¿para qué sirve?)
• sparkline se abre cuando se hace clic encima y se visualiza en + grande con ejes y escala (votos en Y y meses en X)

[juan]

A mi también me parce que ha quedado bastante resultona :) Utilizaría los mismos estilos que tenemos en web a nivel de color de fuente y tamaño (la que tenemos en contenido de 12px es sufient)

Bien!

[carlos]

Ok, voy a ver qué se puede personalizar de todas estas sugerencias (el plugin éste no va mucho más allá). Supongo que la idea es que, si alguna de las sugerencias es difícil de llevar a cabo porque implique muchos cambios en el Javascript, pasamos de ella, ¿no?

Por cierto, frans, la raya gorda azul en el tooltips es una leyenda, para indicar qué representa cada color cuando hay varias líneas. La pinta el plugin por defecto, no sé si se puede deshabilitar fácilmente. Voy a investigar.

[frans]

Replying to carlos:

Ok, voy a ver qué se puede personalizar de todas estas sugerencias (el plugin éste no va mucho más allá). Supongo que la idea es que, si alguna de las sugerencias es difícil de llevar a cabo porque implique muchos cambios en el Javascript, pasamos de ella, ¿no? Por cierto, frans, la raya gorda azul en el tooltips es una leyenda, para indicar qué representa cada color cuando hay varias líneas. La pinta el plugin por defecto, no sé si se puede deshabilitar fácilmente. Voy a investigar.

sobre la raya azul: si viene por defecto la podemos dejar (mejor no alejarnos mucho del estándar, salvo si hay una razón fuerte para hacerlo: en este caso no hay razón fuerte para quitar la raya azul ;). En cuanto al resto de acuerdo contigo: si algo es complejo de modificar lo dejamos para más adelante. Txs

[carlos]

He podido quitar la línea azul de la leyenda fácilmente, y también he personalizado un poco más la tooltip. A ver qué os parece. Estará en  http://dummy.voota.es/proto/sparkline.html tan pronto como Sergio lo suba a dummy.

Sergio, please, empuja la master a dummy cuando puedas.

[sergio]

Empujado

[juan]

Me encanta cómo está quedando!!!! Buen trabajo Carlos!!

[frans]

2 dudas pendientes:

• la altura me parece menor que la sparkline actual, ¿no mantenemos la misma?
• el mes pone "abr/10" para todos los puntos, ¿hay forma que ponga el mes correcto para cada punto?

[carlos]

¡Muchas gracias, Juan!

Frans:

• La altura es de 15px, exactamente la misma que teníamos antes. Puede que parezca menor porque la escala sea diferente.

• Es verdad, los puntos no tienen por qué representar todos el mismo mes. Me temo entonces que no hay una forma sencilla, tendríamos que modificar el plugin para que aceptase más parámetros para las etiquetas de los puntos. Propongo salir sin los meses y ya más adelante dedicar algo de tiempo a incluir esta info.

[frans]

Replying to carlos:

¡Muchas gracias, Juan! Frans: - La altura es de 15px, exactamente la misma que teníamos antes. Puede que parezca menor porque la escala sea diferente.

¿ahora no está en 16?

- Es verdad, los puntos no tienen por qué representar todos el mismo mes. Me temo entonces que no hay una forma sencilla, tendríamos que modificar el plugin para que aceptase más parámetros para las etiquetas de los puntos. Propongo salir sin los meses y ya más adelante dedicar algo de tiempo a incluir esta info.

ok, de momento no incluimos el mes

[carlos]

Replying to frans:

¿ahora no está en 16?

No, están en 100x15, igual que antes.

[frans]

propongo:

• aumentar altura (la sparkline no ocupa los 15 pixeles de altura, queda más plana que la actual, menos legible)
• ¿se puede quitar el recuadro ligeramente sombreado alrededor de la sparkline?
• ¿se puede sombrear la zona por debajo de la línea como ahora? (mucho más legible)
• ¿podríamos reducir el tamaño de los puntos? (me parece que son demasiado gordos, sobrecargan la página)

* si mes con 1 o -1 voto positivo: ponerlo en singular "1 voto positivo" o "-1 voto positivo" en lugar de "1 votos positivos"

[juan]

a favor de esos cambios. eliminar el fondo gris es importante porque en el listado de políticos queda raro, raro (adjunto pantallazo)

[carlos]

Ok. En lo único que me queda duda es en este punto:

- ¿se puede sombrear la zona por debajo de la línea como ahora? (mucho más legible)

Primero se comenta quitar el recuadro sombreado (gris) de debajo, y luego que se coloque otra sombra. No sé a qué clase de sombra os referís.

En cualquier caso, el sombreado es simplemente un color de fondo de un elemento del marcado que genera el plugin. Sólo podemos sombrear ese area. Creo que lo más sencillo es que lo quitemos, simplemente, y dejemos que la gráfica se pinte sobre el fondo que sea.

[juan]

se refiere al relleno que va por debajo de la línea: como lo que tenemos ahora online.

[carlos]

Entiendo. No, eso no se puede hacer con este plugin, definitivamente.

[carlos]

Corrijo: El plugin posee una versión de gráficas por areas parecido a lo que pedís, pero entonces no parece admitir ni puntos, ni tooltips.

[juan]

pues puestos a pedir me quedo con puntos y tooltips... :-s

[carlos]

Con lo de poner "votos positivos" o "voto positivo" pasa lo mismo que con lo de los meses: El "label" para cada uno de los puntos de la gráfica es fijo, sólo puede variar la cantidad. Para hacer cosas más personalizadas, necesitamos modificar el plugin. Habrá que retrasarlo hasta cuando nos decidamos a hacer ambas cosas a la vez.

Lo demás, todo listo. He puesto la altura de las sparkline a 25px. Espero que sea suficiente.

[frans]

ahora no me salen bien los tooltips por encima de los puntos: necesitamos puntos pequeños como ahora pero tooltips que no te obligan en pasar el ratón sobre 1 pixel exacto

[frans]

mirado con Sergio en la ofi: los retoques dañan la sparkline, mejor volvemos a los parametros por defecto (100x15 en lugar de 100x25, puntos de 15 en lugar de 10) y lo validamos con Juan.

[juan]

creo que va a ser lo mejor, sí...