Contenido

jQuery Sparklines, gráficas sencillas con jQuery

17 jul

+ 0

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

jquery-sparklines

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]

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.