Cannot read property 'DataTable' of undefined

Question

The following function throws an error when called in document ready with jQuery:

searchCity:function(){

    var map = this.map,
        markers = [],
        input = document.getElementById('pac-input'),
        dataTable;

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var searchBox = new google.maps.places.SearchBox(input);

    google.maps.event.addListener(searchBox, 'places_changed', function() {

        var places = searchBox.getPlaces(),
            apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            url = 'https://api.forecast.io/forecast/',
            lati = places[0].geometry.location.B,
            longi = places[0].geometry.location.k,
            data,
            city = $('.city'),
            summary = $('.summary');

            console.log(places);

        $.getJSON(url + apiKey + "/" + lati + "," + longi + "?callback=?", function(data) {


            console.log(data);

            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('string', 'hours');
            dataTable.addColumn('number', 'temperature');

            for(var i=0; i<data.daily.data.length; i++){

                  // dataTable.addColumn({type: 'string', role: 'annotation'});
                  dataTable.addRows([
                    ['0'+i,  data.daily.data[i].temperatureMax]
                  ]);
            }

          // Load the Visualization API and the piechart package.
          // google.load('visualization', '1.0', {'packages':['corechart'], callback: weatherAPP.generateGraph});
            var options = { tooltip: {isHtml: true}};
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(dataTable, options);

            city.html('');

            setTimeout( function(){ 
                weatherAPP.slideToCloseSearch();
            }, 500 );

            city.html('').html(places[0].formatted_address);
            summary.html('').html(data.daily.summary);

            if(data.currently.icon = 'clear-day'){
                $('.iconHolder').addClass('icon-sun');
            }
            else if(data.currently.icon = 'rain'){
                $('iconHolder').addClass('icon-rainy');
            }

            $('.temperature').html(data.currently.temperature+ ' <span>F</span>');

            weatherAPP.generateRainVisualEffect();

        });

        if (places.length == 0) {
            return;
        }
        for (var i = 0, marker; marker = markers[i]; i++) {
            marker.setMap(null);
        }

        // For each place, get the icon, place name, and location.
        var bounds = new google.maps.LatLngBounds();

        for (var i = 0, place; place = places[i]; i++) {
            var image = {
                url: 'pin.png'
            };

            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                title: place.name,
                position: place.geometry.location
            });

            markers.push(marker);

            bounds.extend(place.geometry.location);
        }

        map.fitBounds(bounds);

    }); // places_changed

    // Bias the SearchBox results towards places that are within the bounds of the
    // current map's viewport.
    google.maps.event.addListener(map, 'bounds_changed', function() {
        map.setZoom(6);
        var bounds = map.getBounds();
        searchBox.setBounds(bounds);
    });

},

$(document).ready(function(){

     weatherAPP.displayTime();

    weatherAPP.generateMap();

    $('.boom').on('click', function(){

        if(mainWrapper.hasClass(animateLeft)){
            weatherAPP.slideToCloseSearch();
        }else{
            weatherAPP.slideToSearch();
        }

    });

    weatherAPP.searchCity();

});

ERROR: Cannot read property 'DataTable' of undefined

Howard Renollet · Accepted Answer · 2014-10-29 20:29:41Z

2

The error itself is quite self-explanatory. You cannot obtain a property of an undefined object. So, it's telling you that in this line:

var dataTable = new google.visualization.DataTable();

Either google or google.visualization is undefined

Not seeing the rest of your code, I can only guess as to what is causing the problem, but my assumption would be that either the Google Visualization API isn't loaded. Another possibility is that google or google.visualization aren't available in the global namespace for some reason. These would be the two places I would start.

I see that you have a commented section in your code that looks like its intent would be to load the Google Visualization API? https://developers.google.com/loader/

// Load the Visualization API and the piechart package.
// google.load('visualization', '1.0', {'packages':['corechart'], callback: weatherAPP.generateGraph});

If that's the call that's supposed to load the API, then uncomment it and move it above your DataTable definition.

If you still can't figure out what's causing the problem, please post more code so I can look at it in greater detail.

answered Oct 29, 2014 at 20:29

Howard Renollet

4,7392 gold badges26 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Howard Renollet Over a year ago

@Alex - could I see the HTML as well, so I can see which JavaScript libraries are being loaded? Thanks!

Salad.Guyo · Accepted Answer · 2020-04-08 12:10:06Z

2

Google chart on Angular 9

I had a similar error, my problem was how I did call drawChart method on setOnLoadCallback.

google.charts.load('current', {'packages':['line']});  
//this was incorrect
//google.charts.setOnLoadCallback(this.drawChart());
google.charts.setOnLoadCallback(this.drawChart.bind(this));

answered Apr 8, 2020 at 12:10

Salad.Guyo

3,4911 gold badge34 silver badges34 bronze badges

Comments

reflexgravity · Accepted Answer · 2020-02-26 10:28:37Z

1

This error occurs due to following,

Google Visualization library is not loaded
By just naming the callback function (e.g. just drawChart), you are passing in a reference to that function.

So if you want to pass parameters to your drawChart function, you need to wrap that call in another function declaration, like this:

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

edited Feb 26, 2020 at 10:28

reflexgravity

97010 silver badges17 bronze badges

answered Feb 26, 2020 at 9:52

Komaleswari C

111 bronze badge

Collectives™ on Stack Overflow

Cannot read property 'DataTable' of undefined

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related