Диаграмма в JQuery или JavaScript

Question

Я получаю список пользователей из базы данных в jsp. У каждого пользователя есть поле с именем count. Я должен показать график [пирог и бар] для этого счета. Я ищу в сети найденные библиотеки для рисования диаграмм в javascript, но не добился успеха в их реализации, так как не знаю, как передать значения в диаграмму? Может ли любое тело порекомендовать хороший стиль для этого?

Примечание: - Любые предложения из библиотеки диаграмм js или jquery приветствуются, поскольку они бесплатны и коммерчески доступны. Гистограммы и круговые диаграммы более предпочтительны.

---

Edit: -

Я знаю, как рисовать графики с предопределенными данными. Но здесь данные не предопределены. Моя проблема в том, как я могу получить счет в js. Я получаю список пользователей в JSTL.

Как я могу получить счет для каждого пользователя в js?

Answer 1

Любое предложение для библиотеки js или jquery

Я предлагаю использовать JqPlot для рисования графика. Это простые и красивые графики.

Как я могу получить счет для каждого пользователя в js?

Вы можете легко использовать JSTL в javascript. Что вам нужно сделать, это просто зациклить свой список пользователей и добавить пару [username, usercount] в данные диаграммы в JavaScript. Пример кода может быть ...

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'
                   });
           });

Предполагая, что имя переменной счетчика равно userCount, а имя пользователя хранится в userName. Список, который вы получаете, называется userList.

HTML

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

Файлы должны быть включены в страницу

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

Answer 2

Вы можете попробовать Google Chart API (http://code.google.com/apis/chart/). Просто создайте URL-адрес соответствующим образом и укажите значения "count" в качестве параметров строки URL-адреса. Нет необходимости в JavaScript.

Но, я думаю, вашей главной проблемой является получение данных, доступных в jstl, для использования в javascript. Эта статья может вам помочь:

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

Просто использовал метод, описанный в этом блоге, для хранения информации о пользователе и подсчете в массиве javascript, а затем используйте его соответствующим образом.

Answer 3

Я настоятельно рекомендую Флот (http://code.google.com/p/flot/)

Answer 4

jQuery + jQplot должен служить вашей цели

Позвоните в Ajax из 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);

Получить вывод json со стороны сервера в следующем формате:

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

построение графика:

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

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

Это должно работать. Подробнее здесь

Answer 5

Я никогда не использовал это, но это кажется действительно хорошим:

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

Answer 6

Вы можете попробовать это http://people.iola.dk/olau/flot/examples/

Answer 7

Я бы предложил вам использовать открытую флеш-карту.Он имеет библиотеки почти на всех языках и использует flash для визуализации диаграмм.