Google Geochart Google.Visualization.Datatable is not a constructor

Question

I've been going nuts trying to figure out why my Geochart isn't displaying. I searched all over google and none of the solutions to similar questions have worked for me.

I tried adding an alert box right before the line that is erroring and displaying the json data, and I can see that there is data in it.

Any tips would be greatly appreciated.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['geochart']});
        google.charts.setOnLoadCallback(getDataForMap);

        function getDataForMap() {

           $.ajax({
                type: "POST",
                url: "myWebService.asmx/getJSONData",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                timeout:600,
                error: function (xhr, textStatus, error) {
                    alert("Error: " + error)
                },
                complete:function(response)
                {
                    var data = new google.visualization.DataTable(response);
                    //THIS IS WHERE IT ALWAYS STOPS WORKING
                    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
                    var options = {
                        region: 'US',
                        displayMode: 'regions',
                        resolution: 'provinces',
                    };
                    chart.draw(data, options);
                }

                })                
        };
    </script>

score 1 · Answer 1 · answered Aug 16 '17 at 00:06

the complete function doesn't return any data
the first argument is the request object
see --> jQuery.ajax()

instead, try using the done callback

$.ajax({
  type: "POST",
  url: "myWebService.asmx/getJSONData",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  error: function (xhr, textStatus, error) {
    alert("Error: " + error)
  },
  done: function (response) {
    var data = new google.visualization.DataTable(response);
    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
    var options = {
      region: 'US',
      displayMode: 'regions',
      resolution: 'provinces',
    };
    chart.draw(data, options);
  }
});

also recommend not using --> async: false

hope this helps -- also, to use the `DataTable` constructor in that manner, the data must be in [this format](https://developers.google.com/chart/interactive/docs/reference#dataparam)... — WhiteHat, Aug 16 '17 at 00:06

score 0 · Answer 2 · answered Aug 16 '17 at 13:17

The error message about something not being a constructor (like google.visualization.DataTable) means that the constructor function is not defined at the time you are calling it (with the new keyword). So you need to investigate that in addition to the issues WhiteHat raised.

Looking over your code, I would suspect that the problem is caused by loading both the jsapi loader and the gstatic charts loader. You should only load the gstatic charts loader now (for a while, GeoCharts required both, but not with the current version). But it is not clear why loading both loaders would cause this problem, so my hunch is that there is more going on in your actual full page.

Google Geochart Google.Visualization.Datatable is not a constructor

2 Answers2