Problem when plotting with Highcharts and AJAX

Question

Problem when plotting with Highcharts and AJAX

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I am trying to make a dynamic graphic, that I pass the data by AJAX, that when selecting a MES graph me according to result, it happens that in the browser console it shows me results according to the query but it does not graph me, and If I put predetermined results, it shows them, but when I change the month, the graphic is blank. please help. I attach all the code.

HTML

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

<div class="caja">
    <select name="ANO" id="ANO" autofocus="autofocus">
        <option>Seleccione...</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
    </select>
</div>
<br>
<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>

JS

<script>

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

  series: [{
    name : "Planillas recibidas por dia",
    data: [1,2,3,4,5,6,7,8,9,10]


     }]
  });

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

  .done(function(data) {

  console.log(data);
  console.log(ANO);
  console.log(MES);

  chart.series[0].setData(data.resultado);

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

PHP

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


<?php 

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


for ($i = 1; $i <= 31; $i++) { 
$query= "SELECT SUM(PLANILLA) AS r FROM acta_entrega WHERE 
DAY(FECHA_E_FAC)='$i' AND MONTH(FECHA_E_FAC)='$MES' AND YEAR(FECHA_E_FAC) = 
'$ANO'"; 
$result = mysql_query($query, $conexion); 
$valor = mysql_result($result, 0); 
$resultado[] = round($valor, 1); 
} 

$data = array("resultado" => $resultado); 
echo json_encode($data); 

?>

sql jquery php ajax highcharts

asked by Anderviver 26.09.2017 в 19:05

source

2 answers

1

You are returning an array and array:

$data = array("resultado" => $resultado); 
echo json_encode($data);

Try sending the variable $resulado in itself:

echo json_encode($resultado);

Then in your javascript the way to get the answer would be:

  //...
 .done(function(data) {
     chart.series[0].setData(data)
 });

Here is an example of how it would be:

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

          series: [{
              name: "Planillas recibidas por dia",
              data:[1,2,3,4,2,1],
          }]
      });

      $("#MES").change(function() {
          
          var ANO = $('#ANO').val();
          var MES = $('#MES').val();
          console.log(MES);
          $.ajax({
                  url: "https://api.myjson.com/bins/1261v5",
                  method: "get",
                  data: {
                      ANO: ANO,
                      MES: MES
                  }
              })
              .done(function(data) {
                  chart.series[0].setData(data);
              });
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>


<div class="caja">
    <select name="ANO" id="ANO" autofocus="autofocus">
        <option>Seleccione...</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
    </select>
</div>
<br>
<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>

<div id="container"></div>

answered by 26.09.2017 в 19:57

Input of type file to obtain value Show form depending on value in SESSION variable in PHP

score 0 · Accepted Answer

After several days, but I publish the solution in case someone serves:

The only thing that was missing was to declare the type of data by which the results are called:

$( "#MES" ).change(function() {

  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);

  chart.series[0].setData(data);  
});