javascript not executing in html

Question

I'm using the Google javascript function to try to make a pie chart. It works fine as a fiddle: http://jsfiddle.net/qb8av4td/.

But when I copy it into my own webpage, it doesn't work. I'll I'm doing is adding <script type="text/javascript"> and </script> around the javascript section. It's easier if I can put both of the two script sections in the body, but I've tried the conventional head/body approach as well, and I can't get it to execute. The problem is the same on two browsers, and java is working elsewhere on my site. What have I done to prevent it from executing here? Thanks!

<html>
<head>

 <script type="text/javascript">

      google.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Truth or Falsity', 'Judgment!'],
          ['True',     28],
          ['False',     8],
          ['Partly True, Partly False',  69],
          ['N/A', 13],
        ]);

        var options = {
          title: 'The True Science of "Ithaca"'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }

      </script>

</head>
<body>

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
       <div id="piechart" style="width: 400px; height: 300px;"></div>

 </body>
 </html>

Are there any errors in your developer tools? Which browsers are you using? — Jonast92
– Jonast92, Commented Aug 26, 2014 at 16:07
are you loading the js in the same order as in the fiddle? Open console (hit f12 in your browser, reload the page), do you see any errors? The google.com script tag needs to load first then you can execute your script. — scrappedcola
– scrappedcola, Commented Aug 26, 2014 at 16:07
You need to add the script to external resources and then click in head instead of in body jsfiddle.net/mplungjan/n9r0unnh — mplungjan
– mplungjan, Commented Aug 26, 2014 at 16:28

john Smith · Accepted Answer · 2014-08-26 16:06:52Z

you have the wrong order

you must first include the google script library

and then call functions of it

so first :

 <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>

and then :

<script type="text/javascript">

  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Truth or Falsity', 'Judgment!'],
      ['True',     28],
      ['False',     8],
      ['Partly True, Partly False',  69],
      ['N/A', 13],
    ]);

    var options = {
      title: 'The True Science of "Ithaca"'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }

  </script>

so its upto you to put it in head or body, only important thing is to load the library before you execute functions included in the library,

best approach for my opinion is to put both right before the closing body tag

  script library
  script your script depending on library
</body

j08691 · Accepted Answer · 2014-08-26 16:06:57Z

1

You need to place your JavaScript after the Google JavaScript library.

answered Aug 26, 2014 at 16:06

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

Quentin · Accepted Answer · 2014-08-26 16:07:07Z

1

You are calling google.setOnLoadCallback in the first script element, but you don't define it first. Presumably that is handled by the second script element. You need to define google before you try to call methods on it.

answered Aug 26, 2014 at 16:07

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Fueled By Coffee · Accepted Answer · 2014-08-26 16:07:46Z

1

You need to load the Google JS before your own JS

answered Aug 26, 2014 at 16:07

Fueled By Coffee

2,5797 gold badges33 silver badges45 bronze badges

Comments

Mike Christensen · Accepted Answer · 2014-08-26 16:08:09Z

1

I would guess it's because you're running the line:

google.setOnLoadCallback(drawChart);

before you've actually loaded the script:

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>

At the time your code runs, google is undefined. You'll want to move the <script> tag up to the top of the head, above your code.

answered Aug 26, 2014 at 16:08

Mike Christensen

91.8k52 gold badges223 silver badges349 bronze badges

Collectives™ on Stack Overflow

javascript not executing in html

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related