Antes que nada pedir disculpas por el goteo de post, pero llevo una racha de cuidado y no consigo sacar tiempo para nada. Y, tras las lamentaciones, una referencia breve a la librería jqplot, que funciona muy bien para realizar gráficas en java script.
Por temas de trabajo tuve que mirar varias y la más potente me pareció que es highcharts js, pero es de pago, así que a efectos prácticos no sirve para nada. En cambio jqplot js es muy ágil, muy versátil, está muy bien hecha y es de licencia libre. Más que recomendable.
La librería funciona perfectamente por sí misma, pero, además, se le pueden añadir plugins para cuestiones específicas, como animaciones o renderizaciones de texto en canvas, por que permite ajustar al máximo las funcionalidades, y por lo tanto el peso, según las necesidades.
El mecanismo para generar una gráfica es más sencillo que un botijo.
En el <header> se carga la librería, sus CSS y los plugins que necesite el tipo de gráfica que vamos a realizar.
<link rel="stylesheet" type="text/css" href="qplot/jquery.jqplot.css" />
<script type="text/javascript" src="qplot/jquery.jqplot.js"></script>
<!-- Plugins -->
<script type="text/javascript" src="qplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="qplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="qplot/plugins/jqplot.pointLabels.min.js"></script>
<!-- #Plugins -->
Como añadido, se puede incluir el excanvas.js para el Explorer, que es incapaz de interpretar canvas...
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
...pero vamos, yo casi soy partidario de pedirle a los internautas que lo padecen que se cambien de navegador.
<!--[if lt IE 9]>
<div class="chromeframe" id="avisoExplorer">
Estás empleando una versión antigua del Explorer, que no es capaz de interpretar el código de esta web. En general, es recomendable que uses cualquier otro navegador más moderno, como:
<ul>
<li><a href="https://www.google.com/intl/es/chrome/browser/?hl=es">Chrome</a>,</li>
<li><a href="http://www.mozilla.org/es-ES/firefox/new/">Firefox,</li>
<li><a href="http://www.opera.com/computer/windows">Opera</li>
<li><a href="http://support.apple.com/kb/dl1531">o Safari.</li>
</ul>
</div>
<![endif]-->
Luego ya solo hay que añadir el script con los datos de la gráfica, lo cual se hace enviando al objeto jqplot los datos en JSON.
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]], {
title:'Exponential Line',
axes: {
yaxis:{ min:-10,
max:240 }
},
series:[{color:'#5FAB78'}] });
Está bien documentado, por lo que no voy a repetir aquí lo que se podrá leer mejor allí. Cuando vaya mejor de tiempo prepararé una entrada con algún caso práctico en el que veamos cómo dibujar una tabla a partir de un archivo XML.
