Creating Animated Bar Charts Using JQuery Animation Effects

In one of the previous articles on GridViewGuy we demonstrated a technique to draw bar charts using the .NET graphics API. You can check out the article here. Although the article served the purpose of drawing attractive charts but the processing was performed on the server side. In this article we will demonstrate how to draw the bar charts using JavaScript and create animation effects using the JQuery library.

Introduction:

Why Not Perform Processing on the Server Side?

For simple graphs processing on the server side does not posses a problem but as soon as the user start generating tons of graphs it will put immense load on the server. There is an article which talks about profiling .NET applications. The article demonstrates the performance of the application when Polygons of different sides are created. You can check out the article here. Also, check out this screencast which shows DotTrace in action.

In this post we will create the bar charts on the client side. This technique is implemented with the idea that the client computer is sitting idle at 2% memory consumption most of the time. Why not use that memory to perform actions that were performed on the server side? And since we are performing this action on the client side why not use JQuery library to create some cool animation effects.

Let’s start by creating the elements on the page which includes the Button control and few DIVS.

The purpose of the placeHolderDiv and the baseDiv is to mark the top and bottoom of the box in which to create the bar graph.

Now, let’s check out the code which creates and animates the graph.

function drawGraph()
{
    $("#baseDiv").children(".barStyle").remove();

    marginLeft = 0;

    for(i=1;i<=10;i++) {


    var bar = document.createElement("div");
    bar.id = 'bar' + i;
    bar.className = 'barStyle';

    marginLeft += 25;

    bar.style.bottom = '4px';
    bar.style.left = marginLeft + 'px';

    // generate a random number
    var randomNumber = Math.random();
    randomNumber = Math.ceil(randomNumber * 100);

    barH = (randomNumber) + 'px';

    $("#baseDiv").append(bar);

    $("#" + bar.id).animate(
    {
    height:barH
    }
    ,1200);
}

The JavaScript random function is used to supply random height to the bar chart. The JQuery animate function makes it possible to create cool animation of the graph. If you are new to JQuery animation then I recommend that you check out this introductory screencast about JQuery animation.

The effect is shown below:

Pretty slick right!

Conclusion:

Creating bar charts is a performance intensive operation which can put too much load on the server. If you think your server cannot handle that load try pushing the creation on the client side. In this article we learned how to create attractive bar charts using JavaScript and use JQuery to animate them.

[Download Sample]