title: Why does my javascript ajax call have the data it needs but google charts doesn't
body: <p>This is a broad question so I will try to make it as narrow as possible. I have an ajax call method to load data from my server. The call works fine and gets the data. I have verified the data is available. This is done in the head of the web page. I have another method in the bottom of the page that draws a google column chart based on the data in the loaded in the ajax call. The problem is that the google charts method doesn't always have the data even though it is being loaded in the ajax call. Anyone seen this problem before? I have even went as far as to place a 2 second pause thinking that the google chart was just loading first, but it turns out that this is not the case. The caveat to this is that if I reload the page I get the data in the chart every time without fail.</p>
  
  <p>Ajax call </p>
  
  <pre><code>var graphData = new Array();
  var flag = false; 
  var ajaxCall = function(){ 
      $.ajax({ 
          type: "GET",
          dataType: "json",
          url: "service/getGraphicalData",
          success: function(data) 
          {
              var indexNum = 0;
              $(data).each(function (index){
                  var newDataArr = [data[index].date, data[index].hitCount,     data[index].leadCount];
                  graphData[indexNum] = newDataArr;
                  indexNum++;
                  flag = true;
              });
              console.log("GData 1: " + graphData);
          }
      });  
  };
  ajaxCall(); &lt;-- I make the call directly after the method declaration in the head of the page...
  </code></pre>
  
  <p>The google chart code....
      setTimeout(google.load('visualization', '1', {packages: ['corechart', 'bar']} google.setOnLoadCallback(drawAnnotations))},2000); &lt;-- put a two second pause on the calling of this method to see if it helped but no luck this is called at the foot of the page just before the  tag</p>
  
  <pre><code>        function drawAnnotations() {
              console.log("GData 2: " + graphData);
               var chartData = new google.visualization.DataTable(); 
               chartData.addColumn('string', 'Day');
               chartData.addColumn('number', 'Hits');
               chartData.addColumn('number', 'Leads');
  
               /* chartData.addRows([
                      ["2015-03-17", 16, 14],
                      ["2015-03-17", 12, 10],
                      ["2015-03-17", 15, 13],
                      ["2015-03-17", 17, 14],
                      ["2015-03-17", 22, 21],
                  ]); */
                chartData.addRows(graphData);
                var options = {
                  title: 'Traffic Incoming Versus Leads Gained',
                  annotations: {
                    alwaysOutside: true,
                    textStyle: {
                      fontSize: 14,
                      color: '#000',
                      auraColor: 'none'
                    }
                  },
                  hAxis: {
                    title: 'Date'                       
                  },
                  vAxis: {
                    title: 'Total Leads And Hits'
                  },
                  series: { 0: {color: '#d3d3d3'}, 1: {color: '#FF6600'} }
                };
  
                var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
                setTimeout(function(){chart.draw(chartData, options)},2000);
           }
  </code></pre>
  
  <p>Any help would be greatly appreciated... thanks</p>
  
  <p>UPDATE</p>
  
  <p>new src code:</p>
  
  <pre><code>var ajaxCall = function(){ 
  
      $.ajax({ 
          type: "GET",
          dataType: "json",
          url: "/service/getGraphicalData",
          success: function(data) 
          {
              var indexNum = 0;
  
              $(data).each(function (index){
                  var newDataArr = [data[index].date, data[index].hitCount, data[index].leadCount];
                  graphData[indexNum] = newDataArr;
                  indexNum++;
                  flag = true;
              });
  
              google.load('visualization', '1', {packages: ['corechart', 'bar']});
              drawAnnotations ( graphData );
  
              console.log("GData 1: " + graphData);
          }
      });  
  };
  ajaxCall();
  </code></pre>
  
  <p>Okay so I have updated my code to look like this, I am still calling ajax call but I keep getting a google.visualization.DataTable() is not a method after moving it into the success portion of the call, I feel like it is losing the available library for the src call but that doesn't make sense</p>
  
  <p>I found this link <a href="https://stackoverflow.com/questions/2315250/jquery-load-google-visualization-api-with-ajax">here</a> when trying to see if anyone else has had this problem, I made the modifications as he suggested to this </p>
  
  <pre><code>var ajaxCall = function(){ 
      google.load('visualization', '1', {packages: ['corechart', 'bar']});
      $.ajax({ 
          type: "GET",
          dataType: "json",
          url: "/service/getGraphicalData",
          success: function(data) 
          {
              var indexNum = 0;
  
              $(data).each(function (index){
                  var newDataArr = [data[index].date, data[index].hitCount, data[index].leadCount];
                  graphData[indexNum] = newDataArr;
                  indexNum++;
                  flag = true;
              });
  
  
              google.setOnLoadCallback(drawAnnotations ( graphData ));
  
              console.log("GData 1: " + graphData);
          }
      });  
  };
  ajaxCall();         
  </code></pre>
  
  <p>but then got the same error again... which results in the chart not loading. am I missing something, </p>
  
  <p>GOT IT!!!!! </p>
  
  <p>found a similar error <a href="https://groups.google.com/forum/#!topic/google-visualization-api/sk39mXZZ15U" rel="nofollow noreferrer">here</a>. Apparently the answer to this debacle is that the   </p>
  
  <pre><code>google.setOnLoadCallback 
  </code></pre>
  
  <p>expects you to give it a function not call a function so the call to</p>
  
  <pre><code> drawAnnotations( graphData ) 
  </code></pre>
  
  <p>needs to be wrapped in a </p>
  
  <pre><code>function() { drawAnnotations ( graphData ) } 
  </code></pre>
  
  <p>such as this</p>
  
  <pre><code>google.setOnLoadCallBack(function() { drawAnnotations ( graphData ) });
  </code></pre>
  
  <p>So the new methodology should look as such:</p>
  
  <pre><code>function drawAnnotations(graphInfo) {
      console.log("GData 2: " + graphData);
       var chartData = new google.visualization.DataTable(); 
       chartData.addColumn('string', 'Day');
       chartData.addColumn('number', 'Hits');
       chartData.addColumn('number', 'Leads');
  
        chartData.addRows(graphInfo);
        var options = {
          title: 'Traffic Incoming Versus Leads Gained',
          annotations: {
            alwaysOutside: true,
            textStyle: {
              fontSize: 14,
              color: '#000',
              auraColor: 'none'
            }
          },
          hAxis: {
            title: 'Date'                       
          },
          vAxis: {
            title: 'Total Leads And Hits'
          },
          series: { 0: {color: '#d3d3d3'}, 1: {color: '#FF6600'} }
        };
  
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        setTimeout(function(){chart.draw(chartData, options)},2000);
   }
  var graphData = new Array();
  var flag = false; 
  var ajaxCall = function(){ 
      google.load('visualization', '1', {packages: ['corechart', 'bar']});
      $.ajax({ 
          type: "GET",
          dataType: "json",
          url: "/service/getGraphicalData",
          success: function(data) 
          {
              var indexNum = 0;
  
              $(data).each(function (index){
                  var newDataArr = [data[index].date, data[index].hitCount, data[index].leadCount];
                  graphData[indexNum] = newDataArr;
                  indexNum++;
                  flag = true;
              });
  
  
              google.setOnLoadCallback(function(){drawAnnotations ( graphData );});
  
              console.log("GData 1: " + graphData);
          }
  
      });  
  };
  ajaxCall();
  </code></pre>