How to load google chart using ajax and jquery?

Question

So my situation is following:

I have a page that creates a google chart where I place the graph in div as an example in here https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

That works fine if I get that page to the other page by using iframe as

<iframe id="mychart" name="mychart" src="stuff/chart.html" 
frameborder="0"  onLoad=autoResize("mychart");></iframe>

but I would like to get it by using ajax.

I've tried following

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

<script type="text/javascript">
$(document).ready(function() {
google.setOnLoadCallback(function() {
    $.ajax({type: 'get', format: 'html', timeout: 9000, url: 'stuff/chart.html', success:
        function (data) {
        console.log(data);
            $('#mychart').html(data);
            var result = $(data).filter('#chart_div');
            console.log(result.html());
            $('#mychart').html(result.html());
        }});
});
});
</script>

Where the first log shows the html code as wanted but when logging the actual div that would contain the google chart I would like to show the result variable seems to be empty.

Here's outlined chart.html. I did take a lot of unrelated code off but you should get the idea.

<html>
    <head>
    <script type="text/javascript">
    //Load the AJAX API
    // Load the Visualization API

    function drawChart() {
        // Took out a lot of stuff
        var data = new google.visualization.DataTable(jsonData);
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

        chart.draw(data, {
            // Setting up parameters
        });
    }
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

    </script>
  </head>

  <body>
    <!--Div that will hold a chart-->
    <div id="chart_div"></div>
  </body>
</html>

I did check google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?

and a few other topics.

So is there a way to load the google chart in this way or should I just use iframe ? Since I guess what happens that other chart never got created or something ?

Thanks in advance!

Ok - what is your goal in loading the chart HTML via AJAX? Is it just to get data or are there other differences that can show up in the HTML? — asgallant, Sep 04 '13 at 21:39
I would like to show the generated chart on the other page as an example in mypage.html which will contain another data and bunch of these graphs. where loading the graphs would happen via ajax instead of html. Main reason for that is the fact I'm using twitterbootsrap and iframes doesn't scale on mobile devices so I thought if I do this by using ajax I could apply different bootstrap css styles and make those scale depending on the used device. — Maree, Sep 05 '13 at 11:17

score 1 · Answer 1 · edited Dec 05 '20 at 01:25

Try this -

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);

var jsonData = $.ajax({
  type: "POST",
  dataType: "json",
  url: 'stuff/chart.html',
  async: false
}).responseText;

var data = new google.visualization.DataTable(jsonData);

var options = {
  title: 'TITLE HERE',
  height: 550,
  width: 1100,
  curveType: 'function',
  legend: { position: 'bottom' }
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

chart.draw(data, options);

And json response should be like - https://developers.google.com/chart/interactive/docs/reference#dataparam

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

OKay it seems the issue was with loading javascript on the other page. After awhile I found this Loading Google Visualisations via Ajax

and used jquery load instead of ajax get and now it works as I wanted.

edited May 23 '17 at 11:52

Community

1
1

answered Sep 05 '13 at 13:09

Maree

31
1
1
5

How to load google chart using ajax and jquery?

2 Answers2