title: JQchart executing before ajax response is returned
body: <p>Below is the code that i use for calling Ajax request for binding the jqchart plugin.<br>
  here the problem is the jqchart is called before there is a response from the Ajax call.</p>
  
  <p>Please I need help here:</p>
  
  <pre><code> $(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);
          }
      });
  </code></pre>
  
  <p>I have changed my code to,but still not working:</p>
  
  <pre><code>&lt;script lang="javascript" type="text/javascript"&gt;
      $(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);
          }
      });
  &lt;/script&gt;      
  </code></pre>
  
  <p>This is my data returned from the Ajax response:</p>
  
  <pre><code>[['Jan',0],['Feb',0],['Mar',21],['Apr',0],['May',0],['Jun',0],['Jul',5],['Aug',0],['Sep',0],['Oct',0],['Nov',0],['Dec',0]]
  </code></pre>
  
  <p>//////////////////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]]), </p>
  
  <p>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.</p>
  
  <pre><code>&lt;script lang="javascript" type="text/javascript"&gt;
      $(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 &lt;= 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);
          }
      });
  &lt;/script&gt; 
  </code></pre>
  
  <p>///////////////////////////////////////////////////////////////////////////////////////////</p>
  
  <p>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.</p>
  
  <pre><code>        $('#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 &lt;= 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
  &amp; in x axis i get jan,feb,mar
  the problem is there is no line graph only axis are displayed.
  </code></pre>