CODEWITHSUNDEEP
firefoxgoogle-apigoogle-visualization
Mohammad
Mohammad

Reputation: 3547

google charts: google is not defined

I am trying to use the google charts on firefox, the problem is the google api is not loaded successfully on firefox only ReferenceError: google is not defined

here is my code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    function LoadGoogle(){
        if(typeof google != 'undefined' && google && google.load){
            google.charts.load('current', {'packages':['corechart']});

              // Set a callback to run when the Google Visualization API is loaded.
              google.charts.setOnLoadCallback(drawChart);

              // Callback that creates and populates a data table,
              // instantiates the pie chart, passes in the data and
              // draws it.
              function drawChart() {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
              ['Mushrooms', 3],
              ['Onions', 1],
              ['Olives', 1],
              ['Zucchini', 1],
              ['Pepperoni', 2]
            ]);

            // Set chart options
            var options = {'title':'How Much Pizza I Ate Last Night',
                           'width':400,
                           'height':300};

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, options);
          }
        }
        else
        {
            console.log("try");
            setTimeout(LoadGoogle, 30);
        }
    }

    LoadGoogle();
</script>

Upvotes: 4

Views: 9140

Answers (2)

Carlos Corte
Carlos Corte

Reputation: 1

You have to copy the URL https://www.gstatic.com/charts/loader.js and put the url in the browser, click right and save as file.js save the both files in your project, just make a referneces the files in your html

Upvotes: -1

WhiteHat
WhiteHat

Reputation: 61275

first, remove the reference to jsapi, as stated in the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader (loader.js) from now on.

next, remove the "validation" if statement from LoadGoogle, this shouldn't be needed and would need to change due to removing jsapi

the following snippet works for me in Firefox ESR, v: 45.3.0 

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

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
}

LoadGoogle();
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions