CODEWITHSUNDEEP
jsonchartsgoogle-visualizationgoogle-datatable
Jamie
Jamie

Reputation: 81

Google Geochart Google.Visualization.Datatable is not a constructor

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>

Upvotes: 1

Views: 567

Answers (2)

dlaliberte
dlaliberte

Reputation: 3260

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.

Upvotes: 0

WhiteHat
WhiteHat

Reputation: 61212

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

Upvotes: 1

Related Questions