web-dev-qa-db-fra.com

TypeError: google.visualization.DataTable n'est pas un constructeur

Sur ma page Web, j'ai une carte google, ainsi que trois graphiques. Lorsque la page se charge, la carte est correcte, mais les graphiques ne se chargent pas ou seulement un ou deux le font. Continuez à obtenir l'erreur TypeError: google.visualization.DataTable n'est pas un constructeur.

function load() {
     //map object
        var MY_MAP = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 54.870902, lng: -6.300565}, 
        zoom: 14
      });    
      //call to get and process data
      downloadUrl("Map.php", processXML);
  }  

 // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']}); 
        // Set a callback to run when the Google Visualization API is loaded. 
google.setOnLoadCallback(drawAltitudeChart());  
google.setOnLoadCallback(drawDisplacementChart());
google.setOnLoadCallback(drawDistanceChart());  



function drawAltitudeChart(){

         //console.log('hello');
         var graph = [];
          downloadUrl("Map.php", function (data){
              var xml = data.responseXML;
              var markers = xml.documentElement.getElementsByTagName("marker");
              var dataTable = new google.visualization.DataTable();
              var options = {title:'Altitude (m above sea level)', 
                  curveType:'function', 
                  legend:{position:'bottom'},
                  is3d:true     
              };
              var chart;

              for(var i = 0; i<markers.length; i++){
                  graph[i] = ['', parseInt(markers[i].getAttribute("alt"))];   
              }

              dataTable.addColumn('string', 'id');
              dataTable.addColumn('number', 'Altitude');
              dataTable.addRows(graph);


              chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
              chart.draw(dataTable, options); 

          });
      }
javascriptchartsgoogle-visualization
9
fst104

Je ne pense pas que vous puissiez ajouter plus d'un rappel comme ça.

Vous pouvez également définir le rappel dans la méthode load, comme ceci ...

google.load('visualization', '1.0', {'packages':['corechart'], 'callback': drawCharts});

function drawCharts() {
  drawAltitudeChart();
  drawDisplacementChart();
  drawDistanceChart();
}

[~ # ~] modifier [~ # ~]

l'instruction load ci-dessus concerne la bibliothèque plus ancienne ...

<script src="http://www.google.com/jsapi"></script>

selon le notes de version ...

La version de Google Charts qui reste disponible via le chargeur jsapi n'est plus mise à jour de manière cohérente. Veuillez utiliser le nouveau chargeur gstatic à partir de maintenant.

en utilisant la nouvelle bibliothèque ...

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

change l'instruction load en ...

google.charts.load('current', {'packages': ['corechart'], 'callback': drawCharts});

EDIT 2

vous pouvez également charger tous les packages dont vous avez besoin dans une seule instruction load, par exemple.
au lieu de...

google.charts.load('current', { 'packages': ['table'] });
google.charts.load('current', { 'packages': ['bar'] });
google.charts.load('current', { 'packages': ['pie'] });  // <-- 'pie' package does not exist
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawCharts);

ça devrait être...

google.charts.load('current', {
  callback: drawCharts,
  packages: ['bar', 'corechart', 'table']
});
14
WhiteHat

J'ai le même message, mais juste parce que j'ai oublié de charger le paquet

  // was -> google.charts.load('current', {'packages':['bar', 'corechart']});
  google.charts.load('current', {'packages':['bar', 'corechart', 'table']});
5
kztd