JQchart выполняется до того, как ответ Ajax будет возвращен - PullRequest
Новая
       4

JQchart выполняется до того, как ответ Ajax будет возвращен

1 голос
/ 13 ноября 2011

Ниже приведен код, который я использую для вызова Ajax-запроса для привязки плагина jqchart.
здесь проблема в том, что jqchart вызывается до ответа от Ajax-вызова.

Пожалуйста, мне нужна помощь здесь: 

 $(document).ready(function () {
        var ajaxDataRenderer =
        function (url, plot, options) {
        var ret = null;
        $.ajax({
                type: "POST",
                async: false,
                url: url,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    ret = msg.d;

                },
                error: AjaxFailed
            });
            return ret;
        };            
        $('#jqChart').jqChart({
            series: [
                        {
                            type: 'line',
                            title: 'Series 1',
                            data: ajaxDataRenderer('TestService.asmx/getTotal')
                        }
                    ]
        });

        function AjaxFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }
    });

Я изменил свой код на, но все еще не работает: 

<script lang="javascript" type="text/javascript">
    $(document).ready(function () {            
        $.ajax({
            type: "POST",
            async: false,
            url: "TestService.asmx/getTotal",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert(msg.d);
                $('#jqChart').jqChart({

                    series: [
                        {
                            type: 'line',
                            title: 'Series 1',
                            data: msg.d
                        }
                    ]
                });
            },
            error: AjaxFailed
        });

        function AjaxFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }
    });
</script>

Это мои данные, полученные из ответа Ajax: 

[['Jan',0],['Feb',0],['Mar',21],['Apr',0],['May',0],['Jun',0],['Jul',5],['Aug',0],['Sep',0],['Oct',0],['Nov',0],['Dec',0]]

////////////////// Наконец //////////////////////////// // Спасибо за вашу помощь, я обнаружил, что данные, возвращенные с моего веб-метода, были не в правильном формате, то есть ([['jan', 62], ['feb', 60], ['mar', 68], [ 'apr', 58], ['may', 52], ['jun', 60], ['jul', 48], ['aug', 62], ['sep', 60], ['oct ', 68], [' nov ', 58], [' dec ', 100]]),

Теперь я изменил веб-метод так, чтобы он возвращал только точки данных в виде массива [т.е. a [0] = 62, a [1] = 60 .... и т. Д.], А не месяцев, и я устанавливаю месяцы в качестве оси x по умолчанию. значения, мой код ниже. 

<script lang="javascript" type="text/javascript">
    $(document).ready(function () {

        $.ajax({
            type: "POST",
            async: false,
            url: "TestService.asmx/getTotal",
            contentType: "application/json; charset=utf-8",
            dataType: "json",

            success: function (msg) {

                var c = [];
                var myarr = new Array();
                var j=0;
                for (var i = 0; i <= 11; ++i) {

                    c.push(msg.d[j + 1]);
                    j+=2;
                }

               $('#jqChart').jqChart({
                    axes: [
                    {
                        type: 'category',
                        location: 'bottom',
                        categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul','aug','sep','oct','nov','dec']
                    }
                  ],
                    series: [
                        {
                            type: 'line',
                            title: 'Series 1',
                            data: c
                        }
                    ]
                });
            },
            error: AjaxFailed 
        });

        function AjaxFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }
    });
</script>

/////////////////////////////////////////////// ////////////////////////////////////////////

Привет, Драган, спасибо, что предоставленные вами документы были очень полезны, я видел этот фрагмент ниже, вы можете дать мне знать, если я хочу пройти - [['jan', 20], ['feb', 10], ['mar', 25], ['jun', 26], ['jul', 15]] как возвращенные данные из моего ответа ajax на часть данных в приведенном ниже фрагменте. 

        $('#jqChart').jqChart({
          title: { text: 'Linear Axis' },
          axes: [
                  {
                      type: 'linear',
                      location: 'left',
                      minimum: 10,
                      maximum: 100,
                      interval: 10
                  }
               ],
          series: [{
                      type: 'column',
                      data: [['a', 70], ['b', 40], ['c', 85], 
                          ['d', 50], ['e', 25], ['f', 40]]
                  }]
      });

//////////////////////////////////////////////////////////////////////////////////////////

I have tried using as below, 
the msg is the array of length 24
 where msg.d[0] = 'jan' 
       msg.d[1] = 10 
       msg.d[2] = 'feb' 
       msg.d[3] = 20
             '
             '
             '
       msg.d[22] = 'dec'
       msg.d[23] = 50

//script is as below    



  var data = [];

    success:function(msg){

     var j=0;

     for (var i = 0; i <= 11; ++i) {
          data.push(msg.d[j],msg.d[j + 1]);
          j+=2;
     }

     $('#jqChart').jqChart({

         series: [
                    {
                        type: 'line',
                        title: 'Series 1',
                        data: data
                    }
                 ]
     });
}

The output i get is 

in y axis i get numbers from 1 to 100
& in x axis i get jan,feb,mar
the problem is there is no line graph only axis are displayed.

Ответы [ 3 ]

2 голосов
/ 13 ноября 2011

переместить jqChart в функцию обратного вызова ajax 

$(document).ready(function () {
            $.ajax({
                type: "POST",
                async: false,
                url: url,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {                  
                   $('#jqChart').jqChart({
                       series: [
                        {
                            type: 'line',
                            title: 'Series 1',
                            data: msg.d
                        }
                    ]
                 });

                },
                error: AjaxFailed
            });
            return ret;
        };

        function AjaxFailed(result) {
            alert(result.status + ' ' + result.statusText);
        }
    });
0 голосов
/ 15 ноября 2011

Попробуйте этот фрагмент кода: 

var data = msg.d;
var chartData = [];

for (var i = 0; i < data.length; i += 2) {
    var item = [data[i], data[i + 1]];        
    chartData.push(item);
}

$('#jqChart').jqChart({

    series: [
                {
                    type: 'line',
                    title: 'Series 1',
                    data: chartData
                }
             ]
});
0 голосов
/ 13 ноября 2011

Перемещение jqChart в коллбэк успеха является правильным способом.Я просто пробую этот подход, и он работает.

Возможно, если вы отправите мне (dragan.matek@jqchart.com) пример проекта, мы сможем лучше его рассмотреть.

...