Uncaught ReferenceError: google is not defined (Google Chart)

Question

I'm new to require.js . I'm trying to display Google Pie Chart. I be able to get it working in my JSFiddle .

---

Issue

Then, when I move them into my real project, it doesn't work. My real project using require.js

In my path, I declare it like this

'piechart' : 'reports/section-exercise/piechart',

In my piechart.js , I have it like this :

'use strict';

define(['jquery' ], function ($) {

  $(function () {

    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['l', 23],
        ['m', 30],
        ['h', 47],

        ]);

      var options = {
        width: 200,
        height: 200,
        chartArea: {
          left: 10,
          top: 20,
          width: "100%",
          height: "100%"
        },
        colors: ['#F46E4E', '#ADB55E', '#F9C262'],
        legend: 'none',
        enableInteractivity: false,
        pieSliceText: 'none',

      };

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

      chart.draw(data, options);
    }

  });

});

---

include

I included this link on top of my HTML file

 <link rel="stylesheet" type="text/css" href="https://www.google.com/jsapi?autoload={%27modules%27:[{%27name%27:%27visualization%27,%27version%27:%271.1%27,%27packages%27:[%27corechart%27]}]}">

---

Result

---

Error Message

Then, when I clicked on the file on the right, it re-direct me to this line :

---

How do I stop that error and make my chart display again ?

How is my include link ? I used the same one in JSFiddle as external resources and it works.

Answer 1

You need to include that URL as JavaScript, but you're including it as CSS. You need this:

<script src="..."></script>

rather than this:

<link rel="stylesheet" type="text/css" href="...">