CODEWITHSUNDEEP
c#jquerygoogle-visualization
j4m4l
j4m4l

Reputation: 328

Google charts not working with jquery load function

I am using Google charts api to draw a table chart.
I am making an ajax call using jquery in this way - 

$('#table_div').load('getAnalysis.aspx');

Here I am populating <div id=table_div"></div> using load function of jquery.
Now getAnalysis.aspx returns following html text - 

<div id="iqr_table"></div>
<script type='text/javascript'>
    google.load('visualization', '1', { packages: ['table'] });
    google.setOnLoadCallback(iqr_drawTable);
    function iqr_drawTable() {
      var iqr_data = new google.visualization.DataTable();
      iqr_data.addColumn('string', 'Q #');          
      iqr_data.addColumn('string', 'My Answer');
      iqr_data.addColumn('string', 'Correct Answer');
      iqr_data.addRows([
    ['1', 'A', 'C', ],
    ['2', '', 'C,D', ],
    ['3', 'C', 'C', ],
    ['4', 'D', 'D', ],
    ['5', 'C,D', 'A,B', ],
   ]);

      var table = new google.visualization.Table(document.getElementById('iqr_table'));
      table.draw(iqr_data, { showRowNumber: true });
}
</script>

I have checked using google chrome built in developer tool that ajax call is made properly and html text is correctly received, also <script> tag in received content is evaluated.

But immediately after evaluation of <script> tag something goes wrong, and <body> is removed from page and nothing is displayed.
I don't understand where is the mistake.

P.S : I have included all required script files in main page, so please don't point that.

Upvotes: 1

Views: 2401

Answers (2)

j4m4l
j4m4l

Reputation: 328

Figured it out - Google API said to initialize the load first off. So maybe keep the google.load function out of the AJAX fetched script, 

google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 

$(document).ready(function(){               
// Get TIER1Tickets                 
$('#table_div').load('getAnalysis.aspx');

and what i get from getAnalysis.aspx is this (asuming that google is already initialized and package is loaded) - 

<div id="iqr_table"></div>
<script type='text/javascript'>    
  var iqr_data = new google.visualization.DataTable();
  iqr_data.addColumn('string', 'Q #');          
  iqr_data.addColumn('string', 'My Answer');
  iqr_data.addColumn('string', 'Correct Answer');
  iqr_data.addRows([
  ['1', 'A', 'C', ],
  ['2', '', 'C,D', ],
  ['3', 'C', 'C', ],
  ['4', 'D', 'D', ],
  ['5', 'C,D', 'A,B', ],   

  var table = new google.visualization.Table(document.getElementById('iqr_table'));
  table.draw(iqr_data, { showRowNumber: true });
}

Upvotes: 0

Parth Thakkar
Parth Thakkar

Reputation: 5475

All right, the problem is in the script:

<script type='text/javascript'>
    google.load('visualization', '1', {
        packages: ['table']
    });
    google.setOnLoadCallback(iqr_drawTable);

    var iqr_data = { }; // define it here.

    function iqr_drawTable() {
        /*var*/ iqr_data = new google.visualization.DataTable(); // iqr_data is defined here.
        iqr_data.addColumn('string', 'Q #');
        iqr_data.addColumn('string', 'My Answer');
        iqr_data.addColumn('string', 'Correct Answer');
        iqr_data.addRows([
            ['1', 'A', 'C', ],
            ['2', '', 'C,D', ],
            ['3', 'C', 'C', ],
            ['4', 'D', 'D', ],
            ['5', 'C,D', 'A,B', ], ]);

        var table = new google.visualization.Table(document.getElementById('iqr_table'));
        table.draw(iqr_data, {    // and isn't available here.
            showRowNumber: true
        });
    }
</script>

Although I don't know why does the <body> need to get removed from the page...but this was the problem i could notice...

Upvotes: 1

Related Questions