ansaurus

Question

Using jQuery to create bar graphs based on user comments

Answer 1

A:

jQuery isn't well suited to image processing. Also, there is a fair bit of math involved when you try to scale the graph based on the data so it displays correctly. Instead of making the charts yourself, try the Google Chart API: http://code.google.com/apis/chart/.

You don't have to worry about crunching the numbers or creating the graphics; just supply the API with your data. You are not going to get a result in HTML format with divs, but instead as an image. This is better because it is much more portable and also the API has a ton of configuration options and different types of graphs that it supports.

SimpleCoder 2010-09-13 20:56:39

Answer 2

+1 A:

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

http://highcharts.com/

jhanifen 2010-09-13 21:06:22

Answer 3

+4 A:

Here's a start: alt text

I tried to keep it as simple as possible, so the bars aren't that pretty.

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 bottom of the bars could all be at the same level with the tops varying. Animations could be added as each bar is being added. Gradients could be thrown in... etc etc,

But the heart of the code is to count up all the votes, store them in an array, and then use the array to calculate the percents and heights of the DIVs.

Peter Ajtai 2010-09-13 22:46:31

WOW!, Mate this is exactly what I was talking about, you sir are a gentleman :). Thank you so much, I will update everybody on how the implementation went, after I've picked apart the code and got my head around it. Thanks!

2010-09-14 08:52:13

@user446550 - You're welcome ;)

Peter Ajtai 2010-09-14 11:46:38

ansaurus

tags:

views:

answers:

Using jQuery to create bar graphs based on user comments

jsFiddle example

related questions