I want to be able to show on a Highcharts chart the result of the following query with Json:
process_combustible3.php
$MES_ACTA3 = $_POST['MES_ACTA3'];
$ANO_ACTA3 = $_POST['ANO_ACTA3'];
$resultado7 = [];
$query= "SELECT PLACA, SUM(VALOR) FROM 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);
echo json_encode([$resultado7]);
The table is this:
PLACA |FECHA_TANQUEO|VALOR|
-------+-------------+-----+
ABC-123| 2018-01-01 | 100 |
DEF-456| 2018-01-01 | 200 |
GHI-789| 2018-02-02 | 300 |
I run the query in MySQL and it effectively brings me the total fuel consumed per plate in the month.
My problem occurs when trying to organize the graph or make the data appear, I have tried this way but it does not show any data, only the graph and the data appear in 0.
estadistica_combustible.php
HTML
<select name="ANO_ACTA3" id="ANO_ACTA3">
<option value="">Seleccione...</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<select name="MES_ACTA3" id="MES_ACTA3">
<option value="">Seleccione...</option>
<option value="01">ENERO</option>
<option value="02">FEBRERO</option>
<option value="03">MARZO</option>
</select>
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]);
});
});
});