<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WebEstudio :: Blog de Diseño Web &#187; Sparklines</title>
	<atom:link href="http://www.jorgebravo.es/tag/sparklines/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.jorgebravo.es</link>
	<description>Profesionales más creativos XHTML + CSS + PHP + Flash</description>
	<lastBuildDate>Sat, 21 Aug 2010 20:03:36 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Analisis: 5 plugins para generar graficos usando jQuery</title>
		<link>http://www.jorgebravo.es/2010/01/analisis-5-plugins-para-generar-graficos-usando-jquery/</link>
		<comments>http://www.jorgebravo.es/2010/01/analisis-5-plugins-para-generar-graficos-usando-jquery/#comments</comments>
		<pubDate>Mon, 25 Jan 2010 08:40:13 +0000</pubDate>
		<dc:creator>Jorge Bravo</dc:creator>
				<category><![CDATA[BLOG]]></category>
		<category><![CDATA[DISEÑO]]></category>
		<category><![CDATA[Diseño web]]></category>
		<category><![CDATA[JQUERY]]></category>
		<category><![CDATA[PROGRAMACIÓN]]></category>
		<category><![CDATA[RECURSOS]]></category>
		<category><![CDATA[Web App]]></category>
		<category><![CDATA[flot]]></category>
		<category><![CDATA[HighCharts]]></category>
		<category><![CDATA[jqplot]]></category>
		<category><![CDATA[jQuery Visualize]]></category>
		<category><![CDATA[Sparklines]]></category>

		<guid isPermaLink="false">http://www.jorgebravo.es/?p=389</guid>
		<description><![CDATA[
No me había tocado trabajar con grandes cantidades de gráficas generadas de manera dinámica en una web, pero en un proyecto relacionado con un backend para una aplicación on-line salto la idea de poder obtener ciertos datos estadísticos de manera dinámica y vistos en forma de gráficas.
Y pensando en la manera de hacer esto de [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="aligncenter size-full wp-image-392" title="graficas" src="http://www.jorgebravo.es/wp-content/uploads/2010/01/graficas.png" alt="graficas" width="500" height="242" /></p>
<p>No me había tocado trabajar con grandes cantidades de gráficas generadas de manera dinámica en una web, pero en un proyecto relacionado con un backend para una aplicación on-line salto la idea de poder obtener ciertos datos estadísticos de manera dinámica y vistos en forma de gráficas.</p>
<p>Y pensando en la manera de hacer esto de una forma mas menos organizada y tratando de usar solo un paquete, en un momento pense en varias opciones como <strong>php y gd</strong> está <strong>jpGraph</strong>, html como las de Google, o varias en Flash y otras tantas en Javascript. Pero al final me decidí a buscar un plugin para jQuery que es la librería que ocupamos en el proyecto en cuestión.<span id="more-389"></span></p>
<p>Algunas razones, utiliza pocos recursos y se generan en el cliente liberando recursos del servidor, en momentos de máximos de trabajo.</p>
<p>Tuve una grata sorpresa al ver que hay una gran cantidad de plugins para esta tarea tan especifica y ademas de muy buena calidad.</p>
<h2>1.- El primero de la lista es Flot</h2>
<p><img class="alignnone size-full wp-image-393" title="flot" src="http://www.jorgebravo.es/wp-content/uploads/2010/01/flot.jpg" alt="flot" width="485" height="100" /></p>
<p>Flot desarrollado por <strong>Ole Laursen</strong>, es una libreria Javascript para gráficos de lineas usando jQuery. Esta permite crear gráficas del lado del cliente con funciones como el seno, coseno, etc.</p>
<p>Es potente, fácil de implementar y la estética, al igual que en otros productos para jQuery, es muy buena. Le falta soportar gráficos de torta, pero podemos utilizar la modificación de Flot que se encuentra <a target="_blank" href="http://groups.google.com/group/flot-graphs/browse_thread/thread/9b1e73e4025b376c/b56101eb1375d1da?#b56101eb1375d1da">aquí</a>.</p>
<p>Ejemplos: <a target="_blank" href="http://people.iola.dk/olau/flot/examples/">demos</a><br />
Descargar: <a target="_blank" href="http://flot.googlecode.com/files/jquery.flot-0.1.pack.js">jquery.flot-0.1.pack.js</a></p>
<h2>2.- jQuery Visualize – Para crear gráficos accesibles</h2>
<p><img class="alignnone size-full wp-image-394" title="fchart" src="http://www.jorgebravo.es/wp-content/uploads/2010/01/fchart.jpg" alt="fchart" width="485" height="100" /></p>
<p>jQuery Visualize permite crear gráficas accesibles desde una tabla de datos estándar haciendo uso de canvas. Se pueden crear varios tipos de gráficas como: torta (pie), lineal, área y de barras.</p>
<p>En su sitio podemos encontrar ejemplos muy bien explicados (en ingles). Muy funcional, práctico y sencillo de implementar, jQuery Visualize, una excelente opción.</p>
<p>Sitio: <a target="_blank" href="http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/">Filament Group</a></p>
<h2>3.- HighCharts &#8211; Completo sistema de gráficas</h2>
<p><img class="alignnone size-full wp-image-395" title="hishart" src="http://www.jorgebravo.es/wp-content/uploads/2010/01/hishart.jpg" alt="hishart" width="485" height="100" /></p>
<p>HighCharts, uno de los mas completos sitesmas de graficas, este magnifico plugin para jquery incorpora los más conocidos formatos para mostrar graficas y con una presentación impecable. Animaciones y colores realmente agradables, todo esto con muy bajo consumo.</p>
<p>Sitio: <a target="_blank" href="http://www.highcharts.com/">HighCharts</a><br />
Ejemplos: <a target="_blank" href="http://www.highcharts.com/demo/" target="_blank">www.highcharts.com/demo/</a></p>
<h2>4.- Sparklines &#8211; Gráficas inline con jQuery</h2>
<p><img class="alignnone size-full wp-image-396" title="spriaklines" src="http://www.jorgebravo.es/wp-content/uploads/2010/01/spriaklines.jpg" alt="spriaklines" width="485" height="100" /></p>
<p>Sparklines es un plugin de jQuery que facilita la creación de gráficos inline. Los datos pueden ser pasados por parámetro o sino a través de funciones JavaScript.</p>
<p>Dispone de una buena cantidad de tipos de gráficos y en su sitio a pesar de estar en Ingles esta muy bien documentado.</p>
<p>Sitio: <a target="_blank" href="http://omnipotent.net/jquery.sparkline/">Sparklines</a><br />
Descarga: <a target="_blank" href="http://omnipotent.net/jquery.sparkline/">jQuery Sparklines</a></p>
<h2>5.- jqPlot – Gráficos Profesionales con jQuery</h2>
<p><img class="alignnone size-full wp-image-397" title="jqPlot" src="http://www.jorgebravo.es/wp-content/uploads/2010/01/jqPlot.jpg" alt="jqPlot" width="485" height="100" /></p>
<p>jqPlot tambien usa la canvas para generar los gráficas, posee multiples funcionalidades como &#8211; Gráficos de Torta &#8211; Entradas para una pares de datos X/Y &#8211; Entradas para series de datos x1,x2,… &#8211; Series de Datos Multiples &#8211; Multiples ejes Y &#8211; Gráficos Logaritmicos &#8211; Ejes con fechas etc&#8230;</p>
<p>Las imagenes generadas son de gran calidad y con muy buena presentación. Buenos colores, no están muy cargados y lo mejor es muy simple de usar.</p>
<p>Sitio: <a target="_blank" href="http://go2.wordpress.com/?id=725X1342&amp;site=hackelare.wordpress.com&amp;url=http%3A%2F%2Fwww.jqplot.com%2Findex.php">Web Oficial jqPlot</a><br />
Ejemplos: <a target="_blank" href="http://go2.wordpress.com/?id=725X1342&amp;site=hackelare.wordpress.com&amp;url=http%3A%2F%2Fwww.jqplot.com%2Ftests%2F">jqPlot</a></p>
<p>Bien finalmente la decisión es de ustedes hay para todos los gustos y colores. Todo dependerá de lo que esperemos conseguir como resultado.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jorgebravo.es/2010/01/analisis-5-plugins-para-generar-graficos-usando-jquery/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
