JQchart executing before ajax response is returned

Question

Below is the code that i use for calling Ajax request for binding the jqchart plugin.
here the problem is the jqchart is called before there is a response from the Ajax call.

Please I need help here:

 $(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);
        }
    });

I have changed my code to,but still not working:

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

This is my data returned from the Ajax response:

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

//////////////////Finally////////////////////////////// Thankyou for all your help i found that the data returned from my webmethod was not in the correct format i.e it was([['jan', 62], ['feb', 60], ['mar', 68], ['apr', 58], ['may',52],['jun', 60], ['jul', 48],['aug', 62], ['sep', 60], ['oct', 68], ['nov', 58], ['dec',100]]),

Now i have changed the webmethod to only return the datapoints as array [i.e a[0]=62,a[1]=60....so on] and no months and i am setting months as default x axis values, my code is below.

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

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

hi dragan, thankyou these documents you provided was very helpful, i saw this snippet below can you let me know suppose i want to pass - [['jan',20],['feb',10],['mar',25],['jun',26],['jul',15]] as data returned from my ajax response to the data part in below snippet.

        $('#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.

score 2 · Accepted Answer · answered Nov 13 '11 at 15:08

move the jqChart inside the success callback of the 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);
        }
    });

what is not working? are you getting any errors in the firebug? — Rafay, Nov 13 '11 at 16:59

score 0 · Answer 2 · answered Nov 13 '11 at 16:44

0

Moving the jqChart inside the success callback is the correct way. I’m just trying this approach and it is working.

Probably if you send me (dragan.matek@jqchart.com) a sample project, we can look better at it.

answered Nov 13 '11 at 16:44

Dragan Matek

507
1
3
6

hi dragan matek, can you let me now how to default the default axis points to 0 , in my case when all the values are zero the axis shows negative values & how to change the color of the line chart from blue to any other color, i am even facing problem using more than one chart in IE (i.e is only 1 is being displayed others are not visible) this is not the case in mozilla – Pakauji Pakau Nov 13 '11 at 19:05
You can set the axis to points to 0 with setting axis minimum to 0. See our help: http://www.jqchart.com/documentation/userguide/default.aspx#&who=LinearAxis In the last example on this page is shown how to change the line appearance http://www.jqchart.com/documentation/userguide/default.aspx#&who=LineCharts It's strange that only one chart is displayed. Do your charts have unique ids (jqChart1, jqChart2)? – Dragan Matek Nov 13 '11 at 20:01
hi dragan, thankyou these documents you provided was very helpful, can u can check my latest post...... – Pakauji Pakau Nov 14 '11 at 16:24

Dragan Matek · Answer 3 · 2011-11-18T17:52:20.857

0

Try this code snippet:

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

edited Nov 18 '11 at 17:52

answered Nov 15 '11 at 16:23

Dragan Matek

507
1
3
6

JQchart executing before ajax response is returned

3 Answers3