Question

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?

Answer 1

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]-->