SummArg | Cursos y recursos para webmasters

24/05/2011

Mini gráficas fáciles de insertar en cualquier documento con jQuery

Peity es un plugin para jQuery que facilita la inserción de gráficos de barra, lineares y torta. Basta con linkear el recurso, indicar a que clase se aplicará e indicar de que tipo será, para poder generar el gráfico deseado. Permite la configuración del tipo de gráfico, tamaño y colores. Los valores se determinan dentro del documento.

Para utilizar este recurso primero debemos descargarlo y linkearlo entre etiquetas <head> de nuestro documento:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="jquery.peity.js"></script>

Luego lo inicializamos indicando la clase a la que habrá de aplicarse, el tipo de gráfica que generará y los colores de la misma.

<script>
$(".radius span").each(function() {
  var elem = $(this);
  var radius = elem.attr("class").match(/d+/) * 4;
  elem.peity("pie", {
    colours: ["#C6D9FD", "#4D89F9"],
    radius: radius
  });
});
</script>

Finalmente entre etiquetas <body> insertamos la gráfica:

<p class="radius">
  <span class="r10">1/10</span>
  <span class="r9">2/10</span>
  <span class="r8">3/10</span>
  <span class="r7">4/10</span>
  <span class="r6">5/10</span>
  <span class="r5">6/10</span>
  <span class="r4">7/10</span>
  <span class="r3">8/10</span>
  <span class="r2">9/10</span>
  <span class="r1">10/10</span>
</p>

Siendo el resultado:

Podemos generar otro tipo de gráficas de modo igualmente simple.

Descargar y Demo

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Peity es un plugin para jQuery que facilita la inserción de gráficos de barra, lineares y torta. Basta con linkear el recurso, indicar a que clase se aplicará e indicar de que tipo será, para poder generar el gráfico deseado……

Dejar un comentario