<?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>Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más &#187; graficas</title>
	<atom:link href="http://www.masquewordpress.com/tag/graficas/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.masquewordpress.com</link>
	<description>Tutoriales y recursos web sobre JQuery , PHP, Wordpress , twitter. Aprende diseño web y programación</description>
	<lastBuildDate>Fri, 03 Feb 2012 19:33:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Crear gráficos dinámicos con JQuery Visualize</title>
		<link>http://www.masquewordpress.com/crear-graficos-dinamicos-con-jquery-visualize/</link>
		<comments>http://www.masquewordpress.com/crear-graficos-dinamicos-con-jquery-visualize/#comments</comments>
		<pubDate>Sun, 26 Jul 2009 18:12:25 +0000</pubDate>
		<dc:creator>Damian</dc:creator>
				<category><![CDATA[JQuery]]></category>
		<category><![CDATA[Recursos]]></category>
		<category><![CDATA[graficas]]></category>
		<category><![CDATA[jquery.plugin]]></category>

		<guid isPermaLink="false">http://masquewordpress.com/?p=211</guid>
		<description><![CDATA[Hoy dando una vuelta por la web de Andrés Nieto me encontre con este peculiar plugin llamado JQuery Visualize que se encarga de formar gráficas a partir de los datos de una tabla. Entre sus posibilidades podemos encontrar desde barras normales , areas, gráficas en queso , etc y lo mejor de todo es que [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">Hoy dando una vuelta por la web de<a href="http://www.anieto2k.com"> Andrés Nieto</a> me encontre con este peculiar plugin llamado <a href="http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas">JQuery Visualize</a> que se encarga de formar gráficas a partir de los datos de una tabla. Entre sus posibilidades podemos encontrar desde barras normales , areas, gráficas en queso , etc y lo mejor de todo es que si el visitante no dispone de Javascript podra ver la tabla en vez de la gráfica.<br />
<img class="size-full wp-image-213  aligncenter" title="jquery.visualize" src="http://masquewordpress.com/wp-content/uploads/2009/07/jquery.visualize1.JPG" alt="jquery.visualize" width="528" height="238" /></p>
<p style="text-align: left;">La forma en que funciona es muy sencilla. Dada una tabla cualquiera como :</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">table</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">caption</span>&gt;</span>2009 Individual Sales by Category<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">caption</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">thead</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>food<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>auto<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>household<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>furniture<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>kitchen<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>bath<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">thead</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tbody</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>Mary<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>150<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>160<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>40<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>120<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>30<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>70<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">th</span>&gt;</span>Tom<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">th</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>3<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>40<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>30<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>45<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>35<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">td</span>&gt;</span>49<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">td</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tr</span>&gt;</span>
		...Las columnas repetidas las saco por brevedad
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">tbody</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">table</span>&gt;</span></pre></td></tr></table></div>

<p>Tan solo hay que llamar al plugin de la siguiente forma y el plugin se va a encargar de generar la gráfica a partir de los datos introducidos.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'table'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">visualize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>options<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Además podemos definir las siguiente opciones:</p>
<ul>
<li><strong>type:</strong> string. Valors aceptados ‘bar’, ‘area’, ‘pie’, ‘line’. Default: ‘bar’.</li>
<li><strong>width:</strong> number. Ancho de la gráfica. Por defecto el tamaño de la tabla.</li>
<li><strong>height</strong>: number. Altura de la gráfica. Por defecto el tamaño de la tabla.</li>
<li><strong>appendTitle</strong>: boolean. Añadir título a la gráfica. Default: true.</li>
<li><strong>title</strong>: string. Título de la gráfica. Por defecto se usa el<br />
<caption /> de la tabla.</li>
<li><strong>appendKey</strong>: boolean. Añadir color principal. Default: true.</li>
<li><strong>colors</strong>: array. Array de colores usados. Default:['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']</li>
<li> <strong>textColors</strong>: array. Array de colores para el texto. Default: [].</li>
<li><strong>parseDirection</strong>: string. Dirección de parseo de datos de la tabla Acepta ‘x’ e ‘y’. Default: ‘x’.</li>
<li><strong>pieMargin</strong>: number.Espacio alrededor de la gráfica tipo “Pie”. Default: 20.</li>
<li><strong>pieLabelPos</strong>: string. Posición del texto de etiqueta en la gráfica tipo “Pie”. Acepta ‘inside’ y ‘outside’. Default: ‘inside’.</li>
<li><strong>lineWeight</strong>: number. Tamaño de la línea de la gráfica. Default: 4.</li>
<li><strong>barGroupMargin</strong>: number. Espacio entre barras. Default: 10.</li>
<li><strong>barMargin</strong>: number.Margenes de la gráfica. Default: 1</li>
</ul>
<p>Pueden ver una gráfica dinámica desde <a href="http://www.filamentgroup.com/examples/charting_v2/index_2.php">este enlace</a> o<a href="http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas"> descargar el plugin directamente.</a><br />
Un saludo a todos.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.masquewordpress.com/crear-graficos-dinamicos-con-jquery-visualize/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

