problem with script from external js file

Question

I'm trying to move this part of html code to js file, and call it in my html with, for example, onload function, but its not working, i never done it before, and I don't understand it in 100%. I was trying to convert below code to function in external file and call it in html but it fail, i want move it to js file and create few different types of chart, its looking rly bad in html file... or maybe someone know better and easier way to put some interesting charts to my html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>

do i have to include that part to my js file or can it stay in html head??

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

I will be grateful for your help

Answer 1

I'm assuming that you are not using a build tool like gulp or webpack and simply uploading your files to a static file server.

In this case you can move the part inside the second script tag to a separate file e.g. mycharts.js. You then have to include the the file with a <script src="mycharts.js" defer></script> tag. Leave in the first script tag.

See also https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#external_javascript.

This setup will suffice for simple webpages with just a bit of javascript. For more complicated pages I suggest you to look at build tools.