CODEWITHSUNDEEP
javascripthtml
user2193632
user2193632

Reputation: 311

javascript not executing in html

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>

Upvotes: -1

Views: 331

Answers (5)

Mike Christensen
Mike Christensen

Reputation: 91590

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.

Upvotes: 1

Fueled By Coffee
Fueled By Coffee

Reputation: 2559

You need to load the Google JS before your own JS

Upvotes: 1

Quentin
Quentin

Reputation: 943143

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.

Upvotes: 1

j08691
j08691

Reputation: 207861

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

Upvotes: 1

john Smith
john Smith

Reputation: 17906

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

Upvotes: 1

Related Questions