1

Quiero poder gráficar dos categorías de unos datos de MySql, es decir con dos consultas, una que me diga el monto de dinero que se vendió en total y la otra que me diga cuantos productos se vendieron ese día. Vale aclarar que con una consulta funciona, es decir gráfica, pero intente muy ingenuamente con dos y no se declarar sintaxis para esta situación.

El código que tengo es el siguiente:

HTML

<script src="../hw/Highcharts/js/highcharts.js"></script>
<script src="../hw/Highcharts/js/jquery.js"></script>

<div class="caja">
    <select name="ANO" id="ANO" autofocus="autofocus">
      <option>Seleccione...</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
    </select>
</div>

<div class="caja">
    <select name="MES" id="MES">
      <option>Seleccione...</option>
      <option value="01">ENERO</option>
      <option value="02">FEBRERO</option>
      <option value="03">MARZO</option>
      <option value="04">ABRIL</option>
      <option value="05">MAYO</option>
      <option value="06">JUNIO</option>
      <option value="07">JULIO</option>
      <option value="08">AGOSTO</option>
      <option value="09">SEPTIEMBRE</option>
      <option value="10">OCTUBRE</option>
      <option value="11">NOVIEMBRE</option>
      <option value="12">DICIEMBRE</option>
    </select>
</div>

SCRIPT

<script>

jQuery(function ($) {
var chart = new Highcharts.Chart({
  chart: {
      renderTo: 'container'
  },

  series: [{
    name : "Ventas",
    data: []
    },{
    name : "Genero M",
    data: []
    }
    ]
  });

  $( "#MES" ).change(function() {
     //validamos las fechass
    var ANO = $('#ANO').val();
    var MES = $('#MES').val();
    $.ajax({
      url: "procesar.php",
      method: "POST",
      data: { ANO: ANO, MES: MES },
      dataType: "json"
    })

   .done(function(data) {

   console.log(data);
   console.log(ANO);
   console.log(MES);
   //No se como colocar la sintaxis para los chart.series cuando es mas de 
   uno     
   chart.series[0].setData(data);
   chart.series[1].setData(data2);

    });
  });
});
</script>

Ingenuamente quise llamar los datos de esta forma en la consulta, obviamente no esta bien, pues no gráfica.

PHP

<?php require_once('../../Connections/conexion.php'); ?>

<?php

$MES = $_POST['MES']; 
$ANO = $_POST['ANO']; 
$resultado = [];
$resultado2 = [];

for ($i = 0; $i <= 31; $i++) { 
$query= "SELECT SUM(monto_venta) AS r FROM pruebas WHERE 
DAY(fecha_venta)='$i' AND MONTH(fecha_venta)='$MES' AND YEAR(fecha_venta) = 
'$ANO'"; 

$result =  mysql_query($query, $conexion); 
$valor = mysql_result($result, 0); 
$resultado[] = round($valor, 1); 
}

for ($i = 0; $i <= 31; $i++) { 
$query2= "SELECT SUM(productos) AS prod FROM pruebas WHERE 
DAY(fecha_venta)='$i' AND MONTH(fecha_venta)='$MES' AND YEAR(fecha_venta) = 
'$ANO'"; 

$result2 =  mysql_query($query2, $conexion); 
$valor2 = mysql_result($result2, 0); 
$resultado2[] = round($valor2, 1); 
}  

echo json_encode($resultado);
echo json_encode($resultado2);

?>
1
  • 1) Mira la consola a ver si arroja errores. 2) intenta declarar dos elementos con id's diferentes que tendrán las gráficas. 3) si no lo has hecho aún, investiga. He leído varias preguntas en Stack Overflow en Español y Stack Overflow con problemas similares. Commented el 20 oct. 2017 a las 23:07

1 respuesta 1

2

Si concatenas dos cadenas JSON no obtienes un JSON bien formado, que es lo que intentas hacer con las líneas:

echo json_encode($resultado);
echo json_encode($resultado2);

En su lugar debes generar un JSON a partir de una matriz cuyos elementos sean las dos matrices:

echo json_encode([$resultado, $resultado2]);

Por otro lado, ahora debes asignar las series de la siguiente manera:

$.ajax({
  url: "procesar.php",
  method: "POST",
  data: { ANO: ANO, MES: MES },
  dataType: "json"
})
.done(function(data) {
  console.log(data);
  console.log(ANO);
  console.log(MES);
  /* Ahora "data" es una matriz de dos elementos, cada una contiene una serie: */
  chart.series[0].setData(data[0]);
  chart.series[1].setData(data[1]);
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.