Tema: Jquery ajax no muestra grafica.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/12/2016, 17:34
VALFONSOG
 
Fecha de Ingreso: julio-2015
Ubicación: MEXICO
Mensajes: 46
Antigüedad: 9 años, 9 meses
Puntos: 0
Pregunta Jquery ajax no muestra grafica.
Buenas tardes compañeros tengo ya un rato con esto y no logro hacer que funcione.
tengo el siguiente codigo en html
Código HTML: 
Ver original
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <title>Corte</title> 
  5.     <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' />
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
  7.     <link rel="shortcut icon" href="demo/favicon.ico" type="image/x-icon" />
  8.     <style type="text/css">
  9.         div.demo {
  10.             border-bottom: 1px dotted gray;
  11.             margin-bottom: 2em;
  12.         }
  13.         input {
  14.             margin: 2em 0;
  15.         }
  16.     </style>
  17.     <link rel="stylesheet" href="external/jquery.mobile-1.3.0.min.css" />
  18.     <link href="css/mobipick.css" rel="stylesheet" type="text/css" />
  19.     <link href="demo/shCoreDefault.css" rel="stylesheet" type="text/css" />
  20.     <link href="demo/shThemeDefault.css" rel="stylesheet" type="text/css" />
  21.     <script type="text/javascript" src="demo/shCore.js"></script>
  22.     <script type="text/javascript" src="demo/shBrushJScript.js"></script>
  23.     <script type="text/javascript" src="demo/shBrushXml.js"></script>
  24.     <script type="text/javascript" src="external/modernizr.custom.min.js"></script>
  25.     <script type="text/javascript" src="external/xdate.js"></script>
  26.     <script type="text/javascript" src="external/xdate.i18n.js"></script>
  27.     <script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
  28.     <script type="text/javascript" src="external/jquery.mobile-1.3.0.min.js"></script>
  29.     <script type="text/javascript" src="js/mobipick.js"></script>
  30.     <script type="text/javascript">
  31.         $( document ).on( "pagecreate", "#demo", function() {
  32.             var hoy = new Date();
  33. var dd = hoy.getDate();
  34. var mm = hoy.getMonth()+1; //hoy es 0!
  35. var yyyy = hoy.getFullYear();
  36.  
  37. if(dd<10) {
  38.     dd='0'+dd
  39. } 
  40.  
  41. if(mm<10) {
  42.     mm='0'+mm
  43. } 
  44.  
  45. hoy = yyyy+'/'+mm+'/'+dd;
  46. $(".max").attr("max",hoy);
  47.             SyntaxHighlighter.all();
  48.  
  49.             var picker = $( "input[type='text']", this );
  50.  
  51.             picker.mobipick();
  52.  
  53.             picker.on( "change", function() {
  54.                     var date = $( this ).val();
  55.                     // formatted date                   
  56.                     var dateObject = $( this ).mobipick( "option", "date" );
  57.             });
  58.             
  59.             $("#botoncito").click(
  60.             function (){
  61.                 var valor1=$("#min").val();
  62.                 var valor2=$("#max").val();
  63.                 $.ajax({
  64.     // En data puedes utilizar un objeto JSON, un array o un query string
  65.     
  66.     data: {"fecha1" : valor1, "fecha2" : valor2 },
  67.     //Cambiar a type: POST si necesario
  68.     type: "POST",
  69.     // Formato de datos que se espera en la respuesta
  70.   
  71.     // URL a la que se enviará la solicitud Ajax
  72.     url: "Grafica.php",
  73. })
  74.  .done(function( data ) {
  75.      alert(data)
  76.      $("#Aqui").html(data)
  77.  })
  78.                 }
  79.             )
  80.             
  81.         });
  82.     </script>
  83. </head>
  84. <body><div id="Aqui">
  85.  
  86. <form action="grafica.php"  method="post"  >
  87.     <div id="demo" data-role="page" data-add-back-btn="true" class="ui-body-b">
  88.         <div data-role="header" class="ui-body-b">
  89.             <h1>Seleccione Fechas</h1>
  90.         </div>
  91.         
  92.         <div data-role="content" class="ui-body-b">
  93.             <div class="demo">          
  94.                 <h1>Primer fecha</h1>
  95.                 
  96.                 <input type="text" id="min" class="max" max="2015-12-31" />
  97.                 <h1>Segunda fecha</h1>
  98.                 
  99.                 <input type="text" class="max" id="max" max="2015-12-31" min="2015-12-31" />
  100.                 
  101.                             
  102.                 
  103.                 </div>
  104.                 
  105.  
  106.     </div>
  107.     <input type="button"  id="botoncito"  value="Consultar"/>
  108.     
  109.     </div>
  110.     </form>
  111.     </div>
  112. </body>
  113. </html>
