Using jQuery to create bar charts based on user comments

Question

Am I still learning jQuery and running into something that I just can't wave my head at? (I'm not very good at math!). I know that maybe there is a graph type plugin that I could use, but I don't know if I need something so bulky / heavy. Any help would be greatly appreciated. This site is the best source for learning online!

I am trying to figure out how I could look at a list of comments that have a rating of excellent / good / good / bad contained in a div in li's comment. Then work out the percentage of excellent / good / good / weak comments, based on the fact that many comments are, for example: if there are only 4 comments, and there are 3 products and 1 bad, then it will be 75% good and 25% poor.

Then, to display these percentages, using the width property for each of the corresponding DIV files of the percentage bar.

Sorry if this is not clear, I thought it would be so simple, but I'm at a dead end. Please see the markup below to understand what I'm trying to do.

Any help would be awesome! :)

COMMENT // These will be li comments with excellent / good / good / low ratings inside them. They will be wrapped in UL with id 'comments'

<li> <p>blah blah blah...</p> <div class="user-image"></div> <div class="okay">It okay</div> </li> <li> <p>blah blah blah...</p> <div class="user-image"></div> <div class="excellent">It okay</div> </li> <li> <p>blah blah blah...</p> <div class="user-image"></div> <div class="okay">It okay</div> </li> <li> <p>blah blah blah...</p> <div class="user-image"></div> <div class="poor">It okay</div> </li> <li> <p>blah blah blah...</p> <div class="user-image"></div> <div class="poor">It okay</div> </li> <li> <p>blah blah blah...</p> <div class="user-image"></div> <div class="good">It okay</div> </li> <li> <p>blah blah blah...</p> <div class="user-image"></div> <div class="good">It okay</div> </li> <li> <p>blah blah blah...</p> <div class="user-image"></div> <div class="good">It okay</div> </li> <li> <p>blah blah blah...</p> <div class="user-image"></div> <div class="good">It okay</div> </li> <li> <p>blah blah blah...</p> <div class="user-image"></div> <div class="okay">It okay</div> </li> 

COMMENT // These will be the results, each percentage point is contained in the DIV, which corresponds to the rating excellent / good / good / bad. They will be wrapped in UL with identification "results".

 <li> <div class="excellent"> <div class="percentage-bar"></div> </div> </li> <li> <div class="good"> <div class="percentage-bar"></div> </div> </li> <li> <div class="okay"> <div class="percentage-bar"></div> </div> </li> <li> <div class="poor"> <div class="percentage-bar"></div> </div> </li> 

Answer 1

Here begins:

I tried to keep it as simple as possible, so the bars are not so good.

JsFiddle example

  // Add a sum function to the Array Array.prototype.sum = function(){ var sum = 0; for(var i = 0; i < this.length; sum += this[i++]); return sum; } $(function() { // set the "size" of the chart var size = 400; // store the rating names var ratings = ["excellent", "good", "okay", "poor"]; // zeroed out array for number of votes for each var votes = [0, 0, 0, 0]; // through the `LI`s and I add each vote to the appropriate // index of the votes array $("ul li").each(function(){ ++votes[ $.inArray($("div:last", this).attr("class"), ratings) ]; }); // Get the total votes cast var total = votes.sum(); $("#chart").attr("height", size); // Go though each of the votes array elements // and create a bar for each type of vote cast $(votes).each(function(index, value) { // Calculate length of this one bar. // could use something like $("#chart").height() instead of size var howTall = (value / total) * size; var bar = $("<div>"); bar.attr("class", "bar"); bar.height(howTall); bar.width(20); bar.attr("bottom", size); var result = $("<div>"); // Add label of type vote displayed result.append(ratings[index]); result.attr("class", "result"); // Add the bar result.append(bar); // Add the percent shown result.append((100*value/total) + "%"); $("#chart").append(result); }) }); 

Of course, this can be greatly polished. The lower part of the rods can be on the same level with changing vertices. Animations can be added as each bar is added. Gradients can be thrown into ... etc.,

But the heart of the code is to count all the voices, store them in an array, and then use the array to calculate percent and DIV heights.

Answer 2

I highly recommend using the jQuery HighCharts plugin. It is very easy to use and works great in older browsers (IE 6).

http://highcharts.com/

Answer 3

jQuery is not suitable for image processing. Also, when trying to scale a graph based on data, it therefore displays correctly. Instead of creating charts yourself, try the Google Charts API: http://code.google.com/apis/chart/ .

You do not need to worry about number crunching or creating graphics; just put the API with your data. You will not get the result in HTML format with divs , but instead as an image. This is better because it is much more portable, and the API has a ton of configuration options and the various types of graphs that it supports.