jQuery es capaz de casi todo y en esta ocasión le ha tocado el turno a las gráficas. En el siguiente enlace podreis ver una recopilación de las principales librerías jQuery que sirven para este cometido.
Ver enlace-> http://www.jorgebravo.es/2010/01/analisis-5-plugins-para-generar-graficos-usando-jquery/
En el recurso anterior podemos observar las diferentes librerías y para que sirven cada una. Con ellas podemos hacer desde gráficas de barras, lineales o sectores sencillas hasta lo que nuestra imaginación y necesidades requieran. Una de las principales ventajas de hacerlo mediante jQuery es que el resultado visual de las gráficas es mucho mas moderno, atractivo y bonito que hacerlo con librerías java o php.
Tras analizar las especificaciones de las diferentes librería, sus formas de uso y lo que hacen, finalmente me quedo con HighCharts ya que es, con diferencia, la más limpia de usar y su consumo de memoria es muy similar al de las otras librerías. Además añade un extra en sus presentaciones y es que con ella se peude animar la presentación haciendo mucho más vistosa y atractiva.
Muchos os preguntaréis si el tema de las gráficas no deberíamos hacerlo del lado del servidor con alguna librería de java o php, o con flash/flex. La respuesta depende de las necesidades de cada proyecto y de cada uno. Todas las soluciones son validas y a la vez tiene sus problemas. El flash es una tecnología en vías de desaparecer y su mantenimiento es tedioso y complicado. Las librerías de java o php liberan memoria en el cliente pero en un servidor muy congestionado puede que esta solución no nos convenga. Las librerías jQuery liberan carga del servidor pero cargan el cliente y esto puede relentizarlo aunque estas librería consumen muy pocos recursos.
Como veis, todo depende de las necesidades de cada uno y de las características de cada proyecto, y recae en nosotros la responsabilidad de elegir la opción mas correcta en cada caso.
HighCharts
Una de las librería más completas que existen ahora mismo en el mercado es http://www.highcharts.com/ . Las gráficas generadas son increibles, estan animadas y son faciles de implementar. Además, están escrita en javascript puro por lo que no necesitaréis utilizar ninguna librería adicional.
Sin embargo, esta librería funciona bajo licencia por lo que si desarrollamos para proyectos comerciales y queremos ponerlos en producción deberemos comprar la licencia. Dependiendo del caso el precio varia significativamente desde los $80 hasta los $2000. Podéis ver el listado en: http://shop.highsoft.com/highcharts.html
Sin embargo, a pesar de la licencia, las posibilidades y la variedad de graficos que ofrece es enorme y si un proyecto utiliza muchas gráficas merece la pena.
Gráfico circular
Las gráfica circulares en forma de donut son de las más dificiles de reproducir y difícles de encontrar. Hemos encontrado la forma de crearlas a partir de un plugin distinto. podéis ver un ejemplo de como sería el gráfico en la imagen siguiente:
Como podéis observar, se trata de un grafico que se carga con más o menos barritas en funcion del valor y, además, cambia el color según el número de barritas que cargue.
Sin embargo, el gráfico no se ajusta al 100% a lo que queremos ya que permite modificar el valor girando la rueda central. Es necesario modificar el plugin eliminando el trozo de código que añade la rueda. Para ello editáis el fichero knobKnob.jquery.js y borrais el contenido de la variable "tpl". Con eso ya no generaría la rueda.
Los valores del gráfico vienen dados por la option "value" que podéis encontrar en el fichero script.js . El value viene dado en grados.
Si le ponemos 270 al value el resultado final sería:
