HighCharts, Json and Ajax - php

Question

I have a php code that generates me a result in json format
<?php
header('Content-type: application/json');
include_once 'Conexion.php';
$objeto = new Conexion();
$conexion = $objeto->conectar();
$fecInicio = (isset($_POST['fechaInicio'])) ? $_POST['fechaInicio'] : '';
$fecFin = (isset($_POST['fechaFin'])) ? $_POST['fechaFin'] : '';
$consulta = "SELECT MONTHNAME(fecha), sum(totalVenta) FROM ventas WHERE fecha BETWEEN '$fecInicio' AND '$fecFin' GROUP BY MONTH(fecha)";
$resultado = $conexion->prepare($consulta);
$resultado->execute();
$result = array();
while ($fila = $resultado->fetch(PDO::FETCH_ASSOC)){
array_push($result, array($fila["MONTHNAME(fecha)"], $fila["sum(totalVenta)"])) ;
}
print json_encode($result);
$conexion=null;
With jquery ajax json I get and I want to use in data for a chart with Highcharts. This is the code of my JS
var chart1;
var options;
$(document).ready(function() {
var fechaInicio;
var fechaFin;
$("#generarReporte").click(function(){
fechaInicio = $("#fechaInicio").val();
fechaFin = $("#fechaFin").val();
$.ajax({
url: "../libreria/ORM/reportes.php",
type: "POST",
datatype:"json",
data: {fechaInicio:fechaInicio, fechaFin:fechaFin },
success: function(data) {
//recibo el json desde PHP y lo paso a string
var valores = JSON.stringify(data);
console.log(valores);
options.series[0].data = valores;
}
});
$("#opcion5").click();
});
$("#opcion5").click(function(){
var theModal = $("#modalGraficos").modal({
show: false
});
options = {
chart: {
renderTo: 'container1',
type: "column"
},
title: {
text: "Ventas Mensuales"
},
subtitle: {
text: "Período consultado, desde: <strong>"+fechaInicio+"</strong> hasta: <strong>"+fechaFin+"</strong>"
},
xAxis: {
type: "category",
labels: {
rotation: -45,
style: {
fontSize: "13px",
fontFamily: "Verdana, sans-serif"
}
}
},
yAxis: {
min: 0,
title: {
text: "Pesos AR$"
}
},
//establecemos los colores de las columnas por Mes
colors: [
"#4572A7",
"rgba(248, 44, 91, 0.61)",
"#89A54E",
"#80699B",
"#3D96AE",
"#DB843D",
"#92A8CD",
"#A47D7C",
"#B5CA92"
],
plotOptions: {
column: {
colorByPoint: true
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: "Total del Mes: <b>$ {point.y:.2f}</b>"
},
series: [{
name: "Ventas por mes",
dataLabels: {
enabled: true,
//rotation: -90,
rotation: 0,
color: "#ffffff",
align: "center",
format: "{point.y:,.2f}",
y: 30, // 10 pixels down from the top
style: {
fontSize: "13px",
fontFamily: "Verdana, sans-serif"
}
},
data:[
]
}]
}; //fin options
var chart1 = new Highcharts.Chart(options);
theModal.on("shown",function(){
// Recreate the chart now and it will be correct
});
theModal.modal("show");
});
});
The result console log is valid json format:
[["March","436400.00"],["April","1302261.50"]]
console log
I can not make the chart. It can help or assist? thank you very much

Answer 1

you need to set the data you get from ajax call to chart options. this link might help Load data into Highcharts with Ajax

Answer 2

A few clues:
Chart should mi inititailised in ajax callback
numbers shoudl not be a strings like you have. It should be [["March",436400.00],["April",1302261.50]]. To do that set the flag "JSON_NUMERIC_CHECK" in json_encode() function.