title: Using jQuery to create bar graphs based on user comments
body: <p>I am still learning jQuery and have come up against something I just can't get my head around? (I'm not great at math!). I know that there is probably a graph type plug-in out there I could use but I don't know if I need something so bulky/code-heavy. Any help would be greatly appreciated. This website is the best learning source on the web!</p>
  
  <p>I'm trying to figure out of how I could look through a list of comments that have a 'rating' of excellent/good/okay/poor contained in a DIV within the li comment. Then work out the percentage of the excellent/good/okay/poor comments based on however many comments there are eg: If there are 4 comments in total, and there are 3 goods and 1 poor, then it would be 75% good and 25% poor.</p>
  
  <p>Then to display those percentages using the width property for each of the corresponding 'percentage-bar' DIV's.</p>
  
  <p>Sorry if this is not clear, I thought it would be so simple, but I'm stumped. Please see the markup below to get an understanding of what I am trying to do.</p>
  
  <p>Any help would be awesome! :)</p>
  
  <p>COMMENT // These would be the li comments with the excellent/good/okay/poor ratings within them. These would be wrapped in a UL with id 'comments'</p>
  
  <pre><code>&lt;li&gt;
     &lt;p&gt;blah blah blah...&lt;/p&gt;
     &lt;div class="user-image"&gt;&lt;/div&gt;
     &lt;div class="okay"&gt;It's okay&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;p&gt;blah blah blah...&lt;/p&gt;
     &lt;div class="user-image"&gt;&lt;/div&gt;
     &lt;div class="excellent"&gt;It's okay&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;p&gt;blah blah blah...&lt;/p&gt;
     &lt;div class="user-image"&gt;&lt;/div&gt;
     &lt;div class="okay"&gt;It's okay&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;p&gt;blah blah blah...&lt;/p&gt;
     &lt;div class="user-image"&gt;&lt;/div&gt;
     &lt;div class="poor"&gt;It's okay&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;p&gt;blah blah blah...&lt;/p&gt;
     &lt;div class="user-image"&gt;&lt;/div&gt;
     &lt;div class="poor"&gt;It's okay&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;p&gt;blah blah blah...&lt;/p&gt;
     &lt;div class="user-image"&gt;&lt;/div&gt;
     &lt;div class="good"&gt;It's okay&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;p&gt;blah blah blah...&lt;/p&gt;
     &lt;div class="user-image"&gt;&lt;/div&gt;
     &lt;div class="good"&gt;It's okay&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;p&gt;blah blah blah...&lt;/p&gt;
     &lt;div class="user-image"&gt;&lt;/div&gt;
     &lt;div class="good"&gt;It's okay&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;p&gt;blah blah blah...&lt;/p&gt;
     &lt;div class="user-image"&gt;&lt;/div&gt;
     &lt;div class="good"&gt;It's okay&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;p&gt;blah blah blah...&lt;/p&gt;
     &lt;div class="user-image"&gt;&lt;/div&gt;
     &lt;div class="okay"&gt;It's okay&lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>COMMENT // These would be the results, each percentage bar is contained by a DIV that corresponds to a rating excellent/good/okay/poor. These would be wrapped in a UL with id 'results'.</p>
  
  <pre><code>&lt;li&gt;
      &lt;div class="excellent"&gt;
          &lt;div class="percentage-bar"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;div class="good"&gt;
          &lt;div class="percentage-bar"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;div class="okay"&gt;
          &lt;div class="percentage-bar"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;div class="poor"&gt;
          &lt;div class="percentage-bar"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>