Can't show stacked columns dynamic json data - php

Question

Hi all i'm looking for help creating a test chart with dynamic data in php.
In first place i create the graph witout problem.
window.onload = function () {
chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Gasto Proyectado (neto)"
},
axisX: {
interval: 1,
intervalType: "month",
valueFormatString: "MM/YYYY"
},
axisY: {
suffix: "",
valueFormatString: "$#,###"
},
toolTip: {
shared: true
},
legend: {
reversed: true,
verticalAlign: "center",
horizontalAlign: "right",
cursor: "pointer",
itemclick: toggleDataSeries
},
data:[
<?php
$gastoMensualProyectado = Helper::gastoMensualProyectado();
//var_dump($gastoMensualProyectado);
//die();
$controlCostoN1= array();
foreach ($gastoMensualProyectado as $key => $value) {
$controlCostoN1[]= $value['name'];
}
$controlCostoN1 = array_unique($controlCostoN1);
$output = '';
foreach ($controlCostoN1 as $indice => $name) {
$output .= '{
type: "stackedColumn",
name: "'.$name.'",
showInLegend: true,
xValueFormatString: "MMM, YYYY",
yValueFormatString: "$#,###",
dataPoints:[';
foreach ($gastoMensualProyectado as $key => $value) {
if ($name == $value['name']){
$output.='{ x:'.$value['x'].', y:'.$value['y'].'},';
}
}
$output .=']},';
}
$output = substr($output,0,-3);
print $output;
?>
]
}]
});
chart.render();
Then i want to put new data calling a php file that respond with json_encode function
$dps = array();
$i=0;
$header = '';
foreach ($controlCostoN1 as $indice => $name) {
//$val[$i] = 'type: "stackedColumn",name: "'.$name.'",showInLegend: true,xValueFormatString: "MMM, YYYY",yValueFormatString: "$#,###",dataPoints:';
//var_dump($name);
foreach ($gastoMensualProyectado as $key => $value) {
// echo $name;
if ($name == $value['name']){
$dps[][$name] = $value;
/*
$header .= '{
type: "stackedColumn",
name: "'.$name.'",
showInLegend: true,
yValueFormatString: "#,##0 MW",
dataPoints: ';
//$points[] = '{ x:'.$value['x'].', y:'.$value['y'].'},';
//$dps[] = [ "x" => $value['x'], "y" => $value['y'] ];
.json_encode($value, JSON_NUMERIC_CHECK).'
},';
*/
}
}
}
// $output = substr($output,0,-3);
echo json_encode($dps);`
And then try to refresh the data in the graph when change a select but the grph change with no columns at all.
` $('#idPresupuesto').change(function(event) {
var dps = [];
var names = [];
var response;
$.getJSON("acciones/obtenerDatosStackedColumns.json.php", { idPresupuesto: $(this).val() } ,function(data) {
// console.log(data);
// console.log("swasaddsaasd");
$.each(data, function(key, value){
// dataPoints.push({x: value[0], y: parseInt(value[1])});
// console.log(value.first());
// console.log(value[Object.keys(value)[0]].name);
// value.map()
jQuery.map( value , function( n, i){
if(jQuery.inArray(n.name,names) < 0){
names.push(n.name);
//console.log(n.name);
}
});
});
$.each(data, function(key, value){
// console.log(key);
jQuery.map( value , function( n, i){
// console.log(n.x + " "+n.y);
dps.push({x: n.x, y: parseInt(n.y)});
// console.log();
});
});
console.log(dps);
// console.log(names);
// console.log(names.length);
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text:"Presupuesto"
},
animationEnabled: true,
data: [{
dataPoints : dps,
}]
});
chart.render();
});
});`
the json response is:
[{
"Alimentaci\u00f3n": {
"idOrdenCompra": 7,
"x": "new Date(2019, 2)",
"y": 1361340,
"name": "Alimentaci\u00f3n"
}
}, {
"Alimentaci\u00f3n": {
"idOrdenCompra": 146,
"x": "new Date(2019, 2)",
"y": 60000,
"name": "Alimentaci\u00f3n"
}
}, {
"Equipos": {
"idOrdenCompra": 125,
"x": "new Date(2019, 1)",
"y": 350500,
"name": "Equipos"
}
}, {
"Equipos": {
"idOrdenCompra": 29,
"x": "new Date(2019, 3)",
"y": 95014016,
"name": "Equipos"
}
}, {
"Equipos": {
"idOrdenCompra": 141,
"x": "new Date(2019, 3)",
"y": 2743908,
"name": "Equipos"
}
}, {
"Equipos de Protecci\u00f3n Personal": {
"idOrdenCompra": 1,
"x": "new Date(2019, 1)",
"y": 26179454,
"name": "Equipos de Protecci\u00f3n Personal"
}
}, {
"Equipos de Protecci\u00f3n Personal": {
"idOrdenCompra": 18,
"x": "new Date(2019, 3)",
"y": 8599651,
"name": "Equipos de Protecci\u00f3n Personal"
}
}, {
"Equipos de Protecci\u00f3n Personal": {
"idOrdenCompra": 84,
"x": "new Date(2019, 3)",
"y": 3233271,
"name": "Equipos de Protecci\u00f3n Personal"
}
}, {
"Materiales": {
"idOrdenCompra": 4,
"x": "new Date(2019, 2)",
"y": 12975104,
"name": "Materiales"
}
}, {
"Materiales": {
"idOrdenCompra": 14,
"x": "new Date(2019, 2)",
"y": 30393814,
"name": "Materiales"
}
}, {
"Materiales": {
"idOrdenCompra": 82,
"x": "new Date(2019, 2)",
"y": 30014590,
"name": "Materiales"
}
}, {
"Saldos Gastos Generales": {
"idOrdenCompra": 3,
"x": "new Date(2019, 2)",
"y": 4657962,
"name": "Saldos Gastos Generales"
}
}, {
"Saldos Gastos Generales": {
"idOrdenCompra": 16,
"x": "new Date(2019, 3)",
"y": 107923647,
"name": "Saldos Gastos Generales"
}
}, {
"Saldos Gastos Generales": {
"idOrdenCompra": 86,
"x": "new Date(2019, 3)",
"y": 80498702,
"name": "Saldos Gastos Generales"
}
}, {
"Herramientas": {
"idOrdenCompra": 16,
"x": "new Date(2019, 3)",
"y": 5056052,
"name": "Herramientas"
}
}, {
"Herramientas": {
"idOrdenCompra": 92,
"x": "new Date(2019, 4)",
"y": 2192715,
"name": "Herramientas"
}
}, {
"Mano de Obra": {
"idOrdenCompra": 19,
"x": "new Date(2019, 1)",
"y": 16748410,
"name": "Mano de Obra"
}
}, {
"Mano de Obra": {
"idOrdenCompra": 91,
"x": "new Date(2019, 3)",
"y": 1962698,
"name": "Mano de Obra"
}
}]
Actually the first graph render good but when i try to update data show me an empty chart.

Answer 1

I fixed it changing the json content of date
"x": "new Date(2019, 3)",
to
"x": "2019, 3",
and then apply to this line the object Date
$output.='{ x:new Date('.$value['x'].'), y:'.$value['y'].'},';
the the graph works great an dynamically!
hope this help to somebody.