Load google charts from external JS file

1,052 views
Skip to first unread message

Ella Sherilyn Ramos

unread,
Jun 7, 2018, 11:28:57 PM6/7/18
to Google Visualization API
I am having trouble displaying google charts from an external JS script, inline script on my HTML works. 

I called the loader on the <head> of my HTML file.

<head>


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



</head>

And then I have an external JS file (app.js) being loaded as well on my HTML file. This is the content. 

$(function() {
  google.charts.load('current', {packages: ['corechart']});
  google.setOnLoadCallback(drawLineChart);


  function drawLineChart(values, labels){
      // Define the chart to be drawn.
    var data = new google.visualization.DataTable();




    var speed = values.speed;
    var soc = values.soc;
    var dataArray = [];


    for (i=0;i<labels.length;i++){
      var tempArray = []
      tempArray.push(new Date(labels[i]))
      tempArray.push(speed[i])
      tempArray.push(soc[i])
      dataArray.push(tempArray)
    }


    console.log(dataArray);
    data.addColumn('datetime', 'Time of Day');
    data.addColumn('number', 'Speed');
    data.addColumn('number', 'SOC');
    data.addRows(dataArray);


    var options  = {
      legend: { position: 'top', maxLines: 3 }
    }


    // Instantiate and draw the chart.
    var chart = new google.visualization.LineChart(document.getElementById("lineChart"));
    console.log("chart: ", chart);
    chart.draw(data, options);
}

});


It gives me this error.

jQuery.Deferred exception: google.setOnLoadCallback is not a function TypeError: google.setOnLoadCallback is not a function

Any idea how to load it properly? 

Thank you. 

  

Daniel LaLiberte

unread,
Jun 8, 2018, 10:11:44 AM6/8/18
to Google Visualization API
You need to change google.setOnLoadCallback to google.charts.setOnLoadCallback.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/ebd21b81-4fa4-4ae4-8b4c-cc3d0bb7690d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--

Ella Sherilyn Ramos

unread,
Jun 12, 2018, 10:13:28 PM6/12/18
to Google Visualization API
this works, thank you!
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.


--
Reply all
Reply to author
Forward
0 new messages