jqplot

jqplot es una librería muy chula para realizar gráficas en Java Script.

malevich

archivado en: JavaScript / 15 mayo, 2013

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.

|| Tags:

valoración de los lectores sobre jqplot

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.