Chart in jquery or javascript

I get user list from database in jsp. In each user开发者_开发知识库 I have a field named count. I have to show chart [pie and bar] for this count. I search on net found libraries for drawing chart in javascript but didn't get success in implementing them as I don't know how can I pass the values to the chart? Can any body recommend some good style to do this.

Note:- Any js or jquery chart library suggestion is welcome as far as they are free and commercially usable. Bar and pie charts are more preferable.

Edit:-

I know how to draw charts with predefined data. But here data is not predefined. My problem is how can I get counts in js. I'm getting list of users in jstl.

How can I get counts for each user in js?

I highly recommend Flot (http://code.google.com/p/flot/)

You may want to try Google Chart API (http://code.google.com/apis/chart/). Just build the url accordingly and supply "count" values as url string parameters. No need of javascript.

But, I guess your main issue is retrieving data available in jstl, to be used in javascript. This article may help you :

http://timothypowell.net/blog/?p=3

Just used the method described in this blog to store user and count information in a javascript array and then use it accordingly.

Any js or jquery chart library suggestion

I will suggest to use JqPlot for drawing chart. They are simple and good looking charts.

How can I get counts for each user in js?

You can easily use JSTL in javascript. What you need to do is just loop over your user list and add [username, usercount] pair in data of chart in javascript. A sample code can be ...

Javascript

$(function(){
    plot = $.jqplot("piePlot", [[ // --- loop over your user list using jstl and get data value pairs
                  <c:forEach items='${ userList }' var='user'>
                     ['${user.userName}',parseInt('${user.userCount}')],
                  </c:forEach>
               ]], { 
                    gridPadding: {top:0, bottom:38, left:0, right:0},
                    seriesDefaults:{
                          renderer:$.jqplot.PieRenderer, trendline:{show:true}, 
                          rendererOptions: { padding: 8, showDataLabels: true}},
                          legend:{
                                  show:true, 
                                  placement: 'inside', 
                                  rendererOptions: {
                                          numberRows: 1
                                  }, 
                          location:'s',
                          marginTop: '15px'
                   });
           });

Assuming count variable name is userCount and name of user is stored in userName. The list you get is named as userList.

HTML

<!-- div where chart will be shown -->
<div id="piePlot" style="margin-top:20px; margin-left:20px; width:200px; height:200px;">
</div>

Files needed to be included in page

<link rel="stylesheet" type="text/css" href="js/jqPlot/jquery.jqplot.css" />
<script type="text/javascript" src="js/jqPlot/jquery.jqplot.js"></script>
<script type="text/javascript" src="js/jqPlot/plugins/jqplot.pieRenderer.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="js/jqPlot/excanvas.js"></script><![endif]-->  

I would suggest you use open flash chart. It has libraries in almost all languages and uses flash to render charts.

You can try this http://people.iola.dk/olau/flot/examples/

I never used it, but it seems really nice:

http://www.jqplot.com/tests/

jQuery + jQplot should serve your purpose

Make a Ajax call from jQuery

(function($){
$.fn.loadBarChart = function(render_to,url){
    if ($(this).length) {
        return $.ajax({
                 url: $.url(url), //server side url which returns json data 
                 dataType: 'json',
                 success: function(data){
                    barchart(render_to,data);
                 },
                 error: function(status, statustatusText, responses, headers){
                    alert('Oops error occured..');
                 }
        });
    }
}
})(jQuery);

Get the json output from the server side in the below format:

[["USER 1",44],["USER 2",20],["USER 3",15],["USER 4",11],["USER 5",4]]

plot the chart:

function barchart(render_to, data){
plot3 = $.jqplot(render_to, [data], {

    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: {
            fillToZero:true
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer
        }
    }
});
}

This should work. More info here