Como crear un Gráfico de Pastel con jQuery

Los gráficos son una forma muy visual de representar datos, suelen ser mucho más efectivos y comprensibles que simplemente representarlos en tablas, por ello hoy os voy a hablar de una de las muchas librerías que existen para generar gráficos de forma dinámica.

Grafico circular realizado con la librería Flot.

Se trata de Flot, una librería basada en el framework jQuery que utiliza el lenguaje de cliente JavaScript.

Su utilización es muy sencilla, simplemente hay que importar las librerías jQueri y Flot (además de Flot.Pie para generar gráficos circulares), crear un elemento en el que poder incluir el gráfico y un script para generarlo con los datos que deseemos.

He creado este sencillo ejemplo interactivo para que podáis ver con más detenimiento algunas posibilidades de esta librería. En el ejemplo podéis cambiar los datos para que muestre los cambios en el gráfico.

A Continuación os dejo el código para que podáis verlo claramente:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Gráfico de Pastel</title>
	
	<!-- Incluimos los CDN de las librerías jQueri, Flot y Flot.Pie -->
	<script language="javascript" type="text/javascript" 
		src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script language="javascript" type="text/javascript" 
		src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
	<script language="javascript" type="text/javascript" 
		src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.pie.min.js"></script>
	<!-- Incluimos el script que generará la gráfica -->
	<script type="text/javascript">

/* Creamos las variables que deben estar disponibles en
   todas las funciones del script */
var options = {};
var dataset = [];
/* En dato guardaremos las cantidades de cada gajo */
var dato = [];
dato[0]=1;
dato[1]=1;
dato[2]=1;
dato[3]=1;
dato[4]=1;
dato[5]=1;
/* En label guardaremos los nombres de cada gajo */
var label = [];
label[0]="Uno";
label[1]="Dos";
label[2]="Tres";
label[3]="Cuatro";
label[4]="Cinco";
label[5]="Seis";
label[5]="Seis";
label[6]="Siete";
label[7]="Ocho";
label[8]="Nueve";
label[9]="Diez";
/* En color guardaremos los colores de cada gajo */
var color = [];
color[0] = "#005CDE";
color[1] = "#00A36A";
color[2] = "#7D0096";
color[3] = "#DE000F";
color[4] = "#ED7B00";
color[5] = "#EDC500";
color[6] = "#6900D7";
color[7] = "#00B299";
color[8] = "#F000ED";
color[9] = "#00B7DE";
  /* Declaramos la función que creara los objetos 
   necesarios para llamar a la función $.plot de Flot */
    function setVariables () {
	/* dataset es el objeto que necesita 
	   como segundo parámetro la funcion $.plot */
	/* en el incluiremos los datos de la gráfica */
	for (var k in dato){
		dataset[k] = {
				label: label[k], 
				data: dato[k], 
				color: color[k]
				};
	}
    /* options es el objeto que necesita como 
       tercer parámetro la función $.plot */
    /* en el incluiremos las opciones de 
       visualización la gráfica */
    options = {
        series: {
        	pie: {
                show: true,               
                label: {
                    show:true,
                    radius: 0.8,
                    background: {
                        opacity: 0.8,
                        color: '#fff'
                    }
                }
            }
        }
    };
  }
  /* llamamos a la función setVariables para tener
  listas las variables antes de cargar la página */
  setVariables();

  $(document).ready(function () {
  /* Con $.plot creamos el gráfico tras cargar la página */
  $.plot($("#flot-placeholder"), dataset, options);
  /* tras cargar la página impedimos que se muestren 
     los elementos del formulario que no están
     declarados en el array dato */
  for (var i=6; i<11; i++){
	$("#id"+(i)).css('display', 'none');
  }
  /* Cuando cambia el número de datos volvemos a 
   generar el gráfico */
  $("#num").change(function() {
	  /* vaciamos los objetos necesarios para $.plot */
	  dataset.length=0;
	  options.length=0;
	  /* recogemos el valor actual */
	  var numelementos = parseInt($(this).val());
	  /* eliminamos o creamos los datos y elementos 
	  del formulario según la cantidad
	  sea menor o mayor que la actual */
	  if (dato.length > numelementos) {
		  for (var i=numelementos; i<dato.length; i++) {
			delete dato[i];
     		  	$("#id"+i).css('display', 'none');
		  }
		  dato.length=numelementos;
	  } else {
      		  for (var i=dato.length; i<numelementos; i++) {
      			dato[i]=1;
     		  	$("#id"+i).css('display', 'inline');
		  }
	  }
	  /* volvemos a crear las variables para $.plot */
	  setVariables();
	  /* Con $.plot creamos el gráfico */
	  $.plot($("#flot-placeholder"), dataset, options);
  });
  /* Cuando cambia el valor de algún dato 
     volvemos a generar el gráfico */
  $("#form .datos select").change(function() {
	  /* vaciamos los objetos necesarios para $.plot */
	  dataset.length=0;
	  options.length=0;
	  /* reconocemos el elemento por su id */
	  var elemento = $(this).attr("id");
	  var numelemento = elemento.substring(elemento.length-1);
	  /* guardamos su valor actual */
	  dato[numelemento]=parseInt($(this).val());
	  /* volvemos a crear las variables para $.plot */
	  setVariables();
	  /* Con $.plot creamos el gráfico */
	  $.plot($("#flot-placeholder"), dataset, options);
  });
});

    </script>
</head>
<body>
    <!-- En este elemento es donde generaremos
    el gráfico con $.plot
    (es importante que tenga un tamaño definido) -->
    <div id="flot-placeholder" 
         style="width:350px; height:300px;"></div>
    <!-- generamos el formulario para que el usuario
    pueda cambiar los datos -->
	<form id="form">
		<fieldset>
			<label for="num">Número de datos</label>
			<select id="num" name="num">
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option selected="selected">6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
				<option>10</option>
			</select>
		</fieldset>
		<fieldset class="datos">
		<legend>Datos</legend>
			<select id="id0" >
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
				<option>10</option>
			</select>
			<select id="id1" >
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
				<option>10</option>
			</select>

[…]

			<select id="id9" >
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
				<option>10</option>
			</select>
		</fieldset>
	</form>
</body>
</html>

Si queréis conocer mas sobre la librería Flot podéis investigar en su web:
http://www.flotcharts.org/