Foros del Web » Programando para Internet » Jquery »

Jquery ajax no muestra grafica.

 Estas en el tema de Jquery ajax no muestra grafica. en el foro de Jquery en Foros del Web. Buenas tardes compañeros tengo ya un rato con esto y no logro hacer que funcione. tengo el siguiente codigo en html @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: ...
  #1 (permalink)  
Antiguo 19/12/2016, 17:34
 
Fecha de Ingreso: julio-2015
Ubicación: MEXICO
Mensajes: 46
Antigüedad: 9 años, 4 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

Etiquetas: ajax, muestra
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:08.