aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

jQuery Sparklines, nos permiten crear pequeñas gráficas basadas en líneas desarrolladas en javascript sobre jQuery.

Las opciones con las que podemos personalizar nuestras gráficas son realmente sorprendentes:

Opciones comunes:

• type – line (default), bar o tristate
• width – Ancho de la gráfica, por defecto “auto”.
• height – Altura de la gráfica, por defecto “auto”.
• lineColor – Color de la línea
  
• fillColor – Color del relleno
  

Opciones de gráficas tipo línea:

• spotColor – Oculta o muestra el color del valor final.
• spotRadius – En pixels (default: 2)

Opciones de gráficas tipo Bar:

• barColor – Color de los valores positivos
• negBarColor – Color de los valores negativos
• barWidth – Tamaño de cada barra, en pixels
• barSpacing -Separación entre barras, en pixels.
• zeroAxis – Centro del eje Y.

Opciones de gráficas tipo Tristate:

• posBarColor – Colores valores positivos
• negBarColor – Colores valores negativos
• zeroBarColor – Colores para valores cero.
• barSpacing – Separación entre barras, en pixels
• zeroAxis – Centro del eje Y

Paso de valores

El script está pensado para recibir los valores de 2 formas completamente diferentes.

Mediante HTML

Mediante HTML, indicaremos en la llamada que recoja los datos directamente desde el HTML contendor de la gráfica, de esta forma dejamos visible estos datos en caso de no tener capacidad de ejcutar Javascript.

//HTML
<span class="sparklines">1,2,3,4,5,4,3,2,1</span>
//Javascript
$('.sparklines').sparkline('html');

Mediante Array de datos

La otra opción sería la de pasarle los datos mediante un array directamente en la llamada.

//HTML
<span id="ticker"">Loading..</span>
//Javascript
$('#ticker').sparkline([1,2,3,4,5,4,3,2,1]);

Ejemplo de uso

//HTML
<span class="line">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
//Javascript
$('#linecustom').sparkline('html', {
				height: '1.5em', 
				width: '8em', 
				lineColor: '#f00', 
				fillColor: '#ffa', 
				spotColor: '#77f', 
				spotRadius: 3}
			);

[Descargar]