Html- Google is not defined

Question

I am trying to visualize some data on timeline using HTML and JAVASCRIPT. My Javascript looks like

gline = [ ['Month','umich.edu','indiana.edu','ucdavis.edu','berkeley.edu','ufp.pt','columbia.edu','uct.ac.za','mac.com','gmail.com','virginia.edu'],
['2005-12',57,12,11,12,10,13,14,12,10,9],
['2006-01',114,32,37,33,32,28,27,14,23,21],
['2006-02',16,6,1,3,3,3,3,12,4,5]
];

and Html looks like

<html>
<head>
<script type="text/javascript" src="gline.js"></script>
<script src="https://www.google.com/jsapi"   type="text/javascript"></script>
<script type="text/javascript">

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable( gline );
     var options = {
      title: 'Sakai Developer Email Participation by Organization',
      chartArea: {left:'10%',top:'10%', width: '65%', height: '65%'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
</head>
<body>
<div id="chart_div" style="width: 1300px; height: 600px;"></div>
</body>
</html>

When i run this HTML code then, I got this error

Uncaught ReferenceError: google is not defined
24/03/2021, 10:08:19 /gline.htm:11:7

Please help me to solve this error.

Google's script hasn't been loaded before your JS runs. On your script tag can you add `onload=customCode()` and then wrap your custom JS in a function called `customCode`? — Justin Feakes, Mar 24 '21 at 04:47
Does this answer your question? [Google Maps API throws "Uncaught ReferenceError: google is not defined" only when using AJAX](https://stackoverflow.com/questions/14229695/google-maps-api-throws-uncaught-referenceerror-google-is-not-defined-only-whe) — kelvin, Mar 24 '21 at 04:50
I have read that post and also tried but it is showing same error — Navneet Kaur, Mar 24 '21 at 05:24

score 1 · Accepted Answer · answered Mar 24 '21 at 06:56

Wrapping your javascript code in function
Add onload event handler to jsapi script tag

and that should do the trick.

<html>
<head>
    <script type="text/javascript" src="new.js"></script>
    <script type="text/javascript">
        function useGoogle(){
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable( gline );
                var options = {
                    title: 'Sakai Developer Email Participation by Organization',
                    chartArea: {left:'10%',top:'10%', width: '65%', height: '65%'}
                };

                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, options);
              }
        }
    </script>
    <script src="https://www.google.com/jsapi"   onload="useGoogle()" type="text/javascript"></script>
</head>
<body>
    <div id="chart_div" style="width: 1300px; height: 600px;"></div>
</body>
</html>

Html- Google is not defined

1 Answers1