este codigo consulta a este php
Código PHP: 
Ver original
  1. <?php 
  2. require('class/metro.class.php');
  3. $objMetro = new Metro;
  4. $fecha1=$_POST["fecha1"];
  5. $consulta="SELECT SUM(total) AS total_categoria,descripcion FROM(
  6. SELECT t2.idpedido, (t2.cantidad*t3.precio) AS total, t4.descripcion, t1.fecha 
  7. FROM ventas AS t1
  8. INNER JOIN pedidos AS t2 ON (t1.ticket=t2.idOrden)
  9. INNER JOIN productosVENTA AS t3 ON (t2.productos=t3.idProducto)
  10. INNER JOIN categoria AS t4 ON (t3.idcategoria=t4.idcategoria)
  11. ) AS completa where fecha between DATE('2016/12/10') and DATE('2016/12/14') GROUP BY descripcion";
  12.  
  13.         
  14.         $usuarios_login = $objMetro->query($consulta);
  15.         $numFilas = mysql_num_rows($usuarios_login);
  16.         $datos[0] = array('total_categoria','descripcion');
  17.  
  18. //recorremos filas
  19. for ($i=1; $i<($numFilas+1); $i++)
  20. {
  21.     $datos[$i] = array(mysql_result($usuarios_login, $i-1, "descripcion"),
  22.     (int) mysql_result($usuarios_login, $i-1, "total_categoria"));
  23. }
  24. ?>
  25. <!doctype html>
  26. <html>
  27. <head>
  28. <meta charset="utf-8">
  29.     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  30.     <script type="text/javascript">
  31.       google.charts.load("current", {packages:["corechart"]});
  32.       google.charts.setOnLoadCallback(drawChart);
  33.       function drawChart() {
  34.           var cargaDatos = <?php echo json_encode($datos); ?>;
  35.         var data = google.visualization.arrayToDataTable(cargaDatos);
  36.  
  37.         var options = {
  38.           title: 'Corte del <?php echo "aldiax y dia y"; ?> ',
  39.           is3D: true,
  40.  
  41.         };
  42.  
  43.         var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
  44.         chart.draw(data, options);
  45.       }
  46.     </script>
  47.   </head>
  48.   <body>
  49.   <?php 
  50.   echo $fecha1."<br>";
  51.   $usuarios_login = $objMetro->query($consulta);
  52.   while ($usuarios = mysql_fetch_array($usuarios_login)) {
  53.           echo   $usuarios[1] . "   " ."  $". $usuarios[0]."<br>";
  54.                             } 
  55.                             
  56.     ?>
  57.     <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  58.   </body>
  59. </html>

y me retorna este html
Código HTML: 
Ver original
  1. <!doctype html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7. <meta charset="utf-8">
  8.  
  9.     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  10.  
  11.     <script type="text/javascript">
  12.  
  13.       google.charts.load("current", {packages:["corechart"]});
  14.  
  15.       google.charts.setOnLoadCallback(drawChart);
  16.  
  17.       function drawChart() {
  18.  
  19.           var cargaDatos = [["total_categoria","descripcion"],["Bebidas",49],["Combinados",8],["Derivados ",30],["Tacos Normales",128]];
  20.  
  21.         var data = google.visualization.arrayToDataTable(cargaDatos);
  22.  
  23.  
  24.  
  25.         var options = {
  26.  
  27.           title: 'Corte del aldiax y dia y ',
  28.  
  29.           pieHole: 0.4,
  30.  
  31.  
  32.  
  33.         };
  34.  
  35.  
  36.  
  37.         var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
  38.  
  39.         chart.draw(data, options);
  40.  
  41.       }
  42.  
  43.     </script>
  44.  
  45.   </head>
  46.  
  47.   <body>
  48.  
  49.   Bebidas   49<br>Combinados   8<br>Derivados    30<br>Tacos Normales   128<br>    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  50.  
  51.   </body>
  52.  
  53. </html>

el problema es que la funcion ajax en jquery no me muestra la grafica que segun el html si esta, mas sin enbargo si me muestra los datos que estan en el while del php . si consulto el php directo del archivo funciona sin problemas que podria ser? alguna configuracion de mi xampp??
__________________
VENIMOS A APRENDER