<?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>McKinney Station &#187; JQuery</title>
	<atom:link href="http://www.mckinneystation.com/categories/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.mckinneystation.com</link>
	<description>Ruby on Rails web application development for Dallas/Fort Worth and all of North Texas.</description>
	<lastBuildDate>Wed, 02 Sep 2009 14:29:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Using Google Charts with Rails</title>
		<link>http://www.mckinneystation.com/2008/08/22/using-google-charts-with-rails/</link>
		<comments>http://www.mckinneystation.com/2008/08/22/using-google-charts-with-rails/#comments</comments>
		<pubDate>Fri, 22 Aug 2008 18:10:11 +0000</pubDate>
		<dc:creator>Geoffrey</dc:creator>
				<category><![CDATA[Dreamhost]]></category>
		<category><![CDATA[GitHub]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[Projects]]></category>
		<category><![CDATA[Rails]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[Web Applications]]></category>
		<category><![CDATA[googlecharts]]></category>
		<category><![CDATA[microapps]]></category>

		<guid isPermaLink="false">http://www.mckinneystation.com/?p=85</guid>
		<description><![CDATA[With one of my recent microapps, UnscientificPolls.com, I wanted to show the polling data in more interesting ways than just the vote counts.  Charting was the logical conclusion, but how do it was a more difficult decision.
Some of the criteria I had for choosing the charting solution included: ease of use (it is  [...]]]></description>
			<content:encoded><![CDATA[<p>With one of my recent <a href="/2008/06/03/microapps-encourage-hacking/">microapps</a>, <a href="http://www.unscientificpolls.com">UnscientificPolls.com</a>, I wanted to show the polling data in more interesting ways than just the vote counts.  Charting was the logical conclusion, but how do it was a more difficult decision.</p>
<p>Some of the criteria I had for choosing the charting solution included: ease of use (it is  microapp, of course), compatible with shared hosting environment, fast, easy to customize.</p>
<p>Some of the libraries I looked at included: <a href="http://code.google.com/p/flot/">flot with jquery</a>, <a href="http://nubyonrails.com/pages/gruff">gruff</a>, <a href="http://scruffy.rubyforge.org/">scruffy</a>, <a href="http://nubyonrails.com/pages/sparklines">sparklines</a>, and <a href="http://googlecharts.rubyforge.org/">googlecharts</a>.  I settled on the googlecharts library because I didn&#8217;t need the interactive features of <code>flot</code> and I didn&#8217;t want to worry about RMagick needed for <code>gruff</code>, <code>scruffy</code>, or <code>sparklines</code>. </p>
<h2>Google Charts API</h2>
<p>The <a href="http://code.google.com/apis/chart">Google Charts API</a> is an interesting tool that lets you dynamically generate charts using a &#8220;simple&#8221; URL scheme.   The usage policy is very generous too: &#8220;There&#8217;s no limit to the number of calls per day you can make to the Google Chart API.&#8221;</p>
<p>This would allow me to offload the image generation to Google (who supposedly has quite a bit of computing power) and let my application, in a shared hosting environment, focus on collecting votes.</p>
<h2>Enter <em>googlecharts</em></h2>
<p>The challenge with the Google Charts API &#8220;simple&#8221; url scheme is that it would very tedious to have generate it by concatenating the strings together.  Fortunately, Matt Aimonetti built the <code>googlecharts</code> gem for Ruby.  You can get it from <a href="http://www.rubyforge.org">Rubyforge</a> (<code>gem install googlecharts</code>) or <a href="http://www.github.com">Github</a> (<code>gem install mattetti-googlecharts</code>).  </p>
<h2>Installing <em>googlecharts</em> in my Rails App</h2>
<p>With <code>googlecharts</code> installed on my machine I could start using it, by adding it to my <code>config/environment.rb</code> file.</p>
<pre><code>Rails::Initializer.run do |config|
  config.gem "googlecharts", :lib =&gt; "gchart"
end</code></pre>
<p>Since the file we need to include is named &#8220;gchart&#8221;, not &#8220;googlecharts&#8221;, we have to specify the <code>:lib =&gt; "gchart"</code> option.</p>
<p>I also didn&#8217;t want to worry about installing in on the deployment machine, so I unpacked it to the <code>vendor/gems</code> folder using <code>rake gems:unpack</code>.</p>
<h2>Now to the Charts</h2>
<p>Once all that was in place the challenge was getting the data into a format that would be easy to pass to the library.  It turns out, that wasn&#8217;t too challenging either.</p>
<h3>The Helper</h3>
<p>In my view helper module I created a method that would collect the data needed for the chart.</p>
<pre><code>  def pie_chart poll
    @pie_chart ||= {
      :data =&gt; poll.choices.collect(&amp;:votes_count),
      :colors =&gt; poll.choices.collect {|c| c.winner? ? "264409" : "8A1F11" }
    }
  end</code></pre>
<p>This just loops over the choices and collects the needed data and puts it in an easy to use Hash.</p>
<h3>The View</h3>
<pre><code>    &lt;%= Gchart.pie :size =&gt; '240x160',
                   :title =&gt; 'Vote split',
                   :data =&gt; pie_chart(@poll)[:data],
                   :bar_colors =&gt; pie_chart(@poll)[:colors],
                   :format =&gt; 'image_tag' %&gt;</code></pre>
<p>Using googlecharts Gchart made it easy to build the &#8220;simple&#8221; url needed for a pie chart using the Google Charts API (also supports line, scatter, venn, sparklines, and meter charts)  I didn&#8217;t even have to add the <img /> tag because I could pass the <code>:format =&gt; 'image_tag'</code> and one was generated for me.</p>
<h2>Conclusion</h2>
<p>I was extremely happy with how quick and easy it was to get some simple charts into my application (check them out at <a href="http://www.unscientificpolls.com">UnscientificPolls.com</a>).  The response time from Google seems to be as fast as if the images were stored locally. It also saved me the headache of installing with RMagick.  This is definitely a good fit for simple graphs and charts in a Rails application.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mckinneystation.com/2008/08/22/using-google-charts-with-rails/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Microapps Encourage Hacking</title>
		<link>http://www.mckinneystation.com/2008/06/03/microapps-encourage-hacking/</link>
		<comments>http://www.mckinneystation.com/2008/06/03/microapps-encourage-hacking/#comments</comments>
		<pubDate>Tue, 03 Jun 2008 14:54:46 +0000</pubDate>
		<dc:creator>Geoffrey</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[GitHub]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[RailsConf]]></category>
		<category><![CDATA[SQLite]]></category>
		<category><![CDATA[Sinatra]]></category>
		<category><![CDATA[SliceHost]]></category>
		<category><![CDATA[Web Applications]]></category>
		<category><![CDATA[microapps]]></category>
		<category><![CDATA[mongrel]]></category>
		<category><![CDATA[nginx]]></category>

		<guid isPermaLink="false">http://www.mckinneystation.com/2008/06/03/microapps-encourage-hacking/</guid>
		<description><![CDATA[photo by Jeff Belmonte
I am back from RailsConf 2008 and two of my favorite talks were &#8220;Microapps for Fun and Profit&#8221; by Erik Kastner and &#8220;23 Hacks&#8221; by Nathaniel Talbott.  I have recently been toying around with creating small little apps where I can try out new ideas and sharpen my skills.  
One [...]]]></description>
			<content:encoded><![CDATA[<div class="shadow left"><img src='http://www.mckinneystation.com/wp-content/uploads/2008/06/small_train.jpg' alt='Small Train' /><br/><span class="credit">photo by <a href="http://www.flickr.com/photos/jeffbelmonte/">Jeff Belmonte</a></span></div>
<p>I am back from <a href="http://www.railsconf.com">RailsConf 2008</a> and two of my favorite talks were &#8220;<a href="http://metaatem.net/2008/05/30/my-railsconf-talk">Microapps for Fun and Profit</a>&#8221; by <a href="http://metaatem.net/">Erik Kastner</a> and &#8220;<a href="http://blog.talbott.ws/articles/2008/5/31/23-hacks-railsconf-2008">23 Hacks</a>&#8221; by <a href="http://blog.talbott.ws/">Nathaniel Talbott</a>.  I have recently been toying around with creating small little apps where I can try out new ideas and sharpen my skills.  </p>
<p>One of those apps is the <a href="http://www.templategeneratorpro.com">Template Generator Pro</a>.  It was a really simple little app the generates funny <a href="http://coverletters.templategeneratorpro.com">cover letters</a>, <a href="http://twoweeknotice.templategeneratorpro.com">two week notices</a>, <a href="http://jobs.templategeneratorpro.com">job postings</a>, and more.  Not a lot to it.  What did I learn?  I deployed it to <a href="http://www.slicehost.com">SliceHost</a> (my previous apps have been deployed to <a href="http://dreamhost.com/">DreamHost</a>) and starting learning more about hosting and system administration.  I also had a chance to port the <a href="http://nonsense.sourceforge.net/">Nonsense Perl script</a> to <a href="http://nonsense.rubyforge.org/">a Ruby version</a>.  That was fun!</p>
<h2>Tools of the Trade</h2>
<p>What am I using for my microapps?  The first ones (<a href="http://www.catechizeme.com">CathechizeMe</a> and <a href="http://www.templategeneratorpro.com">TemplateGeneratorPro</a>) were small Rails applications.  But that is alot of overhead and not a lot of &#8220;micro&#8221; in that.  So for new things I am looking at <a href="http://sinatrarb.com/">Sinatra</a> for a framework and <a href="http://stone.rubyforge.org/">Stone</a> or <a href="http://ar.rubyonrails.com/">ActiveRecord</a> with <a href="http://www.sqlite.org/">SQLite</a> for persistance.  I like <a href="http://jquery.com/">JQuery</a> for the Javascript and <a href="http://code.google.com/p/blueprintcss/">BluePrint CSS</a> helps me make it look pretty fairly easily.  <a href="http://www.oswd.org/">Open Source Web Design</a> and <a href="http://www.openwebdesign.org">Open Web Design</a> help to stimulate the creative aspects of the designs.</p>
<h2>Check it Out</h2>
<p>You can see some my little hacks being stored on my GitHub account:  <a href="http://www.github.com/gdagley">http://www.github.com/gdagley</a>. I also have some projects from <a href="http://www.thinkrelevance.com">work</a> at <a href="http://www.github.com/relevance">http://www.github.com/relevance</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mckinneystation.com/2008/06/03/microapps-encourage-hacking/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>One Way I Got JQuery To Play Nicely With Rails</title>
		<link>http://www.mckinneystation.com/2007/09/13/one-way-i-got-jquery-to-play-nicely-with-rails/</link>
		<comments>http://www.mckinneystation.com/2007/09/13/one-way-i-got-jquery-to-play-nicely-with-rails/#comments</comments>
		<pubDate>Thu, 13 Sep 2007 16:51:47 +0000</pubDate>
		<dc:creator>Geoffrey</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Rails]]></category>

		<guid isPermaLink="false">http://www.mckinneystation.com/2007/09/13/one-way-i-got-jquery-to-play-nicely-with-rails/</guid>
		<description><![CDATA[photo by dave_mcmt

I love JQuery!  I did a short 10-15 minute presentation at the last Dallas.rb to let others in on the joys of using JQuery.
But one thing that doesn&#8217;t work right when using JQuery with Rails applications is the JQuery AJAX features and Rails respond_to.  It turns out the Rails it looking [...]]]></description>
			<content:encoded><![CDATA[<div class="shadow left"><img src='http://www.mckinneystation.com/wp-content/uploads/2007/09/bridge.jpg' alt='Bridge' /><br/><span class="credit">photo by <a href="http://www.flickr.com/photos/dave_mcmt/">dave_mcmt</a><br/><br />
</span></div>
<p>I love JQuery!  I did a <a href="http://www.mckinneystation.com/2007/08/31/lightning-talks-at-dallasrb/">short 10-15 minute presentation at the last Dallas.rb</a> to let others in on the joys of using JQuery.</p>
<p>But one thing that doesn&#8217;t work right when using JQuery with Rails applications is the JQuery AJAX features and Rails respond_to.  It turns out the Rails it looking for a specific request header, but JQuery sends something different one.  </p>
<p  class="clearfix">It is easily solved with this at the top of your application.js file:</p>
<pre>
<code>$.ajaxSetup({
  beforeSend: function(xhr) {xhr.setRequestHeader("Accept", "text/javascript");}
});</code>
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.mckinneystation.com/2007/09/13/one-way-i-got-jquery-to-play-nicely-with-rails/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Lightning Talks at Dallas.rb</title>
		<link>http://www.mckinneystation.com/2007/08/31/lightning-talks-at-dallasrb/</link>
		<comments>http://www.mckinneystation.com/2007/08/31/lightning-talks-at-dallasrb/#comments</comments>
		<pubDate>Sat, 01 Sep 2007 04:56:30 +0000</pubDate>
		<dc:creator>Geoffrey</dc:creator>
				<category><![CDATA[Dallas]]></category>
		<category><![CDATA[Development Environment]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Rails]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[Web Applications]]></category>
		<category><![CDATA[Web Developer Toolbar]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[hpricot]]></category>
		<category><![CDATA[xHTML]]></category>

		<guid isPermaLink="false">http://www.mckinneystation.com/2007/08/31/lightning-talks-at-dallasrb/</guid>
		<description><![CDATA[photo by anyoungkevin

We are doing lightning talks at this month&#8217;s dallas.rb meeting.  I decided to give the group some choice of what I would present.
I will do a short one on &#8220;Why Firefox Makes Me Look Good&#8221; or &#8220;Better Web App Development using Firefox and a Buttload of Extensions&#8221;
I can also do one &#8220;JQuery: [...]]]></description>
			<content:encoded><![CDATA[<div class="shadow right"><img src='http://www.mckinneystation.com/wp-content/uploads/2007/08/lightning.jpg' alt='Lightning' /><br/><span class="credit">photo by <a href="http://flickr.com/photos/kevinmiller/">anyoungkevin</a><br />
</span></div>
<p>We are doing lightning talks at this month&#8217;s <a href="http://www.dallasrb.org">dallas.rb</a> meeting.  I decided to give the group some choice of what I would present.</p>
<p>I will do a short one on &#8220;Why Firefox Makes Me Look Good&#8221; or &#8220;Better Web App Development using Firefox and a <a href="http://answers.google.com/answers/threadview?id=511287">Buttload</a> of Extensions&#8221;</p>
<p>I can also do one &#8220;JQuery: <a href="http://www.free-lyrics.org/Aaron-Neville/4605-Dont-Know-Much.html">I Don&#8217;t Know Much, But I Know I Love You</a> &#8221;</p>
<p>And since neither of those are Ruby related, I will throw another one out there: &#8220;<a href="http://www.youtube.com/watch?v=dpvyhGnF9_E">Tighter Abs</a>: XML Situps Made Easy With Ruby&#8221; </p>
<p>I&#8217;ll let everyone decide which ones you want to hear more about.</p>
<p><strong>Update</strong></p>
<p>I only did the JQuery presentation and <a href='http://www.mckinneystation.com/wp-content/uploads/2007/09/jquery.pdf' title='JQuery Presentation'>here are the slides</a> (although they were much more interesting in person).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mckinneystation.com/2007/08/31/lightning-talks-at-dallasrb/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Is Your JavaScript Getting In The Way?</title>
		<link>http://www.mckinneystation.com/2007/05/01/is-your-javascript-getting-in-the-way/</link>
		<comments>http://www.mckinneystation.com/2007/05/01/is-your-javascript-getting-in-the-way/#comments</comments>
		<pubDate>Tue, 01 May 2007 15:21:58 +0000</pubDate>
		<dc:creator>Geoffrey</dc:creator>
				<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[JQuery]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Prototype]]></category>
		<category><![CDATA[RJS]]></category>
		<category><![CDATA[Rails]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Web Applications]]></category>
		<category><![CDATA[script.aculo.us]]></category>

		<guid isPermaLink="false">http://www.mckinneystation.com/2007/05/01/is-your-javascript-getting-in-the-way/</guid>
		<description><![CDATA[photo by monique72

With all of the talk these days of Web 2.0 and the fancy, shiny, draggable, refreshable, blinking, glowing components in web applications, I wonder how many of the will still work when JavaScript is turn off or not even present (yes, it still happens).   And how is the usability and accessibility [...]]]></description>
			<content:encoded><![CDATA[<div class="shadow right"><img src='http://www.mckinneystation.com/wp-content/uploads/2007/05/tram.jpg' alt='Tram Sign on Floor' /><br/><span class="credit">photo by <a href="http://www.sxc.hu/profile/monique72">monique72</a></span>
</div>
<p>With all of the talk these days of Web 2.0 and the fancy, shiny, draggable, refreshable, blinking, glowing components in web applications, I wonder how many of the will still work when JavaScript is turn off or not even present (yes, it still happens).   And how is the usability and accessibility of the application affected when so much of the interaction happens through JavaScript that doesn&#8217;t degrade?</p>
<p>I have been taking a look at creating a fully functional application, without any fancy Javascipt or AJAX, and then <a href="http://onlinetools.org/articles/unobtrusivejavascript/">adding the extra functionality unobtrusively</a>.  To force myself to learn how to do this, I stopped using <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://script.aculo.us">script.aculo.us</a>, and the Ruby on Rails helpers with RJS, and I started using <a href="http://www.jquery.com">JQuery</a>.  Two things happened: 1. I started to better understand how AJAX works and can enhance my application. 2. I found out I really like JQuery.</p>
<p>More on my JQuery experiences later.  Now back to adding cool features, unobtrusively.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mckinneystation.com/2007/05/01/is-your-javascript-getting-in-the-way/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
