Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: [u]nsigned en 5 Agosto 2015, 20:09 pm



Título: Problemas con Google Charts
Publicado por: [u]nsigned en 5 Agosto 2015, 20:09 pm
Hola, basandome en este ejemplo, hice una prueba con este codigo, pero por alguna razon la ventana queda en blanco...no veo donde esta mi error!

Código
  1.  <head>
  2.    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  3.    <script type="text/javascript">
  4.      google.load("visualization", "1", {packages:["corechart"]});
  5.      google.setOnLoadCallback(drawChart);
  6.      function drawChart() {
  7.  
  8.        var data = google.visualization.arrayToDataTable([[3,'28 de Julio'],[1,'28 de Jullio'],[3,'Aldea Epulef'],[1,'Aldea Escolar'],[17,'Camarones'],[8,'Carrenleufú'],[17,'Cholila'],[2,'Colan Conhué'],[31,'Comodoro Rivadavia'],[26,'Corcovado'],[1,'Cushamen'],[3,'Dique Ameghino'],[41,'Dolavon'],[9,'El Hoyo'],[22,'El Maitén'],[6,'Epuyen'],[231,'ESQUEL'],[60,'GAIMAN'],[5,'Gan Gan'],[17,'Gastre'],[6,'Gobernador Costa'],[1,'Gualjaina'],[4,'Lago Puelo'],[2,'Lagunita Salada'],[1,'Paso de Indios'],[3,'Paso del Sapo'],[283,'Puerto Madryn'],[2,'Puerto Pirámides'],[4,'Rada Tilly'],[198,'Rawson'],[3,'Rio Pico'],[25,'Sarmiento'],[2,'Tecka'],[5,'Telsen'],[291,'Trelew'],[1,'Treorky'],[81,'Trevelin']]);
  9.  
  10.        var options = {
  11.          title: 'My Daily Activities',
  12.          is3D: true,
  13.        };
  14.  
  15.        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
  16.        chart.draw(data, options);
  17.      }
  18.    </script>
  19.  </head>
  20.  <body>
  21.    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  22.  </body>
  23. </html>


Título: Re: Problemas con Google Charts
Publicado por: engel lex en 5 Agosto 2015, 20:30 pm
tienes varios errores, invstigué y en el tipo pie chart, la primera ronda debe ser el titulo de las columnas... también todos los valores deben ser primero string... te dejo el array modificado para que funcione

Código
  1. var data = google.visualization.arrayToDataTable([
  2. ["cosa","cantidad"]
  3. ,['28 de Julio',3]
  4. ,['28 de Jullio',1]
  5. ,['Aldea Epulef',3]
  6. ,['Aldea Escolar',1]
  7. ,['Camarones',17]
  8. ,['Carrenleufú',8]
  9. ,['Cholila',17]
  10. ,['Colan Conhué',2]
  11. ,['Comodoro Rivadavia',31]
  12. ,['Corcovado',26]
  13. ,['Cushamen',1]
  14. ,['Dique Ameghino',3]
  15. ,['Dolavon',41]
  16. ,['El Hoyo',9]
  17. ,['El Maitén',22]
  18. ,['Epuyen',6]
  19. ,['ESQUEL',231]
  20. ,['GAIMAN',60]
  21. ,['Gan Gan',5]
  22. ,['Gastre',17]
  23. ,['Gobernador Costa',6]
  24. ,['Gualjaina',1]
  25. ,['Lago Puelo',4]
  26. ,['Lagunita Salada',2]
  27. ,['Paso de Indios',1]
  28. ,['Paso del Sapo',3]
  29. ,['Puerto Madryn',283]
  30. ,['Puerto Pirámides',2]
  31. ,['Rada Tilly',4]
  32. ,['Rawson',198]
  33. ,['Rio Pico',3]
  34. ,['Sarmiento',25]
  35. ,['Tecka',2]
  36. ,['Telsen',5]
  37. ,['Trelew',291]
  38. ,['Treorky',1]
  39. ,['Trevelin',81]
  40. ]);


Título: Re: Problemas con Google Charts
Publicado por: eLank0 en 6 Agosto 2015, 14:56 pm
Ves con cuidado con modificar los tipos de datos al libre albedrío ya que el problema reside en el Datatable que has creado. Con el original funciona:

Código
  1.  <head>
  2.    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  3.    <script type="text/javascript">
  4.    google.load("visualization", "1", {packages:["corechart"]});
  5.    google.setOnLoadCallback(drawChart);
  6.  
  7.      function drawChart() {
  8.  
  9.        var data = google.visualization.arrayToDataTable([
  10.          ['Task', 'Hours per Day'],
  11.          ['Work',     11],
  12.          ['Eat',      2],
  13.          ['Commute',  2],
  14.          ['Watch TV', 2],
  15.          ['Sleep',    7]
  16.        ]);
  17.  
  18.        var options = {
  19.          title: 'My Daily Activities',
  20.          is3D: true,
  21.        };
  22.  
  23.        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  24.        chart.draw(data, options);
  25.      }
  26.  
  27.  
  28.    </script>
  29.  </head>
  30.  <body>
  31.    <div id="piechart" style="width: 900px; height: 500px;"></div>
  32.  </body>
  33. </html>

Salu2!!  :P