0

Necesito mostrar el resultado de una consulta dentro de un gráfico de Highcharts, he graficado antes con Highcharts, pero no de esta forma, mostrar todos los datos en una sola consulta. Ayuda por favor.

$MES_ACTA3 = $_POST['MES_ACTA3']; 
$ANO_ACTA3 = $_POST['ANO_ACTA3'];

$resultado7 = [];

$query= "SELECT PLACA, SUM(VALOR)
FROM `huawei_combustible`
WHERE YEAR(FECHA_TANQUEO) = '$ANO_ACTA3'
AND MONTH(FECHA_TANQUEO) = '$MES_ACTA3' GROUP BY PLACA ORDER BY `SUM(VALOR)`  DESC"; 
$result =  mysql_query($query, $conexion); 
$valor = mysql_result($result, 0); 
$resultado7[] = round($valor, 1); 

//Quiero pasar los datos con JSON mediante AJAX
echo json_encode([$resultado7]);

La tabla es esta:

PLACA  |FECHA_TANQUEO|VALOR| 
-------+-------------+-----+
ABC-123| 2018-01-01  | 100 |
DEF-456| 2018-01-01  | 200 |
GHI-789| 2018-02-02  | 300 |


**SCRIPT**

jQuery(function ($) {

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container3',
        type: 'bar'
    },

    title: {
      text: '<b></b>Seleccione y Año y Mes...</b>'
    },

    subtitle: {
        text: 'Informe Rollout Mensual'
    },

    yAxis: {
      title: {
        text: 'Valores en Miles'
      }
    },

    xAxis: {
      categories: []
    },

    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: true
        }
    },

    series: [{
      name : "COMBUSTIBLE",
      data: []
    }]
  });


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

    var ANO_ACTA3 = $('#ANO_ACTA3').val();
    var MES_ACTA3 = $('#MES_ACTA3').val();


    chart.setTitle({text: "<b></b>Consumo combustible por vehículo"});
    chart.setTitle(null, {text: "<b></b>Informe Rollout Mensual Año 2018"});

    $.ajax({
          url: "procesar_combustible3.php",
          method: "POST",
          data: { ANO_ACTA3: ANO_ACTA3, MES_ACTA3: MES_ACTA3},
          dataType: "json"
    })

     .done(function(data) {

        console.log(ANO_ACTA3);
        console.log(MES_ACTA3);
        console.log(data);

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

    });
  });
});

1 respuesta 1

0

Debe utilizar la función update de high charts

var chart = Highcharts.chart('container', {

title: {
    text: 'Chart.update'
},

subtitle: {
    text: 'Plain'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

series: [{
    type: 'column',
    colorByPoint: true,
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    showInLegend: false
}]

});
$( "#MES_ACTA3" ).change(function() {

var ANO_ACTA3 = $('#ANO_ACTA3').val();
var MES_ACTA3 = $('#MES_ACTA3').val();


chart.setTitle({text: "<b></b>Consumo combustible por vehículo"});
chart.setTitle(null, {text: "<b></b>Informe Rollout Mensual Año 2018"});

$.ajax({
      url: "procesar_combustible3.php",
      method: "POST",
      data: { ANO_ACTA3: ANO_ACTA3, MES_ACTA3: MES_ACTA3},
      dataType: "json"
})

 .done(function(datos) {

    console.log(ANO_ACTA3);
    console.log(MES_ACTA3);
    console.log(datos);
    chart.update({ series: [{ type: 'column',
                              colorByPoint: true,
                              data:datos ,
                              showInLegend: false 
                            }
                          ] 
                 });

    });
   });
  });
4
  • Agradezco tu ayuda, pero no comprendo bien donde colocar chart.series[0].setData(data[0]);, es decir si pudieras ayudarme con la consulta y cual es su ubicación en el código me seria de mas utilidad. Gracias.
    – Anderviver
    el 26 ene. 2018 a las 12:46
  • Dentro de su función .done(function(){ ... }) entonces la actualización va sobre su objeto series, algo como esto chart.update({ series: [{ name : "COMBUSTIBLE", data: [] }] }); el 29 ene. 2018 a las 12:29
  • Podrías actualizar tu respuesta por favor para comprender mejor lo que me dices, pues ya intente colocando el cogido como dices, pero no me muestra nada, verifique en la consola y no me arroja los datos.
    – Anderviver
    el 30 ene. 2018 a las 16:24
  • Algo así, lea la documentación de hightcharts, ahí se explcia mejor como actualizar un gráfico después de que este ya se ha renderizado el 31 ene. 2018 a las 20:20

Tu Respuesta

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

